How can I change the row colour in datagrid based on severity?

Question

How can I change the row colour in datagrid based upon the severity condition? I'm new to this EXTJS topic. I used to reader to read, store to store and writer to write the data. After fetching all the data into the grid, how can i change the row colour in datagrid based upon the severity condition? Can you explain me too bit with code working?

Trichotomy

Answer 1

you can use the GridView class (Ext.grid.GridView) to manipulate the user interface of the grid. You can also the viewConfig property of the GridPanel. Here is an example:

viewConfig: {
        //Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    }

ps: Example taken from ExtJS API documentations itself

The price-fall and price-rise are CSS that have background colors set accordingly. eg:

.price-fall { 
 background-color: #color;
}

.price-rise {
 background-color: #color;
}

Quagga

'change' in the above code is the index value ???? what exactly record and index in function mean ? – Trichotomy

@ Abdel Olakara: what does the record mean ? i want it to apply for as many rows.how can i make it in a looping ? – Trichotomy

@master123, did you look at the API documentation? getRowClass() has four parameters: getRowClass( Record record, Number index, Object rowParams, Store store ) - first is Record object from your store, index is your row number, rowParams is parameters for the row and the last is the store itself. – Quagga

how can i make it applicable for all rows in a grid ? is looping required,how ? – Trichotomy

looping is not required. when rendering the grid, extjs will call getRowClass() for each record. Do you have any variable that define what background color to use? say if price is less its red else its green. so you compare using the if statement as shown in above code. – Quagga

@Abdel Olakara: is record a keyword ? if looping is not required then y should i specify the row number ???? if i specify a row no.,does it start from that row no. ? – Trichotomy

@master123.. record is not a keyword.. its a ExtJS object of type Ext.data.Record (refer API doc). The above code I gave is put in the grid's config. You don't have to explicitly call it. The framework calls the getRowClass(). 'change' is a dataindex yes. its just an example. you will have to use your criteria variable and compare, then return the css class.. maybe you can post your grid code along with your question.. – Quagga

'change' means named column which is one of the column name that available in the GridView. The code tells, "find the column named "change", get the column value, assign that value to c" – Besmirch

Answer 2

You can do it by using the getRowClass method of GridView (see Ext JS API).

Quoted example from API documentation:

viewConfig: {
    forceFit: true,
    showPreview: true, // custom property
    enableRowBody: true, // required to create a second, full-width row to show expanded Record data
    getRowClass: function(record, rowIndex, rp, ds){ // rp = rowParams
        if(this.showPreview){
            rp.body = '<p>'+record.data.excerpt+'</p>';
            return 'x-grid3-row-expanded';
        }
        return 'x-grid3-row-collapsed';
    }
},

Corroboree

Answer 3

You could use a renderer for your column from your column model and then assign a css class like this:

so, the customRenderer function:

`

function customRenderer(value, metaData, record, rowIndex, colIndex, store) {
    var opValue = value;
    if (value === "Rejected") {
        metaData.css = 'redUnderlinedText';
    } else if (value === "Completed") {
        metaData.css = 'greenUnderlinedText';
    } else if (value === "Started") {
        metaData.css = 'blueUnderlinedText';
    }
    return opValue;

}`

And then your column:

        {
            header: 'Your Column Header',
            dataIndex: 'your_data_index',
            renderer: customRenderer
        }

Then your css could be like this:

.redUnderlinedText {
    background-color: blue,
    color: red;
    text-decoration: underline;
    cursor: pointer;
}

Fornof

Thank u.but i'm not familiar with the above code ? what is renderer do ? hoe it can be used to change the background colour of the row ? – Trichotomy

@ lucian:i understood and got the concept of above code.does it apply for changing the row background colour ? should i need to create a separate css to change the different row colours ? – Trichotomy

what does the parameter record mean ? how can i specify the rowindex & columnindex ? – Trichotomy

The record parameter represents an entire row from the grid. The concept of this method is as follow: the function will be called at render time for each record in the store. So if you have 5 rows the function will be called 5 times with the corresponding parameters. You don't have to specifically set the rowIndex and columnIndex variables, they will be populated with their corresponding values. – Fornof

This gives us the possibility to customize that column for each row separately based on some information from the current record. I hope I answered your questions. – Fornof