@shanthisivanesan
Here is an example page that uses a Select widget to update columns in a grid with data from a second store.

<!DOCTYPE html>
<html>
<head>
<title>Multi-store grid test</title>
<style>
    @import "../dojo/resources/dojo.css";
    @import "../dijit/themes/claro/claro.css";
    @import "../dgrid/css/skins/claro.css";
    @import "../dgrid/css/dgrid.css";

    #grid {
        width: 600px;
    }

    .claro .mySelect {
        width: 120px;
    }

    .claro .mySelect .dijitButtonNode {
        width: 20px;
    }
</style>
</head>
<body class="claro">
<div id="grid"></div>

<script src="../dojo/dojo.js"></script>
<script>
require([
    "dojo/store/Cache",
    "dojo/store/Memory",
    "dojo/store/Observable",
    "dgrid/OnDemandGrid",
    "dgrid/editor",
    "dijit/form/Select"
], function(Cache, Memory, Observable, OnDemandGrid, editor, Select){

    var grid, store1, store2, cache, options;

    function createStore1(){
        var data = [];
        for(var i = 0; i < 10; i++){
            var obj = {id: i};
            for(var k = 0; k < 4; k++){
                obj["data" + k] = "Value " + i + "." + k;
            }
            obj.selectChoice = "";
            data.push(obj);
        }
        return new Memory({data: data});
    }

    function createStore2(){
        return new Memory({
            data: [
                {id: 1, value: "Data for choice 1"},
                {id: 2, value: "Data for choice 2"},
                {id: 3, value: "Data for choice 3"},
                {id: 4, value: "Data for choice 4"}
            ]
        });
    }

    // Create the first store.
    store1 = createStore1();
    // Create the second store.
    store2 = createStore2();

    // Make store1 a caching store and override the put method.  In this demo, puts to
    // store1 will not be reflected in the original store; only in the cache.
    cache = new Memory({data: []});
    store1 = Cache(store1, cache);
    store1.put = function(object, directives){
        return cache.put(object, directives);
    };
    // Make store1 observable.
    store1 = Observable(store1);

    // Add a method to store1 to retrieve data from store2.
    store1.getMoreData = function(key){
        var item = store2.get(key);
        return item && item.value;
    };

    options = [
        {value: "", label: "Select"},
        {value: 1, label: "One"},
        {value: 2, label: "Two"},
        {value: 3, label: "Three"},
        {value: 4, label: "Four"}
    ];

    function handleChange(newValue){
        // Handle changes to the Select widgets in the grid.  Retrieve additional data
        // based on the Select widget's new value.
        // Context is the Select widget.
        var store = grid.store;
        // Look up the row from the grid to retrieve the data object.
        var obj = grid.row(this.domNode).data;
        obj.selectChoice = newValue;
        // Look up the additional data.
        obj.moreData = store.getMoreData(newValue);
        // Put the updated object to the store so the row in the grid will update.
        store.put(obj);
    }

    grid = new OnDemandGrid({
        store: store1,
        columns: {
            data0: "Data 0",
            data1: "Data 1",
            selectChoice: editor({
                label: "Make a choice",
                editorArgs: {
                    options: options,
                    className: "mySelect",
                    onChange: handleChange
                }
            }, Select),
            moreData: "More Data"
        }
    }, "grid");
});
</script>
</body>
</html>

Dgrid with data coming from 2 stores #908

Description

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions