Editing with virtual mode / AJAX - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

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 Posts

May 1, 2014 at 1:39 pm 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

May 1, 2014 at 6:43 pm 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/

May 2, 2014 at 3:00 pm 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

May 2, 2014 at 6:31 pm 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/

March 24, 2017 at 5:50 am 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.

March 24, 2017 at 6:39 am 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);

Author

Posts

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

You must be logged in to reply to this topic.