jQuery UI Widgets Forums TreeGrid Editing with virtual mode / AJAX

This topic contains 5 replies, has 3 voices, and was last updated by  axexuxizozaz 3 years, 11 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • Editing with virtual mode / AJAX #53828

    Alloc
    Participant

    Hi there,

    I’m trying to use the TreeGrid in virtual mode, retrieving child nodes on expansion of their parents from the server. Works fine so far but now I wanted to add inline editing. According to the example [1] I just need to add a function as “updateRow” element to the source object. This works fine as long as I use normal mode, i.e.

    	var source =
    	{
    		dataType: "json",
    		...
    		updateRow: function (rowID, rowData, commit) {
    			...
    		}
    	};
    
    	$("#treeGrid").jqxTreeGrid({ source: new $.jqx.dataAdapter(source, {}), ... });

    If I use the virtual mode like the following the function assigned to updateRow is never called:

    	var source =
    	{
    		dataType: "json",
    		...
    		updateRow: function (rowID, rowData, commit) {
    			...
    		}
    	};
    
    	$("#treeGrid").jqxTreeGrid({
    		virtualModeCreateRecords: function (expandedRecord, done) {
    			var dataAdapter = new $.jqx.dataAdapter(source, {
    				formatData: function (data) {
    					if (expandedRecord !== null) {
    						data.id = expandedRecord.id;
    					}
    					return data;
    				},
    				loadComplete: function() {
    					done(dataAdapter.records);
    				},
    				loadError: function (xhr, status, error) {
    					done(false);
    					throw new Error("Error: " + error.toString());
    				}
    			});   
    			dataAdapter.dataBind();
    		},
    		...
    	});

    Of course I can bind a listener to the cellValueChanged event but I would assume it should work with the built in update mechanism too. So am I doing something wrong or is this simply not supported?

    Regards,
    Chris

    [1]: TreeGrid: Editing – Inline Row

    Editing with virtual mode / AJAX #53843

    Peter Stoev
    Keymaster

    Hi Chris,

    This happens due to the reason that the widget is not actually bound to a dataAdapter and its source property is not set. For example, if you set the source property to the source object, updateRow would be called.

    Example:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <title id="Description">In virtual mode, the Tree Grid is created on demand. In this case, Child records are created and initialized when the parent record is expanded. For example when you expand a record, jqxTreeGrid makes an Ajax request to http://services.odata.org. The request contains the expanded record's EmployeeID and as a result we get all sub records whose "ReportsTo" data field match the "EmployeeID" data field. </title>
        <meta name="description" content="Load nodes on demand through Ajax - JavaScript Tree Grid Demo | jQWidgets">     
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="../../scripts/jquery-1.10.1.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script> 
        <script type="text/javascript" src="../../jqwidgets/jqxtreegrid.js"></script> 
        <script type="text/javascript" src="../../scripts/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                // prepare the data
                var source =
                {
                    dataType: "json",
                    dataFields: [
                        { name: 'EmployeeID', type: 'number' },
                        { name: 'ReportsTo', type: 'number' },
                        { name: 'FirstName', type: 'string' },
                        { name: 'LastName', type: 'string' },
                        { name: 'Country', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'Address', type: 'string' },
                        { name: 'Title', type: 'string' },
                        { name: 'HireDate', type: 'date' },
                        { name: 'BirthDate', type: 'date' }
                    ],
                    hierarchy:
                    {
                        keyDataField: { name: 'EmployeeID' },
                        parentDataField: { name: 'ReportsTo' }
                    },
                    updateRow: function(rowId, rowData, commit)
                    {
    
                    },
                    id: 'EmployeeID',
                    root: 'value',
                    url: "http://services.odata.org/V3/Northwind/Northwind.svc/Employees?$format=json&$callback=?"
                };
    
                // create Tree Grid
                $("#treeGrid").jqxTreeGrid(
                {
                    width: 850,
                    editable: true,
                    source: source,
                    virtualModeCreateRecords: function (expandedRecord, done) {
                        var dataAdapter = new $.jqx.dataAdapter(source,
                            {
                                formatData: function (data) {
                                    if (expandedRecord == null) {
                                        data.$filter = "(ReportsTo eq null)"
                                    }
                                    else {
                                        data.$filter = "(ReportsTo eq " + expandedRecord.EmployeeID + ")"
                                    }
                                    return data;
                                },
                                loadComplete: function()
                                {
                                    done(dataAdapter.records);
                                },
                                loadError: function (xhr, status, error) {
                                    done(false);
                                    throw new Error("http://services.odata.org: " + error.toString());
                                }
                            }
                        );   
                        dataAdapter.dataBind();
                    },
                    virtualModeRecordCreating: function (record) {
                        // record is creating.
                    },
                    columns: [
                      { text: 'FirstName', columnGroup: 'Name', dataField: 'FirstName', width: 200 },
                      { text: 'LastName', columnGroup: 'Name', dataField: 'LastName', width: 150 },
                      { text: 'Title', dataField: 'Title', width: 200 },
                      { text: 'Birth Date', dataField: 'BirthDate', cellsFormat: 'd' }
                    ]
                });
            });
        </script>
    </head>
    <body class='default'>
        <h3 style="font-size: 16px; font-family: Verdana;">Data Source: "http://services.odata.org"</h3>
        <div id="treeGrid"></div>
    </body>
    </html>

    Best Regards,
    Peter Stoev

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

    Editing with virtual mode / AJAX #53879

    Alloc
    Participant

    Hi Peter,

    if I add “source:source” to the TreeGrid settings object it does only bind once at load, i.e. loads only the root nodes. It doesn’t even show the expand arrows as it does not know of the possible child nodes. You can find a full example of what I currently have at https://svnadmin.illy.bz/repos/chrilly.

    Regards,
    Chris

    Editing with virtual mode / AJAX #53881

    Peter Stoev
    Keymaster

    Hi Chris,

    If that does not work for you, then you may use the “cellValueChanged” event instead.

    Best Regards,
    Peter Stoev

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

    Editing with virtual mode / AJAX #92435

    axexuxizozaz
    Participant

    Hi,
    i had same problem “It doesn’t even show the expand arrows as it does not know of the possible child nodes” and found that with set

    source: source,

    widget sent first initiate request with parameters

    $format:json
    callback:jQuery111109978735867177602_1490329251207
    filterslength:0
    pagenum:0
    pagesize:10
    _:1490329251446

    which are not contained in the usual query

    $format:json
    callback:jQuery111109978735867177602_1490329251208
    $filter:(ReportsTo eq null)
    _:1490329310580

    It probably does not handle it as usual, but widget stop working with virtual mode

    so i response that first request is wrong with HttpResponse(status=500)
    and widget send next request which corresponds usual for virtual mode

    it solve problem.

    Editing with virtual mode / AJAX #92437

    axexuxizozaz
    Participant

    and so on if you add row, you must get you own rowID through ajax not in source, but in function toolbar on event addButton.click
    before invoke $(“#treeGrid”).jqxTreeGrid(‘addRow’, null, {}, ‘first’, rowKey);

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

You must be logged in to reply to this topic.