Recently had a question for a customer:

Would you have an example in your demo samples on your site to show how to set a specific row cell data to bold when the row is selected. I have a column called Product Id.

On row selection, the row has been highlighted but the user says they still want the product id set to bold so they can see that it is selected. I know the row is highlighted but it seems

 

 

It is not enough for them.  They want the product id in that selected row set to bold. 

 

What we currently do, is we attach the "Selected" style to each cell that is selected in the grid. This highlights the row in bold. But in this case we just want to highlight a single column in bold. 

So what we need to do, is to remove that style that highlights everything in bold.

We do this by

/* grid selected column styles reset. */
   
  .flexiciousGrid .selectedCell label{
  font-weight: normal !important;
  }

And then we assocaite a style with that column:

.flexiciousGrid .selectedCell .nameColumn{
  font-weight: bold !important;
  }
And finally, the column needs the nameColumn stytle
var customBoldStyleFunction = function(data, col){
  return "<span class='nameColumn'>"+data[col.getDataField()]+"</span>";
  };
   

Full example below:

 



grid-selected-column-bold-text.html (18.87 kb)