virtual mode with BackBone collection

[MarcParticipant]

We are evaluating using jqWidgets on a project on which we are using BackBone to implement models, collections, and views. Our server-resident data set consists of over 10,000 sites, a subset of which will be listed in the table and displayed on a map based on filtering, sorting, and page size (there is no requirement for being able to add or remove sites). We currently have a prototype working using DataTables for the grid and would like to replace it with the jqWidgets grid.

Since populating models and collections is one of BackBone’s strengths, we would like for it to be responsible for performing the actual Ajax call and for the grid to be a view which is populated when the model collection is updated. The grid’s sorting, pagination, and filtering state does need to be incorporated into the parameters sent in the Ajax call.

What we were able to do with DataTables and would like to be able to do with jqxGrid is intercept the call flow of a grid refresh, capture the sorting, paging, and filtering parameters, and trigger a fetch of the BackBone collection instead of having jqxGrid perform the Ajax call. On completion of the collection update (BackBone’s reset event) we would then want to populate the grid with the content of the collection and update the total number of records. Other actions on the page could also trigger collection updates/grid refreshes and impose additional constraints (e.g., selecting sites based on location).

My understanding from the documentation and examples is that we would need to set up the grid in virtual mode, but I am looking for some additional pointers on the callbacks and grid methods that could be used to accomplish the actions described above.

Thanks,

Marc

[Peter StoevKeymaster]

Hi Marc,

By using the Grid in virtual mode, you need to manually handle sorting and filtering. In order to achieve that, you need to define ‘sort’ and ‘filter’ callback functions in the source object.

For example:

var source =
{
	 datatype: "json",
	 datafields: [
		 { name: 'ShippedDate', type: 'date'},
		 { name: 'ShipName'},
		 { name: 'ShipAddress'},
		 { name: 'ShipCity'},
		 { name: 'ShipCountry'}
	],
	url: 'data.php',
	filter: function()
	{
		var filterInfo = $("#jqxgrid").jqxGrid('getfilterinformation');			
	},
	sort: function(datafield, sortdirectior)
	{
		$("#jqxgrid").jqxGrid('updatebounddata');
	},
	root: 'Rows',
	beforeprocessing: function(data)
	{		
		source.totalrecords = data[0].TotalRows;					
	}
};	

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarcParticipant]

Peter – thanks for your reply.

I have made progress today. I am getting the table to populate with the fetched backbone data and sorting appears to work. I am having a problem with pagination though. When I advance to the second page, the page number and record position update correctly (I have ten rows per page and 16 rows total in the database, and the information is updated to indicate page 2, 11-16 of 16) and the grid is limited to six rows (in accordance with the second page having only six rows).

However, no data shows up in the grid. However, if I then change the page again, the data appears momentarily if I break in the JavaScript debugger before fetching and updating the grid with the new data (the data seems to appear in conjunction with the pagechanged event as the page number and record position are updated at this point to indicate page 1, 1-10 of 16). When the operation to return to page 1 completes, the data for page 1 appears in the grid as expected.

I can change the page size to 5 and see the same behavior, with page 1 populated with data and pages 2-4 blank until I initiate a transition to another page.

Here is what I am currently doing:

this.source = {
			records: [],
			datatype: "array",
			sort: function(sortcolumn, ascending){
				var direction = ascending ? "asc" : "desc";
				console.log("sort by " + sortcolumn + " " + direction);
				view.setQuery({sortby: sortcolumn, sortdir: direction});
			},
			filter: function(){
				view.setQuery();
			}
		};
                $(this.el).jqxGrid({
			virtualmode: true,
			width: 1100,
			height: 305,
			source: this.source,
			columns: [
				{text: "Service", datafield: 'service', width: 100},
				{text: "Name", datafield: 'name', width: 500},
				...
			],
			sortable: true,
			pageable: true,
			filterable: true,
			columnsresize: true,
			autoheight: true
		});
		// paging event handler
		$(this.el).bind("pagechanged", function(event){
			var args = event.args;
			console.log("page changed: " + args.pagenum);
			view.setQuery({pagenum: args.pagenum});
		});
		// page size change event handler
		$(this.el).bind("pagesizechanged", function(event){
			var pagesize = event.args.pagesize;
			console.log("page size changed: " + pagesize);
			view.setQuery({pagesize: pagesize});
                 });

	render: function(){
		var data = [];
		this.collection.each(function(site){
			data.push(site.attributes);
		});
		this.source.records = data;
		this.source.totalrecords = this.collection.meta('filteredSize');
		$(this.el).jqxGrid('updatebounddata');
		$(this.el).jqxGrid('render');
	}

view.setQuery() sets the query parameters and triggers a fetch() on the BackBone collection which uses the query parameters to obtain the matching data from the server and populate the BackBone collection with the new data. The render function is bound to the reset event on the collection which is triggered when the collection has been re-populated. I haven’t implemented anything with regards to filtering at this point.

[Peter StoevKeymaster]

Hi Marc,

In your code, you pass directly the source object. However, it is more appropriate to build a jqxDataAdapter from the source object and pass the data adapter as data source. In addition, when the Grid is created in virtualmode, you need to set the ‘rendergridrows’ callback function which returns a collection of rows to be displayed – usually the rows loaded into the jqxDataAdapter plug-in.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[MarcParticipant]

Peter – thanks for your quick response!

I am a bit confused regarding the various callbacks and methods, when they occur, and exactly what role they play in populating the grid content. I’m also not entirely clear on how data source and jqxDataAdapter relate. From the documentation, it appears that jqxDataAdapter is used to configure an Ajax data request – since BackBone is performing the Ajax request in my case, I’m not sure what the purpose of using a jqxDataAdapter would be.

I did rework my code to use a jqxDataAdapter and a rendergridrows callback function which returns the adapter.records value. I am seeing the same results as before (first page populates as expected, second page contains six blank rows, returning to the first page populates as expected). Here are the changed versions of the grid construction and the render function (the source object and paging callbacks are unchanged from before):

		this.adapter = new $.jqx.dataAdapter(this.source, {});
		
		// change table element into a DataTable
		$(this.el).jqxGrid({
			virtualmode: true,
			width: 1100,
			height: 305,
			source: this.adapter,
			columns: [
				{text: "Service", datafield: 'service', width: 100},
				{text: "Name", datafield: 'name', width: 500},
				...
			],
			sortable: true,
			pageable: true,
			filterable: true,
			columnsresize: true,
			autoheight: true,
			rendergridrows: function(){
				return view.adapter.records;
			}
		});

	render: function(){
		var data = [];
		this.collection.each(function(site){
			data.push(site.attributes);
		});
		this.source.localdata = data;
		this.adapter.dataBind();
		this.source.totalrecords = this.collection.meta('filteredSize');
		$(this.el).jqxGrid('updatebounddata');
	}

Recall from before that render() triggers when the model has been updated by a BackBone Ajax call to the server.

[MarcParticipant]

It looks like I have gotten past the issue of the blank rows on pages other than the first. I changed the datatype in the source to ‘json’. For some reason, that seems to have made a difference.

Marc

[Author]

Posts