Working with selections

To get the current selected rows of the grid, you can use the method yourGrid.selection.getSelected(). You will get an array of the selected items. The following code shows an example:

<script type="text/javascript">
    dojo.require("dojox.grid.DataGrid");
    dojo.require("dojox.data.CsvStore");
    dojo.require("dijit.form.Button");
</script>

<script type="text/javascript"> dojo.require("dojox.grid.DataGrid"); dojo.require("dojox.data.CsvStore"); dojo.require("dijit.form.Button"); </script>

<span dojoType="dojox.data.CsvStore"
    jsId="store2" url="{{dataUrl}}dojox/grid/tests/support/movies.csv">
</span>

<div>
    Select a single row or multiple rows in the Grid (click on the Selector on the left side of each row).
    After that, a click on the Button "get all Selected Items" will show you each attribute/value of the
    selected rows.
</div>

<table dojoType="dojox.grid.DataGrid"
    jsId="grid2"
    store="store2"
    query="{ Title: '*' }"
    clientSort="true"
    style="width: 400px; height: 200px;"
    rowSelector="20px">
    <thead>
        <tr>
            <th width="300px" field="Title">Title of Movie</th>
            <th width="50px">Year</th>
        </tr>
        <tr>
            <th colspan="2">Producer</th>
        </tr>
    </thead>
</table>

<div dojoType="dijit.form.Button">
    get all Selected Items
    <script type="dojo/method" event="onClick" args="evt">
        // Get all selected items from the Grid:
        var items = grid2.selection.getSelected();
        if(items.length){
            // Iterate through the list of selected items.
            // The current item is available in the variable
            // "selectedItem" within the following function:
            dojo.forEach(items, function(selectedItem) {
                if(selectedItem !== null) {
                    // Iterate through the list of attributes of each item.
                    // The current attribute is available in the variable
                    // "attribute" within the following function:
                    dojo.forEach(grid2.store.getAttributes(selectedItem), function(attribute) {
                        // Get the value of the current attribute:
                        var value = grid2.store.getValues(selectedItem, attribute);
                        // Now, you can do something with this attribute/value pair.
                        // Our short example shows the attribute together
                        // with the value in an alert box, but we are sure, that
                        // you'll find a more ambitious usage in your own code:
                        alert('attribute: ' + attribute + ', value: ' + value);
                    }); // end forEach
                } // end if
            }); // end forEach
        } // end if
    </script>
</div>

<span dojoType="dojox.data.CsvStore" jsId="store2" url="{{dataUrl}}dojox/grid/tests/support/movies.csv"> </span> <div> Select a single row or multiple rows in the Grid (click on the Selector on the left side of each row). After that, a click on the Button "get all Selected Items" will show you each attribute/value of the selected rows. </div> <table dojoType="dojox.grid.DataGrid" jsId="grid2" store="store2" query="{ Title: '*' }" clientSort="true" style="width: 400px; height: 200px;" rowSelector="20px"> <thead> <tr> <th width="300px" field="Title">Title of Movie</th> <th width="50px">Year</th> </tr> <tr> <th colspan="2">Producer</th> </tr> </thead> </table> <div dojoType="dijit.form.Button"> get all Selected Items <script type="dojo/method" event="onClick" args="evt"> // Get all selected items from the Grid: var items = grid2.selection.getSelected(); if(items.length){ // Iterate through the list of selected items. // The current item is available in the variable // "selectedItem" within the following function: dojo.forEach(items, function(selectedItem) { if(selectedItem !== null) { // Iterate through the list of attributes of each item. // The current attribute is available in the variable // "attribute" within the following function: dojo.forEach(grid2.store.getAttributes(selectedItem), function(attribute) { // Get the value of the current attribute: var value = grid2.store.getValues(selectedItem, attribute); // Now, you can do something with this attribute/value pair. // Our short example shows the attribute together // with the value in an alert box, but we are sure, that // you'll find a more ambitious usage in your own code: alert('attribute: ' + attribute + ', value: ' + value); }); // end forEach } // end if }); // end forEach } // end if </script> </div>

<style type="text/css">
    @import "{{baseUrl}}dojox/grid/resources/Grid.css";
    @import "{{baseUrl}}dojox/grid/resources/nihiloGrid.css";

    .dojoxGrid table {
        margin: 0;
    }
</style>

<style type="text/css"> @import "{{baseUrl}}dojox/grid/resources/Grid.css"; @import "{{baseUrl}}dojox/grid/resources/nihiloGrid.css"; .dojoxGrid table { margin: 0; } </style>

Grid 1.2 supports a new parameter “selectionMode” which allows you to control the behaviour of the selection functionality:

‘none’

deactivates the selection functionality

‘single’

let the user select only one item at the same time

‘multiple’

let the user selects more than one item at the same time

‘extended’ (default)

not sure, what’s the difference between “multiple” and “extended”

Table of Contents

• Working with selections