Bind dojo dgrid to form with dojox.mvc

Question

I want to bind a dgrid to a form in dojo using dojox.mvc. While there are many samples on how to bind single models to forms there is nothing showing how to do this with a grid. The grid will have to share the same store with the form and when someone clicks a row in the grid the form will be updated. My main problem is the difference in the stores they use: while dgrid uses dojo.store objects, mvc uses dojo.Stateful. dojo.store has an object named 'data' where it keeps the list of data while dojo.Stateful has 'items'. Any help is welcome.

score 0 · Answer 1 · answered Jan 30 '13 at 08:36

Though I'm not an expert of dgrid, I think bridging dgrid's selection and dojo/Stateful would help. Something like below (dgrid should be in the same directory as dojo/dijit/dojox, and /path/to/dojotoolkit should be replaced with the directory where dojo/dijit/dojox/dgrid are placed):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <title>Test dgrid and dojox/mvc</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <link id="themeStyles" rel="stylesheet" href="/path/to/dojotoolkit/dijit/themes/claro/claro.css"/>
        <style type="text/css">
            @import "/path/to/dojotoolkit/dojo/resources/dojo.css";
            h2 {
                margin: 12px;
            }
            .heading {
                font-weight: bold;
                padding-bottom: 0.25em;
            }
            .ui-widget{
                margin: 10px;
            }
        </style>
        <script type="text/javascript" src="/path/to/dojotoolkit/dojo/dojo.js" 
            data-dojo-config="async: true, mvc: {debugBindings: 1}"></script>
        <script type="text/javascript">
            require([
                "dojo/_base/declare",
                "dojo/_base/Color",
                "dojo/parser",
                "dojo/when",
                "dojo/Stateful",
                "dgrid/List",
                "dgrid/OnDemandGrid",
                "dgrid/Selection",
                "dgrid/test/data/base",
                "dojo/domReady!"
            ], function(declare, Color, parser, when, Stateful, List, Grid, Selection){
                when(parser.parse(), function(){
                    var undef,
                        columns = {
                            col1: "Name",
                            col5: "Red",
                            col6: "Green",
                            col7: "Blue"
                        },
                        grid = new (declare([Grid, Selection]))({
                            store: smallColorStore,
                            columns: columns
                        }, "grid"),
                        Model = declare(Stateful, {
                            _colorGetter: function(){
                                return this.col5 === undef || this.col6 === undef || this.col7 === undef ? "" : new Color([this.col5, this.col6, this.col7]).toHex();
                            },
                            _colorSetter: function(value){
                                if(value){
                                    var rgb = new Color(value).toRgb();
                                    this.col5 = rgb[0];
                                    this.col6 = rgb[1];
                                    this.col7 = rgb[2];
                                }
                                return value;
                            }
                        });
                    grid.on("dgrid-select", function(event){
                        if((ctrl.model || {}).id !== undef && ctrl.model.id != event.rows[0].id){
                            save();
                        }
                        ctrl.set("model", new Model(event.rows[0].data));
                    });
                    grid.on("dgrid-deselect", function(event){
                        if((ctrl.model || {}).id !== undef && ctrl.model.id == event.rows[0].id){
                            save();
                            ctrl.set("model", new Model({col1: ""}));
                        }
                    });
                    function save(){
                        var model = ctrl.model;
                        if(model.id){
                            for(var s in columns){
                                grid.updateDirty(model.id, s, model[s]);
                            }
                        }
                        grid.save();
                    }
                    handleSaveButton = function(){
                        save();
                        grid.select(model.id);
                    };
                });
            });
        </script>
    </head>
    <body class="claro">
        <script type="dojo/require">at: "dojox/mvc/at"</script>
        <h2>A basic grid with dojox/mvc</h2>
        <div id="grid"></div>
        <span data-dojo-id="ctrl"
         data-dojo-type="dojox/mvc/ModelRefController"></span>
        <div style="padding:10px;"
         data-dojo-type="dojox/mvc/Group"
         data-dojo-props="target: at(ctrl, 'model')">
            <label for="name">Name</label>
            <input id="name" type="text"
             data-dojo-type="dijit/form/TextBox"
             data-dojo-props="value: at('rel:', 'col1')">
            <div data-dojo-type="dijit/ColorPalette"
             data-dojo-props="value: at('rel:', 'color'), palette: '7x10'"></div>
        </div>
        <input type="button" style="margin:10px;"
         data-dojo-type="dijit/form/Button"
         data-dojo-props="label: 'Save', onClick: function(){ handleSaveButton(); }">
    </body>
</html>

Bind dojo dgrid to form with dojox.mvc

1 Answers1