dynamically styling datagrid cells with cssselectorhelper widget

0
Hi, can anyone help me with implementing css styling so that the background color of a cell is dependent on the contents of a datagrid cell using cssselectorhelper widget? I’ve defined the new class in my css file (called redclass). If I inspect the page and add redclass class manually to the desired cell I see the results I want. Styles shows .mx-datagrid .mx-datagrid-body-table .mx-datagrid-body tr td .mx-datagrid-data-wrapper {   text-overflow; } .redclass{  background-color:#ff0000; }   Not sure how implement this through the cssselectorhelper widget though. The datagrid name is grid40 and has the following class: datagrid-hover datagrid-striped datagrid-bordered As a first step I’m just trying to get cssselectorhelper to change the background color for all cells in row 3. I’ve set the attribute as grid40 and style as : table[cssselectorhelper=grid40]td[row=”3”] { background-color:#ff0000; } but row 3 background color remains unchanged when I run it. Datagrid and the widget are in a container.
asked
1 answers
1

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.

 

answered