CODEWITHSUNDEEP
htmldojodojox.grid
Jan Cvek
Jan Cvek

Reputation: 1

Set combobox in dojo datagrid cell depands on value type

Can anybody help me how to set Combobox in DataGrid (dojox/grid) cells programmatically for each cell in column separately?

Structure parameter: cellType does its job, but all cells in column inherit defined type.

With formatter function we can return Combobox object but it has different behaviour then Combobox inserted with cellType.

I'm thinking also about onStartEdit function but I do not have idea how to implement that.

What I want to achieve is that if in cell is value which is text then I want to show combobox with all possibilities. In case of value as a number than I don't want to show combobox at all.

Sample code: (Dojo version 1.9.11)

 require([
                        "dojo/data/ItemFileReadStore",
                        "dojo/store/Memory",
                        "dojox/grid/DataGrid",
                        "dojo/data/ObjectStore",
                        "dojo/dom",
                        "dojo/dom-construct",
                        "dijit/form/ComboBox", 
                        "dojox/grid/cells/dijit",
                        "dojo/dom-style",
                        "dojo/domReady!"],
                function(ItemFileReadStore, Memory, DataGrid, ObjectStore, dom, domConstruct, ComboBox, dijit, domStyle){

                    var dataArray = [];
                    var dataMemory = new Memory({data:dataArray});

                    var gridStruc = [];                             
                    gridStruc.push({name: 'Name', field: 'col1', width: '100px', editable: false});
                    gridStruc.push({name: 'Type', field: 'col2', width: '100px', editable: false});
                    gridStruc.push({name: 'Value (cellType)', field: 'col3', width: '100px', editable: true, cellType: 'dojox.grid.cells.ComboBox', options: ["Test1","Test2"]});
                    gridStruc.push({name: 'Value (formatter)', field: 'col4', width: '100px', editable: true, formatter: formatterCb});                 

                    var columnObj0 = {};
                    columnObj0["col1"] = "Voltage";
                    columnObj0["col2"] = "Number";
                    columnObj0["col3"] = "5";   
                    columnObj0["col4"] = "5";                       
                    dataMemory.put(columnObj0);
                    var columnObj1 = {};
                    columnObj1["col1"] = "Type";
                    columnObj1["col2"] = "Text";
                    columnObj1["col3"] = "THT"; 
                    columnObj1["col4"] = "THT";                     
                    dataMemory.put(columnObj1);
                    var columnObj2 = {};
                    columnObj2["col1"] = "Num. Reflow";
                    columnObj2["col2"] = "Number";
                    columnObj2["col3"] = "3";   
                    columnObj2["col4"] = "3";                       
                    dataMemory.put(columnObj2);
                    var columnObj3 = {};
                    columnObj3["col1"] = "Series";
                    columnObj3["col2"] = "Text";
                    columnObj3["col3"] = "CBK34";   
                    columnObj3["col4"] = "CBK34";                       
                    dataMemory.put(columnObj3);

                    var dataStore = new ObjectStore({ objectStore: dataMemory});

                    grid = new DataGrid({
                        store: dataStore,
                        structure: gridStruc
                    },"gridDiv");

                    grid.startup();                                 

                    function formatterCb(value, rowIndex, rowItem)
                    {                               
                        var storeItems=[];
                        storeItems.push({name: "Test1", value: "test1"});
                        storeItems.push({name: "Test2", value: "test2"});

                        var store = new ItemFileReadStore({data: {identifier:"name", items: storeItems}});

                        var w = new ComboBox({
                            label: "Use Input",
                            store: store,
                            value: value
                        });
                        w._destroyOnRemove = true;
                        return w;
                    }
                });

Upvotes: 0

Views: 557

Answers (1)

soeik
soeik

Reputation: 925

I think defining formatter function may help. Take a look at this example from documentation

function formatCell(value){
    //perform your logic here
}

var layout = [
    {
        name: 'Cell1', 
        field: 'id'
    },
    {
        name: 'Cell2', 
        field: 'date',
        formatter: formatCell
    }
];

In your case it will be here:

gridStruc.push({name: 'Name', formatter: formatCell, field: 'col1', width: '100px', editable: false});

I have no idea why do you use array.push, but it doesn't matter in this case.

Also check this tutorial, there is an example how to put widget in cell. It may be helpful.

Upvotes: 0

Related Questions