Search code examples
javascriptjqueryjsgrid

How to bind dynamic select options for each row in jsGrid?


i try to bind select option dynamically from database, for example:

$("#grid").jsGrid({
    editing: true,
    autoload: true,
    paging: false,
    pageLoading: true,
    data: result,
    fields: [
        { name: "Units", type: "select", title: "Units", items: ? },
    ]
});

but What's the data format to create select with options. i try "itemTemplate" but didn't work well.


Solution

  • Build your select list before you instantiate the grid. Example:

    const units = [ { id: 0, name: "cm"}, { id: 1, name: "inch" } ];
    $("#grid").jsGrid({
    // ...
    fields: [
        { name: "Units", type: "select", title: "Units", 
          items: units, valueField: "id", textField: "name" },
     ]
    });
    

    Working demo at JSFiddle.

    If you are talking about different rows having different drop down lists for the same column, then the built-in select type may not be useful. You have to render the editTemplate yourself. A simple working example is in this JSFiddle.