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).
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 a problem with Angular UI-Grid (http://ui-grid.info/). Grid is implemented in modal window that appears after user clicks button.
Service works that way: User selects data set to prepare and clicks button. After clicking button website sends request to rest service to receive data. After receiving data modal with table is shown. Columns count depends on data requested by user.
The problem is that after user changes columns width and close modal with this table UI-Grid 'remembers' this column width that user left. If then user will select another set of data I am cleaning GridOptions object and fill it once again after data is received. The problem is that row width stays in previous state.
I tried so far:
using apis core.refresh() method - while debugging I can see that this
method fires some event but no effect on my grid,
remove whole DOM node and append it again before receiving response with new data
various different hacks trying to use many methods found inside grid api - no success at all.
I am sorry that I am unable to reproduce this in any fiddle but it would be really difficult I am afraid to match my case.
Any help would be very appreciated. Thanks
ps. it also applies to my another table where user can pin and hide columns. Pinned/hidden columns remains hidden/pinned after receiving brand new data. And it is not cool.
Once you set the data to the grid, you should be calling this -
gridApi.core.notifyDataChange( uiGridConstants.dataChange.ALL)
From the docs,
Notifies us that a data change has occurred, used in the public api
for users to tell us when they've changed data or some other event
that our watches cannot pick up
notifyDataChange tells the framework that one of the options or columnDefs has been changed.
Checkout this thread
I put a DataGridView named DataGridView2 on my form.
And I assigned dataSource property to a table in my DataSet, called "Account".
I set the default setting for dataGridView which allows user to modify it. And I put a Save button for user to save changed values from the grid to the database. However it doesn't work.
The code which I use in save button is :
Me.Validate()
Me.DataGridView2.Update()
Me.MyDBTableDataset.AcceptChanges()
when I debug it in the second line the there is proper value in :
DataGridView2.Rows(0).Cells(2).Value
which is user modified value in the grid. But when it executes AcceptChanges and finishes, no changes applied to my database.
Would be great if somebody can help.
Thanks
AcceptChanges does not do what you think it does. It doesn't save anything. It actually resets the DataSet so that it contains no changes to save. You can also get rid of that call to the grid's Update method as it is useless. All it does is redraw the grid onscreen.
What you actually need to do is to call Update on the same data adapter or table adapter that you originally called Fill on to retrieve the data in the first place. The Fill method executes the SelectCommand to retrieve data and the Update method executes the InsertCommand, UpdateCommand and DeleteCommand as needed to save changes back to the database.
That Update method will implicitly call AcceptChanges to indicate that the changes have been saved. It's rare that you should ever need to call AcceptChanges explicitly.
I am using ExtJs 4.1 grid. I have enabled the remoteSort in the store & enabled sortable property for the columns. Everytime I sort\click on column header, a call is made to the server with sort params being passed in the query string.
I want to know if there is a client side event, which gets fired before call is made to the server? I want to check certain condition and based on that I may cancel the call to the server.
Please suggest.
There is a sortChange event that gets fired whenever you sort the grid.
See the documentation here.
I have created a fiddle demo that logs to the console every time the grid is sorted. It should help.
If that doesn't work you'd likely need to attach to the stores beforeSort or the refresh event.
EDIT: As the beforeSort event is not available for ExtJs Version 4, you'd likely need to listen to the refresh event:
Refresh: Fires when the data cache has changed in a bulk manner (e.g., it has been sorted, filtered, etc.) and a widget that is using this Store as a Record cache should refresh its view.
We have a rowediting plugin on grid where a button of one trigger field changes some other values of the record (we are loading some remote data which get applied to the record). The values that get changed in background are most commonly not editable, so they are just rendered. Basically the remote loading of the data works fine, meaning the record get changed and all data get save but we have the following problems:
1.The rowediting plugin does not show the changes that where applied to the record fields
2.Setting the changes via record.set() cause the store to sync immediately and not on clicking the "save" button of the editor.
So how can we make the editor to show the changes applied in the background and how can we apply these changes in a way so that they get saved along with the other edited fields.
Thanks in advance for any help!
This should not be that complicated, you just need a reference to your active editor instance. You can then either
reload the record into the form by calling loadRecord() again. But note that this may overwrite any changes that where made by now within the editor
or (for the second way I expecting the values to be exactly the same as in the record in manner of key:value definition - short: no special mapping is required)
apply the new data to the record by calling either set (note that this will trigger sync if you have autoSync turned on) or by using Ext.apply(recinstance.data,newvalues) and editorinstance.getForm().setValues(newValues)