onRowUpdate

[Christophe Weibel]

Hello,

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

[Yavor Dashev]

Hi 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 Dashev

Smart UI Team
https://www.htmlelements.com/

</div>
</div>
 

[Christophe Weibel]

Hello 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

[admin]

Hi,

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 Stoev

Smart UI Team
https://www.htmlelements.com/

[Christophe Weibel]

Hi 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

[admin]

Hi 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 Stoev

Smart UI Team
https://www.htmlelements.com/

[Christophe Weibel]

Hi 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

[Christophe Weibel]

Hi 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

[admin]

Hi 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 Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts