Login Register

Grid with remote combobox

Hey,

I was wondering how I can let a combobox use remote data for the grid (using a store). Following code does not seem to work:

var combocarddef = new dojo.data.ItemFileReadStore({jsId: 'carddefStore', url: '/mack/ajaxdataprovider/get/'});
       
var viewCardDef = {
          cells: [[
{name: 'Type', field: "type", editor: dojox.grid.editors.Dijit,
                                        editorClass: "dijit.form.ComboBox", store: combocarddef},
.....

Thanks a lot,

nikolai

As an addition I probably

As an addition I probably would use the dojox.data.QueryReadStore store since the combobox has rather lots of data (user selection)

nikolai

Still couldn't make it work

Still couldn't make it work :|
Is this possible or do I have to use predefined values?

nikolai

just putting topic back to

just putting topic back to top, still no idea how I can make this work.. any ideas?

nikolai

Grid with remote combobox - same problem

I think, at a minimum, you will need to specify a searchAttr. ComboBox doesn't seem to work without this, even outside the grid. However, I can't get this to work, either, even with the searchAttr (Note that the one I have outside the grid works as expected). Here is my code:

	
	var siteIdStore = new dojo.data.ItemFileReadStore({ url: 'getRateSiteIds.ajax'});
	var rateStore = new dojo.data.ItemFileWriteStore ({url: 'getRates.ajax'});

    var view1 = {
            cells: [
                       [
			{ name: 'Type', field: 'type', width:"10em",
                          editor:dojox.grid.editors.Dijit },
			{ name: 'Site Id', field: 'siteId', width:"12em", 
			  editor: dojox.grid.editors.Dijit, 
                          editorClass: "dijit.form.ComboBox",
                          store: siteIdStore,
                          searchAttr: "siteId" },
			{ name: 'Rate', field: 'rate', width:"7em",
                          editor: dojox.grid.editors.Dijit }
	                ]
                ]
        };  

	var layout = [ view1 ];


 
	

Watching the firebug console, its apparent that, when used in the grid, the ComboBox never tries to access the store (that is, the url of the store is never called). It seems that some event must not be firing.

Can anyone else help out with this?

Thanks,
Mike

Proper way

Hi, Grid doesn't use widgets directly like you all are trying to do. It in fact lays an additional API on top of the widgets. That's why the ComboBox outside works, but the one inside doesn't.

The correct editor is dojox.grid.editors.ComboBox. Here is a sample with all of the dijits in a grid:
http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/tests/test...

I'm still researching Grid, but from your snippet, I *think* it is more like this:

var viewCardDef = {
          cells: [[
{name: 'Type', field: "type", editor: dojox.grid.editors.ComboBox, store: combocarddef},

Works with 'options' but not with 'store'

editor: dojox.grid.editors.ComboBox works if you specify options (as in the example), but I still can't get it to work with store. I tried:

var view1 = {
            rows: [
                     [
			{ name: 'Type', field: 'type', width:"10em", editor:dojox.grid.editors.Dijit },
			{ name: 'Site Id', field: 'siteId', width:"12em",  
				editor: dojox.grid.editors.ComboBox, 
				store: siteIdStore,
				searchAttr: "siteId" },
			{ name: 'Rate', field: 'rate', width:"7em", editor: dojox.grid.editors.Dijit }
	             ]
                ]
        };

But no luck. Still doesn't trigger the store to fetch the data.

RE: Works with 'options' but not with 'store'

Hi,
I am also facing the same problem, Any idea in using the store data instead of options. I have tried using options, it is working fine with dojo grid. I was able to see all the datas inside the combo box. But when i try to bind the data using the store, i.e JSON data. it is failing.

Can anyone help on this ??

Thanks in advance,
Kathir

Extend the grid combobox to allow for stores (dojo 1.0.0)

I dug around in dojox/grid/_data/dijitEditors.js, and by default, the grid's combobox is set up to create a new store from the options passed to it, instead of checking if a store is provided by the user. I found that by extending grid.editors.ComboBox, you can alter it's behavior to read an external store:

dojo.require("dojo.parser");
    dojo.require("dojo.data.ItemFileReadStore");
    dojo.require("dojox.grid.Grid");
    dojo.require("dojox.grid._data.model");
    dojo.require("dojox.grid._data.editors");
    dojo.require("dojox.grid._data.dijitEditors");

    //extend grid Combobox to allow external store
    dojo.extend(dojox.grid.editors.ComboBox, {
      getEditorProps: function(inDatum){
        if(typeof this.cell.options != "undefined"){
          var items=[];
          dojo.forEach(this.cell.options, function(o){
            items.push({name: o, value: o});
          });

          var store = new dojo.data.ItemFileReadStore({data: {identifier:"name", items: items}});
          this.cell.editor.editorClass.superclass.searchAttr = "name";
        }
        //if no options set, check for a store
        else{
          //check that a store is specified
          if(typeof this.cell.store != "undefined"){
            var store = this.cell.store;
            //set the searchAttr based on user specified searchAttr if set; otherwise, default to name
            this.cell.editor.editorClass.superclass.searchAttr = (typeof this.cell.searchAttr != "undefined") ? this.cell.searchAttr : "name";
          }
          else{
            console.error("Error setting store for dojox.grid.editors.ComboBox...");
          }
        }

        return dojo.mixin({}, this.cell.editorProps||{}, {
          value: inDatum,
          store: store
        });
      }
    });

Here's a test grid that uses a combobox with a store in one column, and a combobox that uses options in another:

<!-- STORES -->
  <div jsId="country_store"
       dojoType="dojo.data.ItemFileReadStore"
       url="resources/countries.json"/>


  <div jsId="people_store"
       dojoType="dojo.data.ItemFileReadStore"
       url="resources/people.json">

  </div>

  <!-- MODEL -->
  <div dojoType="dojox.grid.data.DojoData"
       jsId="model"
       store="people_store"
       query="{ first_name: '*' }"
       clientSort="true" />


  <!-- GRID -->
  <div jsId="test_grid"
       dojoType="dojox.Grid"
       model="model"
       autoWidth="true"
       autoHeight="true"
       singleClickEdit="true">

    <script type="dojo/method">
      test_grid_structure = [
        { type: "dojox.GridRowView", width: "20px" },
        { cells: [[
          { name: 'First Name', field: 'first_name', width:"10em", editor:dojox.grid.editors.Dijit },
          { name: 'Initial', field: 'm_initial', width:"7em", editor: dojox.grid.editors.Dijit },
          { name: 'Last Name', field: 'last_name', width:"10em", editor:dojox.grid.editors.Dijit },
          { name: 'Title', field: 'title', width:"10em", editor:dojox.grid.editors.Dijit },
          { name: 'Country', styles: 'text-align: center;', editor: dojox.grid.editors.ComboBox,
            store: country_store, searchAttr: "name", width: 10, field: 'country' },
          { name: 'Authorization Level', styles: 'text-align: center;', editor: dojox.grid.editors.ComboBox,
            options: ["one","two","three"], width: 10, field: 'auth_level' }
        ]]}
      ];
      test_grid.setStructure(test_grid_structure);
    </script>
  </div>

EDIT: Initially, this always had a default searchAttr of "name", and ignored the user-specified searchAttr; I thought I fixed this by adding in the line with "this.editorClass.prototype.searchAttr". However, that breaks the comboboxes with options specified. So, I added in the line: "this.cell.editor.editorClass.superclass.searchAttr = "name";", but it does the same thing... Still working on a solution.

RE: Extend the grid combobox to allow for stores (dojo 1.0.0)

Hi,

Since i am new to dojo, i am expecting some detailed steps to be followed for extending the dojo combo box. It would be great if you explain the things more detailed like, which file needs the change, what should be added and where etc..

Thanks in advance,

Regards,
Kathir

A solution at last!

This extend seems to work 100% of the time:

dojo.extend(dojox.grid.editors.ComboBox, {
          getEditorProps: function(inDatum){
            //if options are set, use those
            if(typeof this.cell.options != "undefined"){
              var items=[];
              for (var i=0, o, v; i < this.cell.options.length; i++){
                o=this.cell.options[i];
                v=this.cell.values[i];
                items.push({name: o, value: v});
              }
              var store = new dojo.data.ItemFileReadStore({data: {identifier:"name", items: items}});
            }
            //if no options, check for a store
            else{
              if(typeof this.cell.store != "undefined"){
                var store = this.cell.store;
              }
              else{
                console.error('No store specified for "'+this.cell.name+'" cell...');
              }
            }
            return dojo.mixin({}, this.cell.editorProps||{}, {
              value: inDatum,
              store: store,
              searchAttr: (this.cell.searchAttr) ? this.cell.searchAttr : "name",
              pageSize: 50
            });
          }
        });

Wrap that in an addOnLoad and that should be all you need. The important part that I was missing in the previous example was the inclusion of the searchAttr in the dojo.mixin (thanks to a venerable coworker for that one).

You can reference the grid in my example above on how to use it, but this is the important line:

{ name: 'Country', styles: 'text-align: center;', editor: dojox.grid.editors.ComboBox,
            store: country_store, searchAttr: "name", width: 10, field: 'country' }

Note, if no searchAttr is specified, it defaults to name.

Create Dynamic Dialog Box and script scope in jsp page

hi create a Dialog box through Spring get Jsp From Controller and Display as Dialog ho to set Script Scope

Abhi

Thanx a lots Its working

Hey i have made the suggested changes but one small issue i am facing is, my combobox send's the invalue as name itself well i have kept options as the id, but it is sending the name, like {john , 1 } so when i select john the inValue received by my xhr request is john , i want it to be 1.

Raghavendra

Part of next release?

to uwf_doc:

Excellent work, functions exactly as promised (using version 1.1.1).

Does anyone know if this will be added / fixed in the next release? (v 1.1.1 +)

Thanks!