Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #102668
    Christophe Weibel
    Participant
    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

    #102669
    Yavor Dashev
    Participant
    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>
     

    #102670
    Christophe Weibel
    Participant
    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

    #102674
    admin
    Keymaster
    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/

    #102680
    Christophe Weibel
    Participant
    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

    #102681
    admin
    Keymaster
    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/

    #102685
    Christophe Weibel
    Participant
    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

    #102755
    Christophe Weibel
    Participant
    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

    #102756
    admin
    Keymaster
    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/

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.