Getting id from row clicked on a dgrid List

Question

I just started using dgrid, and going through the dTunes sample, I'm unable to find the id associated with each row in the list. This is pretty remedial on my part, but how would I also get the id I sent from the datasource?

 define([
'require',
'dgrid/List',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/Keyboard',
'dgrid/extensions/ColumnHider',
'dojo/_base/declare',
'dojo/_base/array',
'dojo/Stateful',
'dojo/when',
'dstore/RequestMemory',
'put-selector/put',
'dojo/domReady!'
 ], function (require, List, Grid, Selection, 
        Keyboard, Hider, declare, arrayUtil, Stateful, 
        when, RequestMemory, put) {

 var cstsNode = put(listNode, 'div#cstsCars');
 ...

var cstsList = new TunesList({}, cstsNode);
var dataCSTS = new RequestMemory({ target: require.toUrl('./dataCSTS.json') });

...

dataCSTS.fetch().then(function (cars) {
    cstsCars = arrayUtil.map(cars, pickField('Description'));
    cstsCars.unshift('All (' + cstsCars.length + ' CSTS Cars' + (cstsCars.length !== 1 ? 's' : '') + ')');
    cstsList.renderArray(cstsCars);
});

...

cstsList.on('dgrid-select', function (event) {
    var row = event.rows[0];
    console.log(row.id);  // shows row number.  How do I get the real id or other fields?
    console.log(row.data);  // shows row text that is displayed ("sample text 1")
    console.log(row.data.id); // undefined
});

Here is a snippet of sample data like I'm supplying:

 [{"id":"221","Description":"sample text 1"},
 {"id":"222","Description":"sample text 2"}, 
 {"id":"223","Description":"sample text 3"}]

I'd like to see the id. Instead, row.id returns 1,2 and 3, ie the row numbers (or id dgrid created?).

what do you mean by real id? can you provide more details with data? The row.data returns the actual data that is stored in object array which may or may not match the data that is displayed on the grid. It is difficult to understand what you are trying to achieve. — frank
The id field will be in the data object. i.e console.log (row.data.id) and not row.id. The row.id is the internal representation of the dGrid. — frank
Maybe there is something else wrong, because row.data.id is undefined, since row.data is just text. Is my row object being defined right? — Dave
can you show us what are the contents of row.data? If it is a JSON string then you need to convert it into a JSON Array Object and use that as data for the grid. — frank
You need to store the data as an Array Object. I think that is where the problem lies. It should be var data = [{"id":"221","Description":"sample text 1"}, {"id":"222","Description":"sample text 2"}, {"id":"223","Description":"sample text 3"}]; — frank

Ken Franqueiro Ken Franqueiro · Accepted Answer · 2015-03-16T23:03:25

You haven't really shown a complete example, but given that you're using a store anyway, you'd have a much easier time if you let dgrid manage querying the store for you. If you use dgrid/OnDemandList (or dgrid/List plus dgrid/extensions/Pagination), you can pass your dataCSTS store to the collection property, it will render it all for you, and it will properly pick up your IDs (since Memory, and RequestMemory by extension, default to using id as their identity property).

The most appropriate place to do what you're currently doing prior to renderArray would probably be in the renderRow method if you're just using List, not Grid. (The default in List just returns a div with a text node containing whatever is passed to it; you'll be passing an object, so you'd want to dig out whatever property you actually want to display, first.)

If you want a header row, consider setting showHeader: true and implementing renderHeader. (This is false in List by default, but Grid sets it to true and implements it.)

You might want to check out the Grids and Stores tutorial.

Getting id from row clicked on a dgrid List

2 Answers