Gridcell styler - add color for row

0
Hello, I am using Gridcell styler for background coloring in datagrid table. My condition is that to add background color in case column 3 cell is not empty.(see image below) i.e. if abbreviation is not empty then I want to add background color. (I do not want to use nanoflow for this) How to do this?
asked
3 answers
1

Try this code to have rowObj, get the GUID of the associated object, and check if it's value is not null:

var associatedGUID = rowObj.getReference("Module.Entity1_Entity2");
mx.data.get({
    guid: associatedGUID,
    callback: function(associatedObject) {
        // Now you can access the attributes of the associated object
        var associatedValue = associatedObject.get("AttributeName");
        associatedValue !== null;
    },
    error: function(error) {
        return false;
    }
});

 

answered
1

You can make the class apply to the row, instead of the cell, by leaving the 'Column name' empty.

As rule you can add

return rowObj.get("Abbreviation") !== null;

That is the simple, straightforward answer to your question.

 

However, this GridCellStyler is only built for Datagrid, not for Datagrid2. So on Datagrid2 it will not work and therefor this solution is not future proof.

 

Alternatively, instead of using the gridcell-styler, you can use the datagrid's property Dynamic Classes to add a class if the value of the third attribute is empty. Make that class add the color:

.rowwithvalueinthirdcolumn{
  background-color: #333333;
}

You will have to add that rule to each column.

There you have it. You solution is now futureproof, and easier to maintain for the average Mendix developer.

answered
0

Hi Raghavendra ,

use html snippet ,set javascript and give datagrid class as custom-dg and try this 

you can change time as well //see comments

setTimeout(() => {
    const allRows = document.querySelectorAll('.custom-dg tr');

    allRows.forEach(row => {
        const secondTd = row.querySelectorAll('td')[1];

        if (secondTd && secondTd.getAttribute('title')) {
            secondTd.style.backgroundColor = 'yellow';
        }
    });
}, 1500); //this is time in msec after that this script will run after page load

 

image.png

answered