Style Dojox Grid Row Depending on Data

Style Dojox Grid Row depending on data

Got it by my self:

dojo.connect(dijit.byId('gridTaskCurrent'), 'onStyleRow' , this, function(row) {
                   var item = grid.getItem(row.index);

                    if (item) {
                        var type = grid.store.getValue(item, "LOCKED", null);
                        if (type == 1) {
                            row.customStyles += "background-color:limegreen;";
                        }
                    }

                    grid.focus.styleRow(row);
                    grid.edit.styleRow(row);

                });

How do you style a dojox.grid.DataGrid row?

A simple re-ordering of the init() function makes sure the onStyleRow function is bound before the data is added to the grid works.

function init() {
    var lData = {
        items: [
               {"position":"1","band":"Black Dyke","conductor":"Nick Childs"},
               {"position":"2","band":"Carlton Main","conductor":"Philip McCann"},
               {"position":"3","band":"Grimethorpe","conductor": "Allan Withington"},
               {"position":"4","band":"Brighouse and Rastrick","conductor": "David King"},
               {"position":"5","band":"Rothwell Temperance","conductor":"David Roberts"},
        ],
        identifier: "position"      
    };
    var dataStore = new dojo.data.ItemFileReadStore({data:lData});
    var grid = dijit.byId("theGrid");
    dojo.connect(grid, 'onStyleRow', this, function (row) {
        var item = grid.getItem(row.index);
        if(item){
            var type = dataStore.getValue(item, "band", null);
            if(type == "Rothwell Temperance"){
                row.customStyles += "color:red;";
                //row.customClasses += " dismissed";
            }
        }
        //theGrid.focus.styleRow(row);
        //theGrid.edit.styleRow(row);
    });
    grid.setStore(dataStore);
}

Updating Dojo Enhanced Grid Row Style - Post Store Fetch

you do not need to loop over the rows ! You can use the "formatter" & the "styles" attribute when defining the layout "galayout"...
Take a look at that:

function getExtImg(valueOfColumn) { // Do something with the value...
  return valueOfColumn+'do something with it';
}

var layout = [[ {'name': 'Ext', 'field': 'extension', formatter:
getExtImg, styles:'padding:0px;'},

{'name': 'Filename', 'field': 'documentName', width: 'auto'}]];

// Add this layout to your grid...

What you specify as the formatter function ist called for every row ! Also the style you specify under the styles attribute.

I think this will help you out with your problem !

To be able to change the row style within the formatter, setup a formatter function like this:

formatter:function(val, rowIdx, cell) {
classes = compute_classes(val, rowIdx, cell);
cell.customClasses.push(classes); }

Source:
How do you conditionally style a cell in a Dojo data grid?

As see should easily see, you can add classes to the current row using the push function !

Lucian

Dojo Datagrid: How to change the style of the first row?

Solved the problem like this:

dojo.connect(grid, 'onStyleRow', this, function (row) {
    var item = grid.getItem(row.index);
    if (row.index == 0) {
        row.customClasses = "highlightRow";
        row.customStyles += 'background-color:#FFB93F;';
    }

});

I use the 'Claro' theme and it prevented me to set the background color of the row-cells.
The solution was to set the customClasses to a style like this:

.highlightRow tr
{ 
background-color: #FF6A00 !important;
}  

Found part of the solution here: http://dojo-toolkit.33424.n3.nabble.com/row-customStyles-was-overwrite-by-claro-theme-td3763079.html

dojo datagrid OnStyleRow not correct after sorting via header

I found a work around. It is not ideal as it may not work for all situations.

Change line with:

var idx = row.index;

to:

var idx = -1;

After the newly edit line above, add the following:

var _item = null;
grid_report.store.fetch({onComplete: function(items) {
    dojo.forEach(items, function(item, index) {
        // KLUDGE FOR finding item after sort
        // use merged csv data AND row.node.textContent
        var merged_csv_text = item._csvStore._dataArray[index].join('');
        if (merged_csv_text == row.node.textContent) {
            idx = index; // I finally get the correct index here!!!
            return;
        }
    });
} });
if (idx ==  -1) return;

This works only if each data formed by merged_csv_text is unique.

How do you conditionally style a cell in a Dojo data grid?

When specifying the structure, you pass in an object that represents the widget configuration for a given column. As part of this object, include a formatter function in the definition:

{
...
 formatter: function(val, rowIdx, cell) {
    classes = compute_classes(val, rowIdx, cell);
    cell.customClasses.push(classes);
  }
}

however your 'compute_classes' computes the classes to use is up to you. They will be applied to the cell, and then you can manage their appearance in your CSS.

dojox.grid.DataGrid select a row by a column's value

I'm not a dojo guru, but this may do what you need, if you are trying to just programatically select rows... I think DataGrid contains an instance of dojox.grid.Selection.

http://api.dojotoolkit.org/jsdoc/1.3.2/dojox.grid.Selection

The Selection dijit has a method called setSelected, which I believe takes an index and a boolean for selected/not selected. So I think you could do:

dijit.byId("grid").selection.setSelected(i, true);

I haven't tested it, but I think that will do the Select / Highlight that you need. Give it a try and let me know if it works.

How to create a dojo data grid with one of column being a button in header row?

You can implement your own CheckBoxSelector from the existing one. I discovered the methods by looking at the _Selector.js source. The interesting methods to override were generateHtml and doclick.

See updated fiddle.

    dojo.declare('my.grid._CheckBoxSelector', [dojox.grid._CheckBoxSelector], {
    _headerBuilderClass: dojo.extend(function (view) {
        dojox.grid._HeaderBuilder.call(this, view);
    }, dojox.grid._HeaderBuilder.prototype, {
        generateHtml: function () {
            var w = this.view.contentWidth || 0;
            return '<table style="width:' + w + 'px;" ' +
                'border="0" cellspacing="0" cellpadding="0" ' +
                'role="presentation"><tr><th style="text-align: center;">' +
                '<button data-dojo-type="dijit.form.Button" type="button">x</button><div class="dojoxGridCheckSelector dijitReset dijitInline dijitCheckBox" style="display:none"></div></th></tr></table>';
        },
        doclick: function (e) {
            this.view.grid.removeSelectedRows();
            return true;
        }
    })
});

And

/*set up layout*/
    var layout = [{
        type: "my.grid._CheckBoxSelector"
    },

    ...

    }]];

To delete the rows

    this.view.grid.removeSelectedRows();

You can parse the grid after startup to create the dijit widgets.

grid.startup();
// Not the best practice here but it should give you a starting point
// on where to find the header node.
dojo.parser.parse(grid.views.views[0].headerContentNode);

---

Related Topics