Jsgrid select with search box

[AVitse]

Hi,

I am looking for a way to implement a search box like [Chosen] or [Select2] plugins in my jsgrid select.

Do you know how to make it?

Regards

[joabac]

Hi, using Select2 the way I found was, generating a new field with id's the grid uses 2 different instances of a fiel where you can use a search box , on edit and on insert.

// define a new custom field

 var SelectAndSearch = function(config) {
                jsGrid.Field.call(this, config);
 };

 SelectAndSearch.prototype = new jsGrid.Field({

	//css: "",            // redefine general property 'css'
	align: "center",              // redefine general property 'align'

	//myCustomProperty: "foo",      // custom property

	sorter: function(date1, date2) {

	},

	itemTemplate: function(value) {
		return  value;
	},

	insertTemplate: function(value) {

		return this._insertPicker = __select_localidades;
	},

	editTemplate: function(value) {
		return this._editPicker = __select_localidades_edit;
	},

	insertValue: function() {
		return $('#selAndSearch_insert')[0][$('#selAndSearch_insert')[0].selectedIndex].text;
	},

	editValue: function() {
		 return $('#selAndSearch_edit')[0][$('#selAndSearch_edit')[0].selectedIndex].text;
	}
 });

 jsGrid.fields.selAndSearch  = SelectAndSearch;  //selAndSearch is the name of the new field

 //then to use the new field
  var un_grid_field_selAndSearch=
            { 
                name: "your_field", 
                type: "selAndSearch",
		items: [ {"your_field_id":0,"Name":"value_1"},{"your_field_id":2,"Name":"value_2"},..........,
 {"your_field_id":N,"Name":"value_N"}]
                width: 50,
                readOnly: false,
                align: "center",
                title: "Title", 
                valueType: "number", 
                valueField: "your_field_id",
                textField: "Name",
                editing:true,
                visible:true
                
            };

//at the fields property append the new field

fields: [ .... , ....  , un_grid_field_selAndSearch , ... ,{ type: "control" }]

//at the creation of the grid use the function onItemEditing jsGrid({
onItemEditing(args){                        
   		
   $('#selAndSearch_edit').select2().val(args.item.your_field_id).trigger("change");
   $('#selAndSearch_insert').select2().select2().val(args.item.your_field_id).trigger("change");
}

The most complicated part is that you should edit the library.

//and at the end of the function  _editRow:...  line 1228   at the jsgrid.js v1.5.3  

$('#selAndSearch_insert').select2();
$('#selAndSearch_edit').select2();
$('#selAndSearch_insert').select2().val(item.your_field_id).trigger("change"); 
$('#selAndSearch_edit').select2().val(item.your_field_id).trigger("change");

I hope it works for you, regards