CODEWITHSUNDEEP
jqueryjqgrid
techlead
techlead

Reputation: 779

JqGrid - Merging the Grid Column Model javascript & JSON response

Is it possible to merge the Column Model javascript file and the raw data JSON response into 1 file?

Oleg - here you go:

JSON - codes.json

{
    "codes":[
        {
            "code" : "WFH - Work From Home"
        },  
        {
            "code" : "OST - Onsite"
        }
]}

dataUrl and buildSelect - this is drawing up an empty select box

    editoptions: {
        dataUrl: 'http://localhost/json/codes.json',
        type: "GET",
        dataType: "json",
        contentType: "application/x-javascript; charset=utf-8",
        async: "true",
        buildSelect: function(response){
            var s = '<select>';
            $.each(response.codes, function(index, codes){
                s.append("<option>"+codes.code+"</option>");
            });
            return s + '</select>';
        }
    }},

Upvotes: 1

Views: 2715

Answers (1)

Oleg
Oleg

Reputation: 221997

You should modify the code of buildSelect to about the following

buildSelect: function (data) {
    var s = '<select>', codes, i, l, code, prop;
    if (data && data.codes) {
        codes = data.codes;
        for (i = 0, l = codes.length; i < l; i++) {
            code = codes[i];
            // enumerate properties of code object
            for (prop in code) {
                if (code.hasOwnProperty(prop)) {
                    s += '<option value="' + prop + '">' + code[prop] + '</option>';
                    break; // we need only the first property
                }
            }
        }
    }
    return s + "</select>";
}

Additionally you should use ajaxSelectOptions to set any options of the corresponding $.ajax request which you jqGrid if it get data from from the server. In any way you should use relative URLs like json/codes.json or /json/codes.json instead of http://localhost/json/codes.json.

An example of ajaxSelectOptions parameter could be the following

ajaxSelectOptions: {
    dataType: 'json',
    cache: false
}

If contentType: "application/x-javascript; charset=utf-8" is really required you can add it as additional property of ajaxSelectOptions.

How you can see from the demo the selects will be produced correct from your JSON data by above buildSelect function. The select looks like

<select role="select" id="2_code" name="code">
    <option value="code1" role="option">WFH - Work From Home</option>
    <option value="code2" role="option">OST - Onsite</option>
</select>

Upvotes: 1

Related Questions