[MarcParticipant]

Peter – thanks for the quick workaround!

Marc

[MarcParticipant]

Excellent! Thanks for the quick update.

Marc

[MarcParticipant]

Excellent! Thanks for the quick response.

Is this a new feature (version 2.4+)? Is it the remoteAutoComplete attribute that enables the functionality (I don’t see that attribute documented on the API page for the ComboBox)? Does that cause the search callback to execute after each character? It looks like it initially loads the first n entries and then updates from the server once two characters have been entered, is that correct?

Marc

[MarcParticipant]

This functionality (selecting from a large data set using a combo box) is important to us as well. I noticed that your ListBox demo page now features a “Remote Search” option, which appears to be dynamically filtering in this way (the explanation is not clear about what exactly is happening). The code appears to bind to the keydown event and refresh the data source by rebinding. Is that correct, and if so, is it possible to do something similar with a combo box?

Thanks,

Marc

[MarcParticipant]

Peter – thanks for the quick fix. I verified that it works for the test case I sent, but unfortunately I am still getting the same error in my actual application code. If I can reduce it to another example, where on the New Topic form do I find the Format HTML Code button (I see the button on this Reply form, but I don’t see the button on the form used to create the topic, which has a different toolbar).

[MarcParticipant]

Thanks Peter, I don’t think that will help in our situation. We have markers on a map indicating the locations of the same sites that are in the table. We want to highlight the map location when we hover over a table row and vice versa. Thus, we need to know when a row is being hovered over and be able to change the style of the row to the hover style. In our DataTables implementation, we were able to directly obtain the row’s DOM element and handle the hover event/set the CSS style using it. It sounds like there is not a way to do the equivalent with the grid widget?

Marc

[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

[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]

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.

[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.

[Author]

Posts