GridX requires numeric id?

Question

I am currently trying to use GridX for displaying table data in my app. I am using JsonRest as a store, Async cache and Pagination. The server is correctly called and result is correct (eg.: items=10-20, response: items=10-20/30) and the data are distinct.

But the table always shows on each page repeatedly only one row (10 times, if the page has size 10). The model of GridX is pretty complex, but i seems that it requires some kind of row identifier (i have somewhere read that it should be numeric). My app simply does not have for this data numeric identifier. Is it possible to use gridX at all, or have I something missconfigured?

var store = new JsonRest({target: activitiesResource});
var columns = [
    {name: "AAA", field: "aaa", sortable: false},
    {name: "BBB", field: "bbb"}

];


//Create grid widget.
var grid = new Grid({
    id: 'grid',
    cacheClass: Async,
    pageSize: 25,
    autoHeight: true,
    store: store,
    cacheSize: -1,
    structure: columns,
    modules: [
        Pagination,
        PaginationBar
    ]
);

//Put it into the DOM tree. Let's assume there's a node with id "gridContainer".
grid.placeAt('htmlGrid');

//Start it up.
grid.startup();

Thanks in advance.

Answer 1

I have not tested this locally but if you look at MusicData.js under testing for gridx, all of that data doesn't have id numeric "column" however the id column is later mixed in. See function getData, below I pasted the relevant lines I am pointing to. Also, for the store you can designate the idProperty, so if you didn't want to add "id" instead wanted to call it employeeNumber you could idProperty: 'employeeNumber' and use the same method below replacing 'id' with 'employeeNumber'. Also you structure/column structure doesn't need to have id added to it, you can leave it as:

var columns = [
    {name: "AAA", field: "aaa", sortable: false},
    {name: "BBB", field: "bbb"}

getData function from MusicData.js:

    getData: function(size){
        size = size === undefined ? 100 : size;
        var data = {
            identifier: 'id', 
            label: 'id', 
            items: []
        };
        for(var i = 0; i < size; ++i){
            var item = items[i % items.length];
            data.items.push(lang.mixin({
                id: i,
                order: i + 1,
                Color: new Color([Math.sin(i) * 100, Math.cos(i) * 100, i * i]).toHex()
            }, item));
        }
        return data;
    }