Hi Tracy,
If you want to style the rows of a datagrid, I would use the cell styler widget.
https://appstore.home.mendix.com/link/app/106254/Mendix/Grid-Cell-Styler
This widget allows you to execute javascript or a nanoflow to determine if a specific row or cell gets a css class based on a boolean.
For your case, if you want to change the styling of the row, you would need a class that has this styling.
tr.datagrid-selected td {
background-color: skyblue !important;
font-weight: bold;
}
If you add this to your custom style sheet, you can use the class “datagrid-selected” with the widget.
Hope this helps!
Edit: The best way to do this would be with a custom widget like the cell styler widget. As Eric mentioned, it shouldn’t take long to customize it to work with Mx6.
If thats not an option this can be accomplished with javascript.
I downloaded the html snippet widget and enabled jquery. Then I wrote a quick script that looks like this
$( document ).ready(function() {
setTimeout(function() {
var col = $("td.number-column .mx-datagrid-data-wrapper"); // retrieve all td tags in the column with the class "number-column"
col.each(function( index ) {
console.log( index + ": " + $( this ).text() );
var number = $( this ).text(); //retrieve the value of the cell
if (number > 3) {
$( this ).parent('td').addClass("testClass"); //add the class to the td element if number is greater than 3
}
});
}, 400);
});
This will retrieve the entire column with the class “number-column” and then add the class “testClass” if the number is greater than 3.
I added the class in the properties of the datagrid widget.
and it ended up looking like this.
This worked, but I still recommend using the cellStyler widget.