onRowUpdate

[Christophe Weibel]

Up

0

Down

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]

Up

0

Down

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]

Up

0

Down

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]

Up

0

Down

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]

Up

0

Down

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]

Up

0

Down

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]

Up

0

Down

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]

Up

0

Down

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]

Up

0

Down

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