JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › Data Grid › onRowUpdate
Tagged: datagrid on row update, grid
- This topic has 8 replies, 3 voices, and was last updated 2 years, 7 months ago by
admin.
-
AuthorPosts
-
December 20, 2021 at 1:33 pm #102668
Christophe Weibel
ParticipantHello,
How do you get the new value in the cell, and update to ajax, the method below I get only the old data and not what was changed in the cell.
onRowUpdate(index,row,values){
const field6 = row.data.field6, field7 = row.data.field7,field8 = row.data.field8,field9 = row.data.field9;
const url=”?id=”+id+”&field6=”+field6+”&field7=”+field7+”&field8=”+field8+”&field9=”+field9;
$.ajax({
type: “POST”,
url: “data/save_update_datatable.php”+url,
processData: false,
contentType: false,
dataType: “json”,})
.done(function( msg ) {
alert( “Data Saved: ” + msg );
});
}thanks for your help
Best regards
Christophe
December 20, 2021 at 3:56 pm #102669Yavor Dashev
ParticipantHi Christophe Weibel,
If you want to get the new value in the cells of the row you will have to use
onRowUpdated
method.Quick code snippet:
onRowUpdated: (index, stamp, rowNewValue) => { <div> <div> console.log(rowNewValue)</div> <div> },
</div>
<div>Let me know what you think!
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor DashevSmart UI Team
https://www.htmlelements.com/</div>
</div>
December 20, 2021 at 5:09 pm #102670Christophe Weibel
ParticipantHello Yavor,
I tried this function, but nothing append, I’m going through the function only when I use onRowUpdate, do you have an example in javascript.
Thanks for your help
Christophe
December 21, 2021 at 9:37 am #102674admin
KeymasterHi,
onRowUpdate has more parameters. The new values object are the 4th param. In addition, the last param should be added, too as it is the confirm callback which should be called to finish the editing process and confirm it.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/December 22, 2021 at 6:37 am #102680Christophe Weibel
ParticipantHi Peter,
Thanks for your update, it’s working I missed the 4th parameter, I can update the table with jquery ajax, but the table is refreshing continuously.
How do you confirm the end of editing, I tried several things but nothing is working
Thanks
Best regards
Christophe
December 22, 2021 at 7:41 am #102681admin
KeymasterHi Christophe,
The last param – 5th is a callback function. If you name it “confirm”, then you can use confirm(true) to commit the changes or commit(false) to cancel the changes.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/December 23, 2021 at 8:30 am #102685Christophe Weibel
ParticipantHi Peter,
Thanks a lot, it’s working, last question, how do refresh the page after saving the editing, and using the data with php.
I used grid.refresh(); but it’s not working
dataSource: new window.Smart.DataAdapter({
dataSource: ‘data/test.php’,
dataSourceType: ‘json’,Thanks
Best regards
Christophe
January 6, 2022 at 2:07 pm #102755Christophe Weibel
ParticipantHi Peter,
I tried several options to refresh the grid after I update the row ( grid.refresh(), grid.refreshView(), grid.render()).
But nothing is working, he keep the old data, when I refresh the complet page the value change because I reload the dataSource.
Thanks for your help
Christophe
January 6, 2022 at 2:26 pm #102756admin
KeymasterHi Christophe Weibel,
The methods which you used does not refresh the data source. They refresh the HTML Elements used in the grid i.e re-create them, update the layout, etc.
Here is an example which shows how to use the onRowUpdate
window.Smart('#grid', class { get properties() { return { dataSource: new window.Smart.DataAdapter({ dataSource: window.generateData(100), dataFields: [ 'id: number', 'firstName: string', 'lastName: string', 'productName: string', 'available: bool', 'quantity: number', 'price: number', 'total: number' ] }), editing: { enabled: true, mode: 'row' }, onRowUpdate(index, row, oldValue, value, confirm) { if (value.firstName === 'Test') { confirm(true); } else { confirm(false); } }, selection: { enabled: true, allowCellSelection: true, allowRowHeaderSelection: true, allowColumnHeaderSelection: true, mode: 'extended' }, columns: [ { label: 'First Name', dataField: 'firstName' }, { label: 'Last Name', dataField: 'lastName' }, { label: 'Product', dataField: 'productName' }, { label: 'Available', dataField: 'available', template: 'checkBox', editor: 'checkBox' }, { label: 'Quantity', dataField: 'quantity', editor: 'numberInput' }, { label: 'Unit Price', dataField: 'price', editor: 'numberInput', cellsFormat: 'c2' } ] }; } });
In the above code, when the firstName column’s value is ‘Test’, changes are saved, otherwise they are not.
Best regards,
Peter StoevSmart UI Team
https://www.htmlelements.com/ -
AuthorPosts
- You must be logged in to reply to this topic.