ComboGrid

Extend from $.fn.combo.defaults and $.fn.datagrid.defaults. Override defaults with $.fn.combogrid.defaults.

The combogrid combines an editable text box with drop-down datagrid panel, from which enables users to quickly find and select. The combogrid provides keyboard navigation support for selecting an item.

Dependencies

  • combo
  • datagrid

Usage Example

Create ComboGrid

1. Create a combogrid from markup.

2. The combogrid can be created from existing <select> or <input> element using javascript.

Autocomplete Functionality

Let's add advanced auto-complete functionality to the combogrid. The drop-down datagrid will display the possible results according to the user types.

On server side, the 'q' parameter must be retrieve first. The user can query the database and then return an sql result in JSON format to the browser.

get_data.php:

Properties

The properties extend from combo and datagrid, below is the added properties for combogrid.

Name Type Description Default
loadMsg string The message displayed when datagrid load remote data. null
idField string The id field name. null
textField string The text field to be displayed in textbox. null
mode string Defines how to load datagrid data when text changed. Set to 'remote' if the combogrid loads from server. When set to 'remote' mode, what the user types will be sent as the http request parameter named 'q' to server to retrieve the new data. local
filter function(q, row) Defines how to select the local data when 'mode' is set to 'local'. Return true to select the row.

Code example:

$('#cc').combogrid({
	filter: function(q, row){
		var opts = $(this).combogrid('options');
		return row[opts.textField].indexOf(q) == 0;
	}
});

Events

The events extend from combo and datagrid.

Methods

The methods extend from combo, below is the added or overridden methods for combogrid.

Name Parameter Description
options none Return the options object.
grid none Return the datagrid object. The example below shows how to get the selected row:
var g = $('#cc').combogrid('grid');	// get datagrid object
var r = g.datagrid('getSelected');	// get the selected row
alert(r.name);
setValue value Set the component value.

Code example:

$('#cc').combogrid('setValue', '002');
$('#cc').combogrid('setValue', {id:'003',name:'name003'});
setValues values Set the component value array.

Code example:

$('#cc').combogrid('setValues', ['001','007']);
$('#cc').combogrid('setValues', ['001','007',{id:'008',name:'name008'}]);
clear none Clear the component value.