jQuery UI Widgets Forums Grid Update row with server returned data

This topic contains 4 replies, has 2 voices, and was last updated by  Dimitar 8 years, 10 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Update row with server returned data #74389

    suall936
    Participant

    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,
        });
    });
    
    Update row with server returned data #74390

    suall936
    Participant

    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?

    Update row with server returned data #74408

    Dimitar
    Participant

    Hi suall936,

    Yes, this is the solution you need.

    Best Regards,
    Dimitar

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

    Update row with server returned data #74414

    suall936
    Participant

    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.

    Update row with server returned data #74431

    Dimitar
    Participant

    Hi suall936,

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

    Best Regards,
    Dimitar

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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.