jQuery ComboGrid Plugin

Overview

• Development approach and way forward

Combogrid, like autocomplete, when added to an input field, enables users to quickly find and select from a pre-populated list of values as they type, but in a tabular and paginated manner. Combogrid provides keyboard navigation support for selecting an item.
And It's ThemeRoller-ready.

About ComboGrid

Since combogrid is a solution to manage big data set, the source is only reached dynamically through Ajax callbacks specifying a URL (no array source).

It can be integrated with any server-side technology.

The Combogrid plugin expects a string to point to a URL resource that will return JSON data. It can be on the same host or on a different one (must set JSONP datatype).

The request parameter "searchTerm" gets added to that URL. The data itself can be in the same format as the local data described above.

In addition to "searchTerm" other request parameters are

• page: the requested page (initially set to 1)
• rows: the number of rows per page (default 10)
• sidx: the initial sorting name
• sord: the initial sorting order

The minimum required settigs by ComboGrid are "url", "colModel" and the function on select an item

<script>
$(document).ready(function(){
$( "#project" ).combogrid({
url: '/datasource-url',
colModel: [{'columnName':'value','width':'value','label':'value'}, ...],
select: function( event, ui ) {
$( "#project" ).val( ui.item.name );
return false;
}
});
});
</script>
<input id="project"/>

Development approach and way forward

JQuery Combogrid Project has been designed starting from autocomplete.
The main idea was to realize a paginated autocomplete plugin with keyboard shortcuts.
The template was took by JQGrid (only that and the colModel) because it was recognized as one of the favourite by 'JQuery UI Grid Project', who is planning the official UI Grid.
The template will change when the UI Grid will released together with the template's standard to adopt for paginated grids (that will include using an html table instead of a list).
The same for the colModel.
In my opinion it's better not reinventing the wheel...
For suggestions, tips or ideas (even if you're not agree) please email me!