Search code examples
jqgridbootstrap-typeahead

jqgrid typeahead with key value


I am using the twitter bootstrap typeahead and Guriddo jqgrid Version 5.2.1 form editing. I'd prefer to do this with key value pair rather then just value. All the code below works as far as it goes, the only thing missing is when the edit form opens for an existing record it shows the key (a number) instead of the value (the name of a company). The grid columns are all created on the fly. I think if inside editoptions, if I could specify a value: of the name of the company, it might be a good hack-around, but that doesn't work.

label: svf.fieldLabel,
name: svf.tf[0].nativename,
width: 150,
editable: true,
edittype: "text",
formatter: 'select',
formatoptions:
{
    value: getEditOptionsValue(svf.relatedItemId)
},

editoptions: {
dataInit: function (element) {
    var data = JSON.parse(getSelects(svf.relatedItemId));
    $(element).attr("autocomplete", "off").typeahead({
        appendTo: "body",
        dataType: "json",
        displayText: function (item) { return item.name; },
        source: function (query, process) {
            return process(data);
        }
    });
    } //end datainit
}//end edit options

Solution

  • In order to solve your problem you will need to use a custom unformat function. The predefined unformat function return the key and not the value. More you can see in our documentation here

    You can use the following code:

    label: svf.fieldLabel, name: svf.tf[0].nativename, width: 150, editable: true, edittype: "text", formatter: 'select', unformat : function(value, options, cellObject) { return value; },