How to return select options as object from buildSelect

Question

According to

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:search_config

value property can be object:

If set as object it should be defined as pair value:name - editoptions:{value:{1:'One',2:'Two'}}

Json API returns JSON object

{"total":2,"page":1,"rows":[
     {"Id":"L-10020","Liik":"10020","Artlnimi":"C vesinikud","Grupp":"L"},
     {"Id":"L-10072","Liik":"10072","Artlnimi":"C D-Perm","Grupp":"L"}
     ... ] }

Artlnimi property values should used as select options in search. I tried to use it to create select list using free jqgrid 4.13.6

$grid.jqGrid('setColProp', 'Artliik_artlnimi', {
  searchoptions : {
  dataUrl: 'API/ArtliikL',
  buildSelect: function(response){
    var tulem={ '':'All' }, res=JSON.parse(response);
    $.each(res.rows, function(i, item) {
        tulem[item.Artlnimi]=item.Artlnimi;
        }
      );
    return tulem;
    },
  sopt: ['eq']
  },
  stype:"select"
});

After that error

Uncaught TypeError: Cannot read property 'multiple' of undefined
    at Object.success (jquery.jqgrid.src.js:9680)
    at fire (jquery-1.12.4.js:3232)
    at Object.fireWith [as resolveWith] (jquery-1.12.4.js:3362)
    at done (jquery-1.12.4.js:9840)
    at XMLHttpRequest.callback (jquery-1.12.4.js:10311)

occurs in free jqgrid 4.13.6 source code at line 9680 which contains:

 if ($select[0].multiple && $select.find("option[selected]").length === 0 && $select[0].selectedIndex !== -1) {

How to fix this so that search element shows data from object returned from buildSelect. Ifbild select returns string containing select element html it works.

Answer 1

The URL dataUrl should return HTML fragment with <select> and all options. The callback buildSelect allows to use dataUrl, which returns the information about the options in any other format, but buildSelect have to covert the response of dataUrl to <select> and all options. You can find the following description of buildSelect callback in the old documentation of editoptions.buildSelect:

This option is relevant only if the dataUrl parameter is set. When the server response can not build the select element, you can use your own function to build the select. The function should return a string containing the select and options value(s) as described in dataUrl option. Parameter passed to this function is the server response

The documentation of searchoptions.buildSelect (see here) provides practically the same information.

In other words, you try to use buildSelect in the wrong way. The string, which returns buildSelect have to contain HTML fragment of <select> and not an as object. Alternatively free jqGrid allows that buildSelect returns DOM element of <select> with all children options or jQuery wrapper of <select>

You can fix your code to something like

buildSelect: function (response) {
    var tulem = "<select><option value=''>All</option>";

    $.each(JSON.parse(response).rows, function (i, item) {
        var v = item.Artlnimi;
        // the simplified form of the next statement would be
        //     tulem += "<option value='" + v + "'>" + v + "</option>";
        // but one have to encode/escape the text in more common case.
        tulem += "<option value='" +
            String(v).replace(/\'/g, "&#39;") + "'>" +
            $.jgrid.htmlEncode(v) + "</option>";
    });

    return tulem + "</select>";
}

or like

buildSelect: function (response) {
    var $tulem = $("<select><option value=''>All</option></select>");

    $.each(JSON.parse(response).rows, function (i, item) {
        $("<option></option>", { value: item.Artlnimi })
            .text(item.Artlnimi)
            .appendTo($tulem);
    });

    return $tulem;
}