How to update a Dojo Grid cell value using a TooltipDialog (and DropDownButton)

Question

I have a dojo grid which is using some editable dijit form fields. All is well, until I try ot implement an country (multi) select cell as an Tooltip Dialog; i.e., show a drop down button which opens the tooltip dialog populated with a checkbox array to select one or more country. Once checked and clicked OK, the cell should update with a list of selected countries. Obviously I'll take care of updating the server via the store later on.

I've implemented a country select tooltip dialog which works fine like so:

dojo.provide("CountrySelector");  
dojo.declare(
    "CountrySelector",
    [dijit.form.DropDownButton],
    {
     label: 'Countries',
     dropDown: new dijit.TooltipDialog({ execute: function() { 
               console.log("EXECUTE : ", arguments[0]);
               this.value = arguments[0].country;
               }, href:'/cm/ui/countries' }),

        postCreate: function() {
            this.inherited(arguments);
            this.label = this.value;
            dojo.connect(this.dropDown, 'onClose', function() {  console.log('close');  });  

            console.log("CountrySelect post create", this);

        },
     }
);

And the grid cell is typed as:

{ name: 'Countries',           field: 'targeting.countries',           editable: true, hidden: false, type:dojox.grid.cells._Widget, widgetClass: CountrySelector  },

All is working fine but I can't figure out how to update cell's content and store once the widget is executed. As well, I don't seem to have the row id of the updated row.

Any ideas?

Thanks, Harel

Answer 1

I didn't set up a test with your code but you should be able to do it by just creating a method named getValue in your widget that returns the value.

Take a look at the other examples (like dojox.grid.cells.ComboBox) to get an idea of what getValue should look like.

Answer 2

//Layout: gridLayout: {rows: [{name: 'Coll Name',field: 'colField', type: dojox.grid.cells.ComboBox, editable:'true', width:'8%',options: [], alwaysEditing:false}]}

//Grid Store: this.gridStore = new dojo.data.ItemFileReadStore({data: {items: data}});

// var setOptions = function(items, request){ this.gridLayout.rows[0].options.push('Val 1','Val 2'); this.gridLayout.rows[0].values.push('1','2'); dojo.connect(this.gridLayout.rows[0].type.prototype.widgetClass.prototype, "onChange",this, "_onComboChange"); }

this.gridStore.fetch({onComplete: dojo.hitch(this,setOptions)});

_onComboChange: function (selectedOption) { console.info("_onComboChange: ",selectedOption); },

// If you need to populate combos with different values you can use onItem var getArray = function(item, request){ // populate one by one // attach an event to each combo } this.gridStore.fetch({onItem: dojo.hitch(this,getArray)});

Answer 3

Sorry about the indentation . I am not sure how to format the data This is what i used to update my grid var idx = yourGrid.getItemIndex(item); if(idx>-1) { yourGrid.updateRow(idx);
}

---

More detail

---

every row is identified by its identifier

yourGrid.store.fetchItemByIdentity({
    identity: <yourIdentity>,
            onItem: function(item){
               //update your attributes in the store depending on the server response
             //yourGrid.store.setValue(item, <attribute>,<value>);
            var idx = yourGrid.getItemIndex(item);
    if(idx>-1){
        yourGrid.updateRow(idx);        
    }

          }
    });