CODEWITHSUNDEEP
checkboxdojoselectordgrid
T Kambi
T Kambi

Reputation: 1387

dgrid Checkbox not showing

I have tried a lot of variation but for some reason the selector checkbox doesnt show. Can anyone help me out with this please.

Below is the sample code I am using.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
    var djConfig = {
        parseOnLoad: true
    };
</script>
<script type="text/javascript" src="https://js.arcgis.com/3.16/" ></script>

<script type="text/javascript">
    require(["dojo/_base/declare", "dojo/_base/lang", "dojo/_base/array", "dojo/store/Memory", "dgrid/OnDemandGrid","dgrid/Selection", "dgrid/selector", "dstore/Trackable", "dojo/domReady!"],function (declare, lang, array, Memory, Grid, SelectionMixin, SelectorMixin, Trackable) {
            var CustomGrid = declare([Grid, SelectionMixin, SelectorMixin]);

            var data = [{
                    STRC_ID : "B988858",
                    Selected: false,
                    FNDG_CTGY_NB : "0010"
                }, {
                    STRC_ID : "B9811118",
                    Selected: true,
                    FNDG_CTGY_NB : "0020"
                }];

            var TrackableMemory = declare([Memory, Trackable]);
            var memory = new TrackableMemory({
                idProperty: "STRC_ID",
                data: data
            });

            var grid = new CustomGrid({
                store: memory,
                selectionMode: 'single',
                columns: getSTColumns(), 
                allowSelectAll: true
            }, 'gridHolder');
            grid.startup();

            function getSTColumns(){
                return {
                    col1: { label: "", selector: 'checkbox' },
                    col2: { label: 'STRC_ID', field: "STRC_ID", sortable: false },
                    col3: { label: 'FNDG_CTGY_NB', field: 'FNDG_CTGY_NB' }
                };
            };

           grid.refresh();

        });

</script>
</head>
<body>
    <div id="gridHolder"></div>
</body>
</html>

Thanks for the support in advance.

Here is the link to jsBin.

Upvotes: 1

Views: 642

Answers (2)

Ken Franqueiro
Ken Franqueiro

Reputation: 10559

You are attempting to use Selector like a mixin as it exists in dgrid 0.4+, but ArcGIS includes dgrid 0.3, where it is not a mixin, but a column plugin (a concept which was retired in dgrid 0.4). This is also why it has a lowercase s, which is not the case in 0.4+.

Here is an example of how to use 0.3's selector properly, from the 0.3.17 selector docs:

require([
    "dojo/_base/declare", "dgrid/OnDemandGrid", "dgrid/Selection", "dgrid/selector"
], function(declare, OnDemandGrid, Selection, selector){
    var grid = new (declare([OnDemandGrid, Selection]))({
        store: myStore,
        selectionMode: "single",
        columns: {
            col1: selector({ label: "Select", selectorType: "radio" }),
            col2: "Column 2"
        }
    }, "grid");
    // ...
});

Upvotes: 1

GibboK
GibboK

Reputation: 73988

I am not able to reproduce your error, but please try to get rid of getSTColumns() function and use you Object literal directly instead, example:

    var grid = new CustomGrid({
        store: memory,
        selectionMode: 'single',
        columns: {
            col1: { 
                label: "",
                selector: 'checkbox'
            },
            col2: { label: 'STRC_ID', field: "STRC_ID", sortable: false },
            col3: { label: 'FNDG_CTGY_NB', field: 'FNDG_CTGY_NB' }
        }, 
        allowSelectAll: true
    }, 'gridHolder');
    grid.startup();

Additionally, there is a live demo which provides some automatically generated source code which could be useful for you initial setup, more infos can be fond here: http://dgrid.io/js/dgrid/demos/laboratory/

Upvotes: 0

Related Questions