How to give local variables as properties to cell editor in editable GridX?

Question

I'm using Dojo 1.9 with GridX 1.2. I'm just configuring the ComboBox as editor to the cells in the grid.

I have found the following configuration syntax in the examples:

    editor: "dijit/form/ComboBox",
    editorArgs: {
        props: 'store: myStore, searchAttr: "label"'
    }},

The problem is, that props must be a text that would be parsed. It doesn't accept the object. It means, that I must make myStore as global variable, which is something I'd like to avoid.

Is there an alternative way to configure editors in GridX?

https://github.com/oria/gridx/wiki/How-to-show-widgets-in-gridx-cells%3F — Philippe, Jul 09 '13 at 17:02
Yes. Assigning the store to the comboBox in that method should work... The store should still be created outside though, so maybe you can make it a property of your grid, like declare.safeMixin(grid, {comboStore : new Memory()})... — Philippe, Jul 11 '13 at 17:01

score 1 · Accepted Answer · answered Apr 24 '14 at 05:06

QUICK FIX: instead of creating it as global variable, add it to a namespace, which is widely used for these cases. So, while creating the store, add it to particular namespace and use it in props.

var ns = {}; 
//use this namespace for all objects subject to grid/a particular section/anything
ns.myStore = new Memory({
    data: [
        {name:"Option 1", id:"OP1"},
        {name:"Option 2", id:"OP2"},
        {name:"Option 3Samoa", id:"OP3"}
    ]
});

props: 'store: ns.myStore, searchAttr: "label"'

So, therefore we can avoid adding up global objects directly to window object.

RECOMMENDED FIX: In the template string that you pass for that column, instead of using default combo box, use a custom widget.

And in this widget, override the postCreate method and set the desired store.

define([ 
    "dojo/_base/lang",
    "dijit/form/ComboBox",
    "dojo/store/Memory"
], function(lang, comboBox, Memory) {
    return dojo.declare("myapp.widget.MyComboBox", [ dijit.form.ComboBox], {
    // summary:
    //Custom sub-class of ComboBox with following functionality:
    //This will set the desired store

    postCreate: function(){
        // summary:
        // This will call default postCreate and additionally create/set store:

        this.inherited(arguments);
        var wid = this;
        //if store is static get storeObj from a json file
        //if store comes from backend, make the call here and get storeObj
        dojo.xhrGet({
            url: "filenameOrUrl",
            handleAs: "json"
        }).then(function(result){
            var storeObj = new Memory(result);
            wid.set("store",storeObj);
        });
    }
  });
});

Now you this in the template for that column. Note that we need not mention the store here neither as string or object, since the widget itself will load the store, once created.

<div data-dojo-type="myapp/widget/MyComboBox" 
    style="width: 100%"
    data-dojo-attach-point="gridCellEditField"
></div>

How to give local variables as properties to cell editor in editable GridX?

1 Answers1