CODEWITHSUNDEEP
javascriptdojowidgetdgrid
Leftium
Leftium

Reputation: 17923

Using Dojo dgrid with selector column plugin without a store?

Is it possible to use a Dojo dgrid widget backed by an array (as opposed to a datastore) with checkboxes to select rows?

I successfully started with a basic array-backed dgrid, then added the Selection mixin to enable row selection. So now I have a dgrid that is backed by an array and allows row selection. However, when I try to add checkboxes via the selector column plugin, I get an error: this.store is undefined.

I determined this.store is used to identify which rows are selected: there are several calls to the this.store.getIdentity(rowObject) method which directly correlates to results returned when querying the grid's selection.

When using an array of objects instead of a store, is it possible specify a certain column field for identifying the selected rows? The WORKAROUND_STORE in my code below effectively does this, but perhaps I'm missing a simple solution like setting some property such as: selector({idProperty: 'col1'}). It seems like it should be easier to do.

require(["dgrid/Grid",
         "dgrid/selector",
         "dgrid/Selection",
         "dojo/_base/declare"],
    function(Grid, selector, Selection, declare){

        var columns = {
            col1: selector({}),
            col2: {label: 'COL2'},
            col3: {label: 'COL3'},
        };

        var data = [
            { col1: '1', col2: 'A', col3: 'I'},
            { col1: '2', col2: 'B', col3: 'II'},
            { col1: '3', col2: 'C', col3: 'III'}
        ];

        WORKAROUND_STORE = {
            getIdentity: function(item) { return item.col1 }
        }

        var SelectionGrid = declare([Grid, Selection]);
        window.methodGrid = new SelectionGrid({
            store: WORKAROUND_STORE,
            columns: columns,
            selectionMode: "none",
            allowSelectAll: true
        }, "methodGridDiv");
        window.methodGrid.renderArray(data);
    }
);

Upvotes: 0

Views: 3980

Answers (1)

Leftium
Leftium

Reputation: 17923

Here's what I ended up doing: I wrapped my data array in a Dojo Memory store, which has a setData() method that accepts a new array of data. Main changes:

  • Use OnDemandGrid instead of Grid
  • Wrap the array of data in a Dojo Memory store object
  • Update the grid's store to update the array of data
  • Call the grid's refresh method()

Full code:

require(["dgrid/OnDemandGrid",
         "dgrid/selector",
         "dgrid/Selection",
         "dojo/_base/declare",
         "dojo/store/Memory"],
    function(OnDemandGrid, selector, Selection, declare, Memory){

        var columns = {
            col1: selector({}),
            col2: {label: 'COL2'},
            col3: {label: 'COL3'},
        };

        var data = [
            { col1: '1', col2: 'A', col3: 'I'},
            { col1: '2', col2: 'B', col3: 'II'},
            { col1: '3', col2: 'C', col3: 'III'}
        ];

        var SelectionGrid = declare([OnDemandGrid, Selection]);
        window.methodGrid = new SelectionGrid({
            store: Memory({idProperty: 'methodId'}),
            columns: columns,
            selectionMode: "none",
            allowSelectAll: true
        }, "methodGridDiv");
        window.methodGrid.store.setData(data);
        window.methodGrid.refresh();
    }
);

update in response to:

Did you actually get checkboxes in there? I don't see that in your code snippets.

The code that adds checkboxes is: col1: selector({}). Or more explicitly: col1: selector({selectorType: 'checkbox'})

Note the selector plugin is another column plugin and works differently than the editor plugin.

Upvotes: 4

Related Questions