1

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

3 Answers 3

1
//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)});
1

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);        
        }
    }
});
0

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.

1
  • That never worked for me. The ultimate solution (to this and other niggles) in my case, was to ditch Dojo (which I liked very much) and move everything to ExtJs. Its just miles ahead as far as stability and ease of use are concerned. Not to mention it actually has proper docs. Thanks for the help though!
    – Harel
    Sep 21, 2009 at 8:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.