CODEWITHSUNDEEP
javascriptdojodojox.grid.datagriddgrid
devdar
devdar

Reputation: 5654

Dojo Data Grid Adding Multiselect Column

I am using Dojo dgrid i have created a grid with multiple rows where each row has a checkbox. I would like to create a multiselect column for the check boxes. The column header should be a check box and when i check it all rows are automatically selected.

Code (JSFIDDLE)

 function(parser, declare, OnDemandGrid, ColumnSet, Selection, selector,
        Keyboard, DijitRegistry, editor, ColumnHider) {
    parser.parse();

    var data = [ {
        Id : "1",
        idType : "Passport",
        idNumber : "12121545WWW"
    }, {
        Id : "2",
        idType : "Drivers Permit",
        idNumber : "11212154515 FF"
    }, {
        Id : "3",
        idType : "Electoral Identification",
        idNumber : "425123123121"
    } ];

    var columns = [ [ [ {
        label : "Id",
        field : "Id"
    }, editor({
        label : "",
        field : "select",
        sortable : false,
        autoSave : true
    }, "checkbox"), {
        field : "idType",
        label : "Identification Type"
    }, {
        field : "idNumber",
        label : "Identification Number"
    } ] ] ];

    var CustomGrid = declare([ OnDemandGrid, Selection, selector, Keyboard,
            editor, DijitRegistry, ColumnHider ]);

    var grid = new CustomGrid({
        columns : {

            col1 : {
                label : "Id",
                field : "Id",
                hidden : true
            },

            col2 : editor({
                label : "Select",
                field : "select",
                sortable : false,
                autosave : true
            }, "checkbox"),

            col3 : {
                label : "ID Type",
                field : "idType"
            },

            col4 : {
                label : "ID Number",
                field : "idNumber"
            }

        },
        "class" : "grid",
        allowSelectAll : true
    }, "grid");

    // grid.styleColumn("Id","display:none;");

    grid.renderArray(data);
});

Upvotes: 0

Views: 976

Answers (1)

SergVro
SergVro

Reputation: 971

The selector is a function that should be used to generate column that contains exactly what you want. It should not be mixed to the grid, it should be used in the column definition instead:

columns: { selector: selector(), }

"Select All" checkbox is rendered automatically in header by the selector if the grid has allowSelectAll property set to true. Here is your updated code

Upvotes: 1

Related Questions