jQuery UI Widgets Forums TreeGrid treegrid server side editing

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 7 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • treegrid server side editing #80956

    rio
    Participant

    hi
    please look at the code blew:

    $(document).ready(function () {
            var newRowID = null;
            var theme = "";
            var data = {};
    
       
           
            // prepare the data
            var source =
            {
                dataType: "json",
                type: 'POST',
                dataFields: [
                    { name: "id", type: "number" },
                    { name: "Name", type: "string" },
                    { name: "ParentId", type: "number" },
                ],
                hierarchy:
                {
                    keyDataField: { name: 'id' },
                    parentDataField: { name: 'ParentId' }
                },
    
                id: 'id',
                url: '/Admin/GetGroups',
    
                addRow: function (rowID,rowData, position, parentID, commit) {
    
                    newRowID = rowID;
                    var data =
    "update=true&Name=" + rowData.Name;
                    data = data + "&id=" + rowData.id + "&ParentId" + rowData.parentID;
    
                    $.ajax({
                        cache: false,
                        dataType: 'json',
                        url: '/Admin/AddGroup',
                        data:data,
                        type: "POST",
                        success: function (data, status, xhr) {
                            // insert command is executed.
                            commit(true);
                            alert("success add" + "" + "data:" + data);
                            alert("parentID: " + parentID + " rowID: " + rowID);
    
                        },
                        error: function (jqXHR, textStatus, errorThrown) {
                            alert(errorThrown);
                            commit(false);
                        }
                    });
                },
                updateRow: function (rowID, rowData, commit){
    
                    setTimeout(function () { commit(true); alert("Called"); }, 1000);
    
                    var data = "update=true&Name=" + rowData.Name + "&ParentId=" + rowData.ParentIdValue;
                    data = data + "&id=" + rowData.id;
                    
                     
                    $.ajax({
                        dataType: 'json',
                        url: '/Admin/UpdateGroup',
                        type: 'POST',
                        data: data,
    
                        success: function (data, status, xhr) {
                            alert("update success");
                            alert("data:"+data);
                            commit(true);
                        },
                        error: function (errorThrown) {
                            alert(errorThrown);
                            commit(false);
                        }
                    });
    
        },
                    
                    deleteRow: function (rowID, commit) {
                        // synchronize with the server - send delete command
                        // call commit with parameter true if the synchronization with the server is successful 
                        // and with parameter false if the synchronization failed.
                        console.log(rowID);
                        commit(true);
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    loadComplete: function () {
                       //  data is loaded.
                    }
                });
        $("#treeGrid").jqxTreeGrid(
                {
    .
    .
    .
    .
    .
                        addButton.click(function (event) {
                            if (!addButton.jqxButton('disabled')) {
                                $("#treeGrid").jqxTreeGrid('expandRow', rowKey);
                                // add new empty row.
                             
                                $("#treeGrid").jqxTreeGrid('addRow',null, {}, 'first', rowKey);
                                // select the first row and clear the selection.
                                $("#treeGrid").jqxTreeGrid('clearSelection');
                                alert("newRowID: " + newRowID);
                                $("#treeGrid").jqxTreeGrid('selectRow', newRowID);
                                // edit the new row.
                                $("#treeGrid").jqxTreeGrid('beginRowEdit', newRowID);
    
                                updateButtons('add');
                            }
                        });
    
                        cancelButton.click(function (event) {
                            if (!cancelButton.jqxButton('disabled')) {
                                // cancel changes.
                                $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey, true);
                            }
                        });
    
                        updateButton.click(function (event) {
                            if (!updateButton.jqxButton('disabled')) {
                                // save changes.
                                $("#treeGrid").jqxTreeGrid('endRowEdit', rowKey, false);
                            }
                        });
    
                        editButton.click(function () {
                            if (!editButton.jqxButton('disabled')) {
                                var ParentIdValue = $("#treeGrid").jqxTreeGrid('getCellValue', rowKey, 'ParentId');
                                alert("parentid:" + ParentIdValue);
                                $("#treeGrid").jqxTreeGrid('beginRowEdit', rowKey);
                                updateButtons('edit');
    
                            }
                        });
    .
    .
    .
       deleteButton.click(function () {
                            if (!deleteButton.jqxButton('disabled')) {
                                var selection = $("#treeGrid").jqxTreeGrid('getSelection');
                                if (selection.length > 1) {
                                    var keys = new Array();
                                    for (var i = 0; i < selection.length; i++) {
                                        keys.push($("#treeGrid").jqxTreeGrid('getKey', selection[i]));
                                    }
                                    $("#treeGrid").jqxTreeGrid('deleteRow', keys);
                                }
                                else {
                                    $("#treeGrid").jqxTreeGrid('deleteRow', rowKey);
                                }
                                updateButtons('delete');
    
                            }
                        });
                    },
                    columns: [
                      { text: 'GroupName', dataField: "Name", align: 'right', width: '350' },
                    ],
    
                });
            
        
        });

    for example when i edit one row and click on update button in toolbar ajax acting right and show’s me “update success” message in ajax success function
    but data does’t transfer to server and editing action not working.
    but when i remove ParentId from ajax data property:

    
        updateRow: function (rowID, rowData, commit){
    
                    setTimeout(function () { commit(true); alert("Called"); }, 1000);
    
                    var data = "update=true&Name=" + rowData.Name;
                    data = data + "&id=" + rowData.id;
                    
                     
                    $.ajax({
                        dataType: 'json',
                        url: '/Admin/UpdateGroup',
                        type: 'POST',
                        data: data,
    
                        success: function (data, status, xhr) {
                            alert("update success");
                            alert("data:"+data);
                            commit(true);
                        },
                        error: function (errorThrown) {
                            alert(errorThrown);
                            commit(false);
                        }
                    });
    
        },
    

    edit action works but parentid changes to null.
    what is problem?

    Regards,
    Rio.

    • This topic was modified 7 years, 4 months ago by  rio.
    • This topic was modified 7 years, 4 months ago by  rio.
    treegrid server side editing #80978

    Peter Stoev
    Keymaster

    Hi Rio,

    First, remove setTimeout(function () { commit(true); alert(“Called”); }, 1000); from the updateRow call. Then, for the editing part, I suggest you to check your server code if the AJAX call is successful. If the AJAX call is not successful, then debug this part of the code. The client-server part of the editing depends only on your custom code and as we don’t have access to your pc & server, we would be able to help only with advices.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.