Update row with server returned data

[suall936Participant]

Hi,

My grid’s data source has a “id” field which doesn’t display in the grid but used as serial number in the database. So when I update a row the “id” is sent back to server together with other fields so the server knows which record to update.

The problem is in the scenario of adding a new row. The “id” is generated by the server so the client-side doesn’t know the “id” value. Actually my “updaterow” method tests if rowdata[“id”] exists to determine it should “update” a record or “add” a new one to server. If the “add” success, the server will return the added record with “id” field and I want to update the “id” value to the rowdata so next time when user want to update this record it will have “id” value to send to server. How do I achieve this? If I use “updaterow” method, which seems to be the only way to update row data, it will trigger the server synchronization again. This is a loop.

Here is my code:

$(function(){

function updateRow(rowid, rowdata, commit) {
        if (typeof rowdata['id'] == 'undefined') {
            url = 'add/';
        }
        else {
            url = 'update/';
        };
        $.ajax({
          url: url,
          type: 'POST',
          data: rowdata,
        })
        .done(function(data){
            commit(true);
            $(".main-grid").jqxGrid('updaterow',0,data[0]);
        })
        .fail(function(jqXHR, textStatus, errorThrown){
            commit(false);
        });
    };

function toolbar(toolbar) {
        var container = $("<div style='overflow: hidden; position: relative; margin: 5px;'></div>");
        var addButton = $("<div style='float: left; margin-left: 5px;'><img style='position: relative; ' 
        container.append(addButton);
        toolbar.append(container);
        addButton.jqxButton({  width: 60, height: 20 });
        // add new row.
        addButton.click(function (event) {
            $(".main-grid").jqxGrid('addrow', null, {}, 'first');
            $(".main-grid").jqxGrid('beginrowedit',0);
        });
    };

    function getDataAdapter() {
        var source =
        {
            datatype: "json",
            datafields:
            [
                { name: 'name', type: 'string' },
                { name: 'address', type: 'string' },
                { name: 'mobile', type: 'string' },
                { name: 'id', type: 'string' }
            ],
            url: 'json/',
            updaterow: updateRow,
        };
        var dataAdapter = new $.jqx.dataAdapter(source);
        return dataAdapter;
    };
    var columns =
    [
        { text: 'Name', datafield: 'name', width: 150 },
        { text: 'Address', datafield: 'address', width: 250 },
        { text: 'Mobile', datafield: 'mobile', width: 100 },
    ];
    $(".main-grid").jqxGrid(
    {
        width: 500,
        height: 300,
        source: getDataAdapter(),
        columnsresize: true,
        columns: columns,
        editable: true,
        selectionmode: 'singlerow',
        editmode: 'selectedrow',
        showtoolbar: true,
        rendertoolbar: toolbar,
        toolbarheight: 38,
    });
});

[suall936Participant]

Just found this in the document:

// you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.

So the solution would be:

commit(true, data.id)

am I right?

[DimitarParticipant]

Hi suall936,

Yes, this is the solution you need.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[suall936Participant]

Hi Dimitar,

Thanks for your reply.

One more question please: does commit(true, db_id) only work in “addrow” callback? It seems doesn’t work in the “updaterow” callback.

Thank you.

[DimitarParticipant]

Hi suall936,

Yes, the second parameter is available to commit only in the addrow callback.

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

[Author]

Posts