Jsgrid select with search box

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

tabalinas / jsgrid

Jsgrid select with search box #1420