Conditional CSS on row.

[ashishdamania]

I am trying to conditionally apply CSS using this but no success

<style>
#msg {
background-color:yellow;
}</style>
<script>

$scope.grid= {

data:[],
columnDefs:[
{
field:Quantity,
displayName: quantity,

render:function(row)
{     

  if(row.Quantity < 100){             
    return React.DOM.div({id:"msg"}, row.ROW_ID));
   }
}
}
],

</script>

[josebalius]

@deepthoughts any errors? I see that field is Quantity, this should be in quotes:

{
   field: "Quantity",
   displayName: "quantity"
}

Jose

[ashishdamania]

@josebalius Sorry for the typo but I found that I was able to get CSS in the background

$scope.grid = {

data: [],

columnDefs: [
{
field: "ID",
displayName: "ID/Details",
render: function(row) {
//This works but I get the error below in the console
if(row.ID > 100){
return React.DOM.div({id:"msg1"},React.DOM.a({href:"href:"https://url?loc_id="+row.ID, onClick: function() {
// you can do things with $scope in here or any other angular service/function
}}, row.ID);
}

//This condition below is referencing another column data but it instead it just compares ID column  which I think may be out of scope?
if(row.Quantity < 100){
return React.DOM.div({id:"msg2"},React.DOM.a({href:"href:"https://url?loc_id="+row.ID, onClick: function() {
// you can do things with $scope in here or any other angular service/function
}}, row.ID);
}

},
{
                        field: "Quantity",
                        displayName: "Qty."
}

};

}):

I am able to get CSS styling based on the if statement but I also found that when I click on the "Last" button in pagination it does not work. I am also attaching the error I am getting when I click it. "Next","Prev" ,"First" do not work either but they do not invoke this error message .

Also when I try to apply CSS to using this code, it does not work

{
                        field: "Quantity",
                        displayName: "Qty.",

               render: function(row) {
                        if(row.Quantity < 10){
        return React.DOM.div({id:"msg"},row.Quantity);
}

This code shows no results and I see this error below:

Thanks for the response so far.

[josebalius]

@deepthoughts hmm try adding an else clause to your render function to return an empty string. Also, you should change id:"msg" to className:"msg" and use the class selector in your CSS. You can't have repeating elements with the same id, best to cover all cases.

Let me know if it works. I'm going to play with your code as well.

[ashishdamania]

@josebalius I can confirm that with "else" clause I was able to rectify those errors and all the buttons work fine. I was also able to refer to another column value i.e row.Quantity in ID field and it works fine as well. I think there should be a better way than this to achieve conditional styling perhaps like you mentioned previously in #5 or not. Thanks for the quick response.

[josebalius]

@deepthoughts I have a committed a fix where the else clause won't throw errors. Doing conditional styling is as simple as:

<style>
.specialClass {
   font-weight:bold;
}
</style>

<script>
...
render: function(row) {
   var className = (row.Quantity < 10) ? "specialClass":"";
   return React.DOM.span({className: className}, row.Quantity);
}
...
</script>

That should do it. By having total control of your render method, you give the user of the API more control over what they can do.

It's better that way, otherwise having we would have to design grid features for every type of request. ie custom styling, custom text, custom components, selections, etc.

Closing.