How to get the list of selected rows in Dgrid selection mixin

Question

I am using Selector and Selection Mixin in Dgrid ondemandgrid.I am using checkbox as a selector.Below are my questions.

How to get the List of Checked rows in a javascript on a html button click?I know there is a dgrid-select and deselect events,but i want the list of all the selected rows on a button click event.
Currently , if i click on a row at any position ,the checkbox is getting selected.But I want to select the row only when i click on the checkbox.How to achieve this?

Here is my code

             require([
        "dgrid/OnDemandGrid",
        "dojo/store/JsonRest",
        "dojo/dom",
        "dojo/dom-style",
        "dojo/_base/declare",
        "dgrid/extensions/ColumnResizer",
        "dgrid/Selection", 
        "dgrid/selector"
    ], function (OnDemandGrid,JsonRest,dom,domStyle,declare,ColumnResizer,Selection, selector) {
            var Layout = [
                 selector({ label: selector({}), selectorType: "checkbox" }),
                 {field: 'srno',label: 'Sr No'},
                 {field: "Name",label: "name"}
            ];
            jsonstore = new JsonRest({target: url,idProperty: "srno"});
            grid = new(declare([OnDemandGrid,ColumnResizer,Selection]))({
                store: jsonstore,
                columns: Layout,
                minRowsPerPage : 40,
                maxRowsPerPage : 40,
                keepScrollPosition : true,
                allowSelectAll: true,
                loadingMessage: "Loading data...",
                noDataMessage: "No results found."
            }, "grid");
            domStyle.set(dom.byId("grid"),"height","210px");                
            grid.startup();
            grid.on("dgrid-select", function(event){
                    //
            });
            grid.on("dgrid-deselect", function(event){
                    //
            });

        });

Sean Zhao · Answer 1 · 2013-09-25T16:00:26.240

Here is the solution of your questions:

    var Layout = [
             selector({ label: '', sortable: false}),
             {field: 'srno',label: 'Sr No'},
             {field: "Name",label: "name"}
        ];
        jsonstore = new JsonRest({target: url,idProperty: "srno"});
        grid = new(declare([OnDemandGrid,ColumnResizer,Selection]))({
            store: jsonstore,
            columns: Layout,
            minRowsPerPage : 40,
            maxRowsPerPage : 40,
            selectionMode: "none",
            deselectOnRefresh: false,
            keepScrollPosition : true,
            allowSelectAll: true,
            loadingMessage: "Loading data...",
            noDataMessage: "No results found."
        }, "grid");



    new Button({
        label: "Ok",
        onClick: function () {

             // here you can use grid.selection to get the list of selected rows.
             // it is an object with { 'rowid': true} format  for example, like below 
            array.forEach(grid.store.data, function (item) {
                if (grid.selection[item.id]) {
                    //your code to handle this selected item
                }
            });
        })
    }, 'button');

This won't work with a json rest store because it doesn't have the property ".data". A json rest store won't necessarily have downloaded all the data from the server. — David Wilton, Dec 17 '13 at 08:27

score 1 · Answer 2 · answered Jan 28 '14 at 07:56

1

For 1: declare a var selection = []; then,

   grid.on("dgrid-select", function(event){
            var selected = grid.selection;
        if (selected) {
            for (row in selected) {
                selection.push(row);
            }
        }
    });

and splice it on dgrid-deselect then access the array on button click.

For 2: define the grid with selectionMode: "none", From the docs: https://github.com/SitePen/dgrid/wiki/Selection

answered Jan 28 '14 at 07:56

Daniel Ursu

459
3
9

Need to be careful testing just for existence in the grid.selection array (row in selected), an item can be in the selection array with a value of false indicating that the item is NOT selected. – JonS Jul 24 '14 at 20:54
Also need to be careful with large data sets where current visual presentation in the grid may not contain all of the data in the store. This grid is not auto-heighted so it will use virtual scrolling and only render a sub-set of the data within the "viewport". 'grid.selected' array only contains the selection status (true for selected, false for unselected) for rows that have been rendered. The grid.isSelected(item) method should be used to test whether an item is selected, this method also takes into account the master checkbox in the column header for items not rendered yet. – JonS Apr 06 '16 at 21:48

score 1 · Answer 3 · answered Oct 27 '14 at 18:42

1

this.grid.on(".dgrid-row:dblclick", function(vet) {
    // your selected row
    var row = self.grid.row(vet);
});

answered Oct 27 '14 at 18:42

ttosh

73
6

Answers with code should explain the code's place/purpose (what you've changed, how to use it, etc). – cHao Oct 27 '14 at 19:04

score 1 · Answer 4 · answered Dec 27 '15 at 08:17

you can get selected rows in this handler . the selectedRows variable give you any selected items in grid

   window.grid = new (declare([Grid, ColumnResizer, Selection]))({
                store: jsonstore,
                columns: Layout,
                minRowsPerPage: 40,
                maxRowsPerPage: 40,
                keepScrollPosition: true,
                allowSelectAll: true,
                loadingMessage: "Loading data...",
                noDataMessage: "No results found."
            }, "grid");

            window.grid.on("dgrid-select", function (event) {


                var selectedRows = event.rows;

            });

and for deselected row === window.grid.on("dgrid-deselect", – Bahman Rashidi Dec 27 '15 at 11:37 — Bahman Rashidi, Dec 27 '15 at 11:37

How to get the list of selected rows in Dgrid selection mixin

4 Answers4