Datagrid Styling

1
Hi All I am trying to style a row in my datagrid based on an attribute.  I want to change the color of a row when the date is older than 10 days. 
asked
1 answers
5

Hi Eben,

I would use a combination of the CSS Selector Widget and the HTML Snippet:

https://github.com/Itvisors/mendix-CssSelectorHelperWidget

https://github.com/mendix/HTMLSnippet

First make sure you also have a status attribute indicating that it's ten days or older.

Second, place the CSS Selector Widget right under your table and define which attribute should add it's value as class name.

Third, place the HTML Snippet under the CSS Selector widget it as follows:

I've added a specific class to the the grid, conversationTable and that's why I've added the following line of code to the HTML Snippet:

$('.conversationTable .mx-datagrid-body-table .mx-datagrid-body tr:has(td[title="Running"])').addClass('redBackground');

Note that I've used the "Running" as value for the status, but you could logically use something like "OlderThenTenDays" for this.

Now run and select your page and check if the class is added to your row, only thing to do is define the class in your CSS and make up the styling of your tr.

Regards

answered