Dojo DGrid applying formatting to cell contents

Question

I have a dgrid and i am attempting to style cells by underlining the text in the cell when the checkbox(s) are selected for the row.

My approach was to attach a css class to the item once the checkbox is checked for the row. However this does not work. Under is a fiddle and my code.

How can i style a cell once a checkbox is checked for the row? JSFIDDLE style cells for selected row

HTML

<div id="grid" class="grid"></div>

JS

require([

    "dijit/form/CheckBox",
    "dijit/form/Textarea",
    "dijit/form/FilteringSelect",
    "dijit/form/TextBox",
    "dijit/form/ValidationTextBox",
    "dijit/form/DateTextBox",
    "dijit/form/TimeTextBox",
    "dijit/form/Button",
    "dijit/form/RadioButton",
    "dijit/form/Form",

]);

require([
    "dojox/validate/us",
    "dojox/validate/web",
    "dojox/layout/TableContainer",
    "dojox/layout/GridContainer",
    "dojox/widget/Wizard",
    "dojox/widget/WizardPane",
    "dojox/grid/_CheckBoxSelector"

]);

require([
    "dojo/parser",
    "dojo/_base/declare",
    "dojo/store/Memory",
    "dgrid/OnDemandGrid",
    "dgrid/ColumnSet",
    "dgrid/Selection",
    "dgrid/selector",
    "dgrid/Keyboard",
    "dgrid/extensions/DijitRegistry",
    "dgrid/editor",
    "dgrid/extensions/ColumnHider",


    "dojo/domReady!"

], function (parser, declare, MemoryStore, 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 store = new MemoryStore({
        data: data
    });


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

    var grid = new CustomGrid({
        store: store,
        columns: {
            col1: {
                label: "Id",
                field: "Id",
                hidden: true
            },

            completed: selector({}),

            col3: {
                label: "ID Type",
                field: "idType",
                formatter: function(item){
                return "<div" + (item.completed ? ' class="completed"' : "") +
                            ">" + item + "</div>";
                }
            },

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

        },
        SelectionMode: "none",
        allowSelectAll: true
    }, "grid");




    grid.renderArray(data);
});

CSS

#grid .completed {
    text-decoration: line-through;
    font-style: italic;
}

Answer 1

Your approach to attaching a class and styling it with CSS sounds good to me.

You might want to hook on the dgrid-select event like this:

grid.on('dgrid-select', function (event){
    event.rows[0].element.style.color = 'red';
});

Here's the change in action: http://jsfiddle.net/22h5G/15/

Btw, +1 for jsfiddle. Easier for us to answer when everything's ready. :)

Obviously, if you select multiple rows at once, the event's rows property has multiple items.

There's also dgrid-deselect event, should you be interested in removing the class once the row's deselected.

More documentation is here: https://github.com/SitePen/dgrid/wiki/Working-with-Events