CODEWITHSUNDEEP
dojo
tapioco123
tapioco123

Reputation: 3545

How to show a checkbox in a dojo datagrid?

How to show a checkbox in a dojo datagrid?

Upvotes: 3

Views: 13146

Answers (6)

Boban Raj
Boban Raj

Reputation: 69

If the type of the cell is a boolean, then its value is displayed as either the string true or false. If a check box is desired, setting the cellType to be dojox.grid.cells.Bool and marking it as editable will make a checkbox appear.

http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells

From markup, do like this for the desired result:

<th field="booleanField"  cellType="dojox.grid.cells.Bool"  editable="true">Checkbox field</th>

Upvotes: 0

Swapnil
Swapnil

Reputation: 257

If you are trying to show a checkbox selector on each row of the grid you can follow this tutorial

http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php

Upvotes: 0

Sujeet
Sujeet

Reputation: 143

You can use something like this, with Json

HTML

<table id="myGrid" dojoType="dojox.grid.DataGrid"
               clientSort="true" autoHeight="true" autoWidth="true">
            <script type="dojo/method">
                showFields();
            </script>
</table>

DOJO

    showFields:function () {
        dojo.xhrPost({
            url:"/getFields.do",
            timeout:2000,
            handleAs:"json",
            load:dojo.hitch(this, "displayInGrid")
        });
    },

    displayInGrid:function (jsonResult) {
        var dataStore = new dojo.data.ItemFileReadStore(
            { data:jsonResult }
        );
        var checkboxLayout = [
            [
                {name:'ID', field:"id" },
                {name:'Value', field:"id", formatter:this.addCheckBox}
            ]
        ];
        var grid = dijit.byId("myGrid");
        grid.setStructure(checkboxLayout);
        grid.setStore(dataStore);
    },

    addCheckBox:function (val) {
        var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
                    return checkbox;
    },

Upvotes: 1

Herbert
Herbert

Reputation: 5645

I would suggest setting cellType to dojox.grid.cells.Bool, instead of the formatter.The formatter gives you much freedom, but also the responsibility of gathering the data from all the checkboxes (for all the rows) afterwards. Something like this as a structure-entry should do the trick:

{
   name: "is awesome?",
   width: "auto",
   styles: "text-align: center",
   type: dojox.grid.cells.Bool, editable: true
}

Please make sure to use a write-store (like ItemFileWriteStore) and not just a read-store, otherwise you will be disabled to actually check the checkbox :)

Upvotes: 8

vikasrao
vikasrao

Reputation: 95

You need the IndirectSelection plugin for the EnhancedGrid, here's a fiddle: http://jsfiddle.net/raybr/w3XpA/5/

Upvotes: 2

Naktibalda
Naktibalda

Reputation: 14120

Use formatter function as described in Widgets Inside dojo.DataGrid
You can return new dijit.form.Checkbox from formatter function in dojo 1.4

Upvotes: 3

Related Questions