Condition in rowGroup

Condition in rowGroup

antoniocibantoniocib Posts: 277Questions: 62Answers: 1

Hi guys
I implemented some conditions in the rowGroup function and I wanted to add another condition (I'm using improvised code, it's just to let you understand what I want to do):

these are the existing conditions already working:

    rowGroup: {
        endRender: function ( rows, group, row ) {
                var controllo = '';

                var intVal = function ( i ) {
                        return typeof i === 'string' ?
                                i.replace(/[\$,]/g, '')*1 :
                                typeof i === 'number' ?
                                        i : 0;
                                    };

            var epalcount = rows
                .data()
                .pluck('epal')
                .reduce( function (a, b) {
                    return intVal(a) + intVal(b);
                }, 0) ;

                            var indcount = rows
                                    .data()
                                    .pluck('ind')
                                    .reduce( function (a, b) {
                                            return intVal(a) + intVal(b);
                                    }, 0) ;

                                    var perdcount = rows
                                            .data()
                                            .pluck('perd')
                                            .reduce( function (a, b) {
                                                    return intVal(a) + intVal(b);
                                            }, 0) ;

                                            var epcount = (epalcount + perdcount);

                                    if(epcount == 33 && indcount == 0|| epcount == 28 && indcount == 4)
                                    {
                                     var controllo = "CAMION PIENO";
                
                                 }
                                 else if(epcount >= 33 && indcount >0 || indcount > 4 || epcount > 33){
                                    var controllo = "CONTROLLA I BANCALI";
                                 }
                                 else{
                                     var controllo = "CAMION VUOTO";
                                 };



    



            return $('<tr/>')
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                                    .append( '<td >'+epcount+'</td>' )
                    .append( '<td>'+indcount+'</td>' )
                    .append( '<td>'+controllo+'</td>' )
                    .append( '<td></td>' )
                        .append( '<td></td>' );
        },
        dataSrc: function (data) {
        return data.dlinea;
      }
    },

I would like that when the variable :
var controllo = "CAMION PIENO"
the endRender line is highlighted

this is improvised javascript code:

if(var controllo = "CAMION PIENO")
{
   $(td).addclass(myHighlight);
}

this is the output than i've now:

this is the output than i want 've:

I hope I made myself clear, excuse the length of the topic.

This question has accepted answers - jump to:

Answers

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974
    edited April 2020

    If you want to highlight the row then you would add the class to the tr not the td.

    Maybe something like this would work:

            var addClass = '';
            if(var controllo === "CAMION PIENO")
              {
                 addClass = myHighlight);
              }
                
            return $('<tr/>')
                    .addClass( addClass )
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                    .append( '<td></td>' )
                                    .append( '<td >'+epcount+'</td>' )
                    .append( '<td>'+indcount+'</td>' )
                    .append( '<td>'+controllo+'</td>' )
                    .append( '<td></td>' )
                        .append( '<td></td>' );
    

    It will either add a blank string or the classname if controllo = "CAMION PIENO". Note the use of === in the if instead of =. Using a single = won't work as it is an assignment operator not a compare operator.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1
    edited April 2020

    Hi @kthorngren i try ur way but i dont understand in this row of ur code

         addClass = myHighlight); 
    

    anyway beyond that line always tells me that the myHighlight variable is not defined when it is not true.

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974

    Copy/paste error on my part.

    myHighlight)

    This needs to be a string that is the classname you want to use.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    But doesnt work kevin, this is my css and javascript

    table.dataTable tbody td.colorCheck{background-color:#98FB98 }
    table.dataTable tbody tr.colorCheck{background-color:#98FB98 }
    
                                     var addClass = '';
                                     if(controllo === "CAMION PIENO")
                                     {
                                                    addClass=('colorCheck');
                                     }
    
                return $('<tr/>')
                                .addClass('addClass')
                                .append( '<td></td>' )
                                .append( '<td></td>' )
                                .append( '<td></td>' )
                                .append( '<td></td>' )
                                .append( '<td></td>' )
                                .append( '<td></td>' )
                                .append( '<td></td>' )
                    .append( '<td>'+epcount+'</td>' )
                                .append( '<td>'+indcount+'</td>' )
                                .append( '<td>'+controllo+'</td>' )
                                .append( '<td></td>' )
                                .append( '<td></td>' )
                                .append( '<td></td>' );
            },
    
  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974

    You will need to do some debugging:

    1. Make sure the if statement is working correctly.
    2. Make sure the classname is applied where you expect it by using the browser inspect tool for the row.
    3. The selector for applying the CSS is probably not correct. Use the browser's insect tool to see what to use for the tr.

    Sorry, I don't know these answers without setting it up myself.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Kevin being that you followed me throughout the project let's say the class I used to highlight the lines through the checkbox, using the same class that already works should work or not?

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974
    Answer ✓

    the class I used to highlight the lines through the checkbox, using the same class that already works should work or not?

    You can try but the selector is probably not correct. What I mane by selector is table.dataTable tbody td.colorCheck. Its probably not correct. Follow the above steps. To inspect the row right click on it and click Inspect.

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    Kevin on chrome i see the html and return this class

    myHighlight dtrg-group dtrg-end dtrg-level-0

    not this

    myHighlight

    if i go to change the class on td in only my Highlight work

  • kthorngrenkthorngren Posts: 21,443Questions: 26Answers: 4,974
    Answer ✓

    myHighlight dtrg-group dtrg-end dtrg-level-0

    This is expected as those are class for RowGroup.

    In Chrome if you inspect the RowGroup row there will be a "Styles" section which shows the CSS applied, something like this:

    More specifically this:

    table.dataTable tr.dtrg-group td {
        background-color: #e0e0e0;
    }
    

    You will want to do something similar with your own class colorCheck.

    Something like this in your CSS:

    table.dataTable tr.colorCheck td {
        background-color: yellow;
    }
    

    For example:
    http://live.datatables.net/toqomaxo/1/edit

    Kevin

  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1
    edited April 2020

    Okay kevin i solved the problem was in CSS
    i need to write css in this way:

    table.dataTable tbody tr.rosso td{background-color: #FF0000 !important }
    table.dataTable tbody tr.verde td{background-color: #98FB98  !important }
    table.dataTable tbody tr.giallo td{background-color: #FFFC17 !important }
    

    not in this:

    table.dataTable tbody tr.rosso {background-color: #FF0000 !important }
    table.dataTable tbody tr.verde {background-color: #98FB98  !important }
    table.dataTable tbody tr.giallo {background-color: #FFFC17 !important }
    
  • antoniocibantoniocib Posts: 277Questions: 62Answers: 1

    The result is this:

This discussion has been closed.