I've made this very simple jsfiddle to show you this abnormal behaviour http://jsfiddle.net/mrgamer/GgUkE/2/
In my application i'm using the same methods i've written here, .loadRawData() on the store, cause .loadData() doesn't fire the 'load' event.
I'm filling the store manually cause i've to filter some JSON data, compile it, and then insert to this store.
Anyway the problem doesn't seem to be in the store, since the Grid gets populated, you can click on 2 rows, but the data isn't displayed!
Updated
There was a typo in the dataIndex properties in your columns. Required a capital 'I'
Grid Panel with Store example
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.Panel
Fixed code
http://jsfiddle.net/fw3Vc/1/
Related
I'm using ExtJS 5.1.3, I have a grid which is loaded from a store which has a model. The grid is set to use plugin roweditor, so I edit a cell and give it a new value, at this point the red tick is shown that the cell has been changed.
I have a Save button which when clicked gets the store.getModifiedRecords() and passes these off to a ajax request, upon success of this request a few things happen and the last action I do is to load the grid store again which then populates the grid again with the latest version of the data, this is fine and seems to be working as expected.
As this is a multi page application I also have a check when a user navigates away from this page, this is to catch any unsaved grid changes, so basically I get any form from the page and verify the isDirty() value, this is where I am finding my issue, the roweditor is being returned as dirty, this is because some columns have an editor and ExtJS uses form validation on these fields,
I can't understand why the store loading again has not cleared any dirty fields associated with the grid columns? I've tried a number of things such as clearing the store prior to ajax request along with refreshing the grid view, I've tried committing the store changes prior to doing the ajax request but each time I try navigate away from the page after a grid save I pick up the roweditor as having dirty fields :( any help is greatly appreciated.
EDIT: managed to replicate on a simple fiddle
https://fiddle.sencha.com/#view/editor&fiddle/1rmf
The fiddle is basic, to replicate follow these steps;
edit first row age, change age to 13
click Save (i'm forcing the store to load data which has the change we've made)
click 'Check roweditor is Dirty() value' button to see the value of the roweditor isDirty() function, this will return true
if you look at the button handler, you can drill into forms[0].items.items[2] and see that this field has dirty: true which is why isDirty() is returning true.
SOLUTION
As explained in accepted answer, the roweditor is not affected by the store edit/cancel or load in my case. What I did when clicking on 'Save' was to get the grid, then the editor and it's form and called reset() on this so effectively sync everything again.
grid.editingPlugin.getEditor().form.reset();
you can also get access to plugins via grid.getPlugins() which returns an arrary
updated fiddle to show it working
https://fiddle.sencha.com/#view/editor&fiddle/1rmr
During the editing process grid will eventually call loadRecord on the editor's form. However the editor's form is not cleared upon editing success or canceling. That is why your check for dirtyness returns false.
Grid reloading the data is not destroying the editors. It is an optimisation. Editors are created only once and they are destroyed along with the grid.
I'll try to answer regarding to an experience of mine with an all ExtJS desktop application.
By the way looking quickly over your description, you may have to call the Store.sync() method that refreshes your store.
Looking more deeply, there are many way to make CRUD using ExtJs.
I've been made using the "instance" of store but at certain point I had to change it to static calls like MyApp.store.Model.save() etc. That makes you have only one instance of the store avoiding dirty data.
Here's my project folder if you need
https://github.com/guilhermeribeirodev/grizzlyboilerplate/tree/master/src/main/webapp/js/MyApp
I have an angular application where I am trying to create batch editing in a Kendo Grid. I am manually adding data to the grid, so not using the datasource's transport mechanism, but rather just calling the .data() on the datasource.
When I edit a cell it correctly fires the save event, which also passes the modified data item, however when I call .toJSON() in order to get the raw data of the model, the output of .toJSON() seems to be different from the output of the model itself. It is as if the .toJSON() is behind by an iteration because when I edit the cell again it's the previous value I get.
An example of it can be seen here: http://dojo.telerik.com/ujiSu/5
Try to edit the product name, then in the console you can see the output of model and the output of model.toJSON()
I have tried calling .read() on the datasource before .toJSON() but that results in the datasource being emptied for some reason.
I have also been looking at the dirty property of the model data, forcing it's dirty state to change, but also without any different results.
My goal is to get the raw current data which is displayed in the grid and the datasource.
Any help with this is much appreciated.
In the save event of the grid, the model has not yet been updated. It will be updated by the grid(i.e. pushed into the grid's dataSource) after the save event. This is because the save event is cancel-able via e.preventDefault().
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save
So, e.model contains the current state of the dataSource item and e.values contains the updated fields until after the save completes, at which point the values in e.values are pushed into the dataSource model.
You either need to combine e.values with e.model in the grid save event or you may want to instead look at the DataSource change event http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#events-change where the action is "itemchange" as that will occur after the grid save event(as long as you haven't cancelled it).
I have an Extjs (version 6, classic API) panel with a grid in it. This grid has its own store that is ready to go within initComponent(). It's iterating over those records just fine. The issue is that one column has a custom renderer that relies on another store. This store may or may not be loaded depending on a few different factors. As a result, the grid doesn't render that column correctly. I find myself in a bit of a pickle as to how to deal with that. The basic concept is that the value for that column is just a key that means nothing to the user. This key is looked up in the non-grid store to display the data correctly using the renderer attribute in the grid column. All of the code is executing fine, but it's the issue of having that store loaded, and when it does load, it does not trigger a rerender of that column as it's not the store for the grid itself.
I could load the store synchronously before initComponent() is complete, but that's hardly ideal. I can't tell it to wait for the store to load during the render phase as that will leave the column blank if the store isn't loaded. I need to trigger a rerender of that column somehow or get it to properly wait if the non-grid store isn't loaded. Any ideas?
AFAIK there is no way to tell a grid to rerender a certain column. So you will have to refresh the whole grid:
myGrid.on('afterrender',function(grid) {
externalStore.on('load',function() {
grid.getView().refresh();
});
});
I have a search button that triggers Ajax request to fetch data from DB. When the promise is resolved I populate gridoptions.data. The grid is rendered in the screen.
I make some changes in the grid, like hide some columns, enter something into the header filters, change sort order etc.. When I hit the search button again, the data is fetched again and grid is updated with that data but the grid layout remains as is, all the the changes I made earlier in place..
I need to intialize the grid every time I hit search button... I tried redefining gridoptions.columnDefs but that didn't work..
Suggestions please.
Try:
$scope.gridoptions = {} as the first line in the search function, instead of just clearing the columnDefs.
I have simple grid with a store. When I add a record to a store it reflects on the grid. But on few occasions when toggle between browser tabs.
The store load event seem to fire from then on when I add a record to the store its getting added but it don't seem to reflect on the grid
How do I stop the extjs store load event from firing on its own?
Have you thought about adding the following config option to your store?
autoLoad: false