Dojo-DataGrid :: How to dynamically fetch values as options for a select box in Dojo DataGrid

I have a Dojo-DataGrid which is programatically populated as below :

var jsonStore = new dojo.data.ItemFileWriteStore({ url: "json/gaskets.json" });
var layout= [
                { field: "description", width: "auto", name: "Tier/Description", editable:true },
                { field: "billingMethod", width: "auto", name: "Billing Method", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ]  },
                { field: "offeringComponents", width: "auto", name: "Offering Component", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ] },
                { field: "serviceActivity", width: "auto", name: "Service Activity", editable: true,
                    type: dojox.grid.cells.Select, options: [ '0', '1' ] },
                { field: "hours", width: "auto", name: "Hours" },
                { field: "rate", width: "auto", name: "Rate <br/> (EUR)" },
                { field: "cost", width: "auto", name: "Cost <br/> (EUR)" },
                { field: "price", width: "auto", name: "Price <br/> (EUR)" },
                { field: "gvn", width: "auto", name: "Gvn" }
            ];

            grid = new dojox.grid.DataGrid({
                query: { description: '*' },
                store: jsonStore,
                structure: layout,
                rowsPerPage: 20
            }, 'gridNode');

The options for the field billingMethod (Currently defined as dojox.grid.cells.Select) are hard coded right now, but I would like to get those values dynamically from the backend as JSON. But dojox.grid.cells.Select currently(I am using Dojo 1.5) does not have a option to define a "store".

I am trying to use dijit.form.Filte开发者_C百科ringSelect, but this needs a id(of a Div) for its constructor and I cannot specify one as this select box has to go with in the grid, rather than a separate DIV.

Thanks Sandeep

Your answer works fine, the issue is that in the combo the user can select A, but once the combo lose the focus, the value 1 will be shown. Some months ago I had the same problem, and I got a solution from KGF on #dojo. The idea is to have a formatter on the cell that just creates a SPAN element, and then it invokes a query over the store to get the label of the selected element and put it on the SPAN. I modified your example to get that working.

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");

dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');

var grid;
var jsonStore;

dojo.addOnLoad(function() {

    jsonStore = new dojo.data.ItemFileWriteStore({
        data: {
            "identifier": "identify",
            "label": "description",
            "items": [
                {
                "identify": 123,
                "description": "Project Manager"},
            {
                "identify": 234,
                "description": "Developer"},
            {
                "identify": 536,
                "description": "Developer",
                "billingMethod":2}
            ]
        }
    });

    var myStore = new dojo.data.ItemFileReadStore({
        data: {
            identifier: 'value',
            label: 'name',
            items: [{
                value: 1,
                name: 'A',
                label: 'A'},
            {
                value: 2,
                name: 'B',
                label: 'B'},
            {
                value: 3,
                name: 'C',
                label: 'C'}]
        }
    });

      //[kgf] callback referenced by formatter for FilteringSelect cell
      function displayValue(nodeId, store, attr, item) {
        if (item != null) { //if it's null, it wasn't found!
          dojo.byId(nodeId).innerHTML = store.getValue(item, attr);
        }
      }

    var layout = [
        {
        field: "identify",
        width: "auto",
        name: "Id 2 Hide",
        hidden: true},
    {
        field: "description",
        width: "auto",
        name: "Tier/Description",
        editable: true},
    {
        field: 'billingMethod',
        name: 'Billing Method',
        editable: true,
        required: true,
        width: '150px',
        type: dojox.grid.cells._Widget,
        widgetClass: dijit.form.FilteringSelect,
        widgetProps: {
            store: myStore
        },
        formatter: function(data, rowIndex) { //[kgf]
            //alert("data "+data)
                var genId = 'title' + rowIndex;
            var store = this.widgetProps.store;
            var attr = "label";

            setTimeout(function() {
                store.fetchItemByIdentity({
                    identity: data,
                    onItem: dojo.partial(displayValue, genId, store, attr)
                });
                }, 50);
            //for now return a span with a predetermined id for us to populate.
            return '<span id="' + genId + '"></span>';
        }    
    }
    ];

    grid = new dojox.grid.DataGrid({
        query: {
            description: '*'
        },
        store: jsonStore,
        singleClickEdit: true,
        structure: layout,
        rowsPerPage: 20
    }, 'gridNode');

    grid.startup();

});

I was finally able to figure this out..Incase someone wants to implement same kind of stuff using DOJO Datagrid+FilteringSelect.

Sample Code

dojo.require("dojo.data.ItemFileWriteStore");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojox.grid.cells.dijit");
dojo.require("dojox.grid.DataGrid");
dojo.require("dijit.form.Select");

dojo.require('dojox.grid.cells.dijit');
dojo.require('dijit.form.FilteringSelect');

var grid;
var jsonStore;

dojo.addOnLoad(function() {

    jsonStore = new dojo.data.ItemFileWriteStore({
        data: {
            "identifier": "identify",
            "label": "description",
            "items": [
                {
                "identify": 123,
                "description": "Project Manager"},
            {
                "identify": 234,
                "description": "Developer"},
            {
                "identify": 536,
                "description": "Developer"}
            ]
        }
    });

    var myStore = new dojo.data.ItemFileReadStore({
        data: {
            identifier: 'value',
            label: 'name',
            items: [{
                value: 1,
                name: 'A',
                label: 'A'},
            {
                value: 2,
                name: 'B',
                label: 'Y'},
            {
                value: 3,
                name: 'C',
                label: 'C'}]
        }
    });


    var layout = [
        {
        field: "identify",
        width: "auto",
        name: "Id 2 Hide",
        hidden: true},
    {
        field: "description",
        width: "auto",
        name: "Tier/Description",
        editable: true},
    {
        field: 'billingMethod',
        name: 'Billing Method',
        editable: true,
        required: true,
        width: '150px',
        type: dojox.grid.cells._Widget,
        widgetClass: dijit.form.FilteringSelect,
        widgetProps: {
            store: myStore
        }}
    ];

    grid = new dojox.grid.DataGrid({
        query: {
            description: '*'
        },
        store: jsonStore,
        singleClickEdit: true,
        structure: layout,
        rowsPerPage: 20
    }, 'gridNode');

    grid.startup();

});