updateBoundData not working (if virtual mode is used?)

[YaniManParticipant]

Hi again!

I’m using jqxTreeGrid in virtual mode and updateBoundData does not seem to work. Could you please point me, how should i achieve a simple refresh of the datas? My code:

var places_source = {
		dataType: "json",
		dataFields: [
			{ name: "id", type: "number" },
			{ name: "pid", type: "number" },	// parent id
			{ name: "s", type: "" },			// serial
			{ name: "n", type: "string" },		// name
			{ name: "c", type: "date" },		// created
			{ name: "cb", type: "string" },		// created by
			{ name: "d", type: "date" },		// deleted
			{ name: "db", type: "string" },		// deleted by
			{ name: "lr", type: "date" },		// last report
			{ name: "ed", type: "bool" }
		],
		hierarchy: {
			keyDataField: { name: "id" },
			parentDataField: { name: "pid" }
		},
		id: "id",
		root: "items",
		url: "places_data.php",
		timeout: 10000,
		sortColumn: "n",
		sortDirection: "asc",
		sort: function()
		{
			$("#PlacesGrid").jqxTreeGrid("updateBoundData");
		},
		filter: function()
		{
			$("#PlacesGrid").jqxTreeGrid("updateBoundData");
		},
		updateRow: function(rowid, newdata, commit)
		{
			$.ajax({
				url: "places_update.php",
				method: "POST",
				cache: false,
				contentType: "application/json; charset=utf-8",
				data: {
					id: newdata.id,
					n: newdata.n
				},
				success: function(resp)
				{
					commit(resp.ok);
					if(resp.msg) MessageBox(resp.Ok ? "Message" : "Error", resp.msg, !resp.ok);
				},
				error: function(xhr, status, error)
				{
					commit(false);
					MessageBox("AJAX error", error, true);
				}
			});
		},
		beforeprocessing: function(data)
		{
			if(data.msg) MessageBox(data.ok ? "Message" : "Error", data.msg, !data.ok);
		}
	};
	$("#PlacesGrid").jqxTreeGrid({
		width: "100%",
		height: "100%",
		columnsResize: true,
		columnsReorder: true,
		editable: true,
		filterable: true,
		filterMode: "advanced",
		pageable: true,
		pageSize: 100,
		pageSizeOptions: [ 20, 50, 100, 200 ],
		sortable: true,
		virtualModeCreateRecords: function(rec, done)
		{
			var da = new $.jqx.dataAdapter(places_source, {
				formatData: function(data)
				{
					data.pid = rec != null ? rec.id : null;
					data.showactive = places_show_active ? 1 : 0;
					data.showdeleted = places_show_deleted ? 1 : 0;
				},
				loadComplete: function()
				{
					done(da.records);
				},
				loadError: function(xhr, status, error)
				{
					done(false);
					MessageBox("AJAX error", error, true);
				}
			});
			da.dataBind();
		},
		virtualModeRecordCreating: function(rec)
		{
			rec.leaf = rec.level != 0;
		},
		columns: [
			{ dataField: "s", text: "Serial", width: 150, pinned: true, editable: false },
			{ dataField: "n", text: "Name", width: 150, pinned: true, cellsRenderer: placeNameRenderer },
			{ dataField: "c", text: "Created", width: 100, cellsFormat: "d", editable: false },
			{ dataField: "cb", text: "Created by", width: 100, editable: false },
			{ dataField: "d", text: "Deleted", width: 100, cellsFormat: "d", editable: false },
			{ dataField: "db", text: "Deleted by", width: 100, editable: false },
			{ dataField: "lr", text: "Last report", width: 100, cellsFormat: "d", editable: false }
		]
	});

Later on a press of a button i try to refresh the data with this code
$("#PlacesGrid").jqxTreeGrid("updateBoundData");
but nothing happens. Not even an error message in the console. I tried to add every created dataAdapter in an array and call dataBind() on them, but then the grid complained about double ids. Also it would be good if the opened parents would be kept open. Please help!

[Peter StoevKeymaster]

Hi YaniMan,

“updateBoundData” rebinds the Grid using the adapter from the “source” property. There is not such in case of virtualMode which basically means that updateBoundData should do nothing in virtualMode. If you want to refresh data, use the dataAdapter of each level which you load and call its dataBind method or use the updateRow, addRow, removeRow methods of jqxTreeGrid.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[YaniManParticipant]

Hi Peter,

Thanks for the reply.
As i was saying: ” I tried to add every created dataAdapter in an array and call dataBind() on them, but then the grid complained about double ids.”
The error message is: “Uncaught Error: Please, check whether you Add Records with unique ID/Key.”
Could you please suggest how to use the dataAdapters to only update, not re-create the data?

Thanks & best regards,
Janos

[YaniManParticipant]

Hi again,

Now i clear the jqxTreeGrid, then update the main dataAdapter only, but before that, i save the scroll offsets and expanded rows’ ids. Then in the dataAdapter’s loadComplete function i go through the saved ids and issue the jqxTreeGrid’s expandRow function with them. The strange thing is that only the first previously expanded row gets expanded, however i can see in the console log that i try to expand all. Could you please help me with this?

Here’s how i save the state:

				var grid = $("#PlacesGrid");

				// save expanded rows
				var rows = grid.jqxTreeGrid("getRows");
				places_exp = [];
				for(var i = 0; i != rows.length; i++) if(rows[i].expanded) places_exp.push(rows[i].id);
				console.log("Expanded: " + places_exp);

				// save scroll position
				var scroll = grid.jqxTreeGrid("scrollOffset");
				places_sy = scroll.top;
				places_sx = scroll.left;

				// update places
				grid.jqxTreeGrid("clear");
				places_da.dataBind();

And the loadComplete function:

				loadComplete: function()
				{
					done(da.records);
					if(!rec)
					{
						if(places_exp != null)
						{
							var exp = places_exp;
							places_exp = null;
							for(var i = 0; i != exp.length; i++) { console.log("Expanding " + exp[i]); $("#PlacesGrid").jqxTreeGrid("expandRow", exp[i]); }
							$("#PlacesGrid").jqxTreeGrid("scrollOffset", places_sy, places_sx);
						}
					}
				}

[YaniManParticipant]

And again…
I’ve modified my code so it expanded the rows one step at a time only, then the next one in the dataAdapter’s loadComplete function, and now it’s working, but the scrolled out rows are missing when i issue the getRows command on the jqxTreeGrid. I think this is because they are destroyed when scrolled out, but not sure. I managed to get the datas from the dataAdapter and ask the row’s data from the jqxTreeGrid one by one, but this solution does not seem good to me. Shouldn’t there be a better way doing this?

[ae50042Participant]

Hi Peter,

I’m trying to update my jqxtreegrid using virtualmode. Basically the code I’ve done is similar to:
http://jsfiddle.net/jqwidgets/j82VQ/

My hierarchy level is 2, but I can’t no realize how can I implement the solution mentioned before:

If you want to refresh data, use the dataAdapter of each level which you load and call its dataBind method or use the updateRow, addRow, removeRow methods of jqxTreeGrid.

How can I reuse same dataAdapters if the parameters I need to pass are different(for example query parameters to pass to the server)?
The dataAdapter.bind when called, could generate duplicate ID Errors or automatically update the rows returned from the call?
Please, if you can show a modified code in which you explain how to accomplish that, will be great.

Regards,
Giorgio

[Author]

Posts