Beginner's question: Accessing the datagrid by id

Submitted by xdevx on Fri, 01/09/2009 - 09:41.

i know this is a beginner's question, but the examples found by google don't work for me, so i ask here.

I created a datagrid

dojo.require("dojo.parser");
            dojo.require("dojox.grid.DataGrid");
        
        dojo.require("dojox.data.JsonRestStore");
        
        
        var peopleData =  "id,lastname,age\n" +
                        "1, Doe, 21\n" +
                        "2, Doe, 22\n" +
                        "3, Smith, 43\n" +
                        "4, Smith, 49\n" +
                        "5, Zu, 23\n" +
                        "6, Kagetsume, 23\n"+
                        "7, Tsuguri, 18\n" +
                        "8, Reisender, 25\n";
    
        
        var Service = function(query, queryOptions) {
            return dojo.xhrGet({url:"http://localhost/Zend2/data.php", handleAs:"json" });     
            }
         Service.post = function(id, value) {
            return dojo.xhrGet({url:"http://localhost/Zend2/data.php", content:{method:"create", id:id, value:value}});     }
            
        var store4 = new dojox.data.JsonRestStore({target: "data.php", 
            service:Service, syncMode:true, loadLazyValues:false, idAttribute:"id"});
        
    
        dojo.addOnLoad(
        
            function() {
                // set the layout structure:
                var layout4 = [
                    [
                      { field: "id", name: "ID", width: 20 },
                      { field: "lastname", name: "Last Name", width: 20 },
                      { field: "age", name: "Age", width: 10 }
                    ]
                  ];
                    
                var layout3 = [
                    [
                      { field: "id", name: "ID", width: 20 }
                    ]
                  ];
        
                // create a new grid:
                var grid4 = new dojox.grid.DataGrid({
                    query: { id: '*' },
                    store: store4,
                    clientSort: true,
                    rowSelector: '20px',
                    structure: layout4
                }, document.createElement('div'));
        
                // append the new grid to the div "gridContainer4":
                dojo.byId("gridContainer4").appendChild(grid4.domNode);
        
                // Call startup, in order to render the grid:
                grid4.startup();
                
           });

and added it to the html with

div id="gridContainer4" onclick="clicked()" style="width: 700px; height: 200px;">

The onclick event is handled by

function clicked() {
	
		debugger;
		
		var b = document.getElementById('dojox_grid_DataGrid_0');
		var c = dojo.byId("gridContainer4");
                ...
                
		var d = c.rowCount;
		
		
	}

(for testing purposes i want to get the row count).
I tried several IDs here, but no id works for me.
Which id should i use to get the datagrid (and the rowcount)?

Thanks

Login or register to post comments
Subscribe post

... it isn't

Submitted by dante on Fri, 01/09/2009 - 12:53.

... it isn't "gridContainer4", it's the first child of that node. You have a couple options here:

a) don't put it IN grid container4, use gridcontianer4 as the srcNode ( new DataGrid({ blahblah }, "gridContainer4"); )
b) give it an ID in the args. access it by dijit.byId("thatId"), dojo.byId is for domNode's exclusively.

Thank you, it works! Here's

Submitted by xdevx on Fri, 01/09/2009 - 13:29.

Thank you, it works!

Here's the code:

var grid4 = new dojox.grid.DataGrid({
		            id: 'mygrid',
		            query: { id: '*' },
		            store: store4,
		            clientSort: true,
		            rowSelector: '20px',
		            structure: layout4
		        }, document.createElement('div'));

Now you can reference the grid with

var theGrid = dijit.byId("mygrid");

By the way:

i read the documentation

http://docs.dojocampus.org/dojox/grid#datagrid-options

but there's only the so called 'jsid', whatever that means....
Some real life examples would be very helpful

This will help explain

Submitted by dante on Fri, 01/09/2009 - 14:22.

This will help explain jsID:

http://dojocampus.org/content/2008/05/06/jsid-dijitbyid-and-dojobyid/

It has nothing to do with the grid per-se. jsId just makes a global variable pointing to some instance, and is only created when the parser is used.

dojo.byId/dijit.byId/jsId is the most common mistake new and old users of Dojo make (i make it on occasion even). So much in fact, it is #1 on the top 10:

http://dojotoolkit.org/2008/12/11/top-10-things-you-should-know-about-do...

also, the "passing an id" bit is a fundamental dijit._Widget pattern. Dijit's need a uniuqe id. If not passed, one is generated for you but usually long and silly like DojoX_layout_ConetnPane_0

also, you don't need to document.createElement('div') for the sourceNodeRef. That is done for you if omitted. The param is there so you can pass an existing node reference to use.

There concepts are dijit fundamentals, and apply to ALL _Widget based components (DataGrid included), and hard to _effectively_ document where "everyone" will find the information easily. eg: the Grid page isn't the place to explain jsId, the "Using Dijit" page explains it clearly, but that's a lot to read to just find a tidbit like dijit.byId. There is the "functions used EVERYWHERE" chapter too, which explains a lot of things like this as well, but at some point repeating and duplicating the same patterns becomes cumbersome for the doc writers. We try. Cookies, Docs, Blogs, and repeatedly throughout the forums.

Hope this helps.

Regards,
Peter Higgins

Search