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

3.3k Views Asked by At

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.

1

There are 1 best solutions below

6
On BEST ANSWER

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.