Bootstrap datatable row colour


#1

Hi,

With the bootstrap datatable example, if i add the following to projectCSS

.myColourblue {
  background-color: blue;  }

.myColouryellow {
  background-color: yellow; 
}

Then with Button1_onclick(), i remove the existing code and add

Dim i
Dim table 
table = $("#DataTable1").DataTable() 

For i = 0 To 10
      If i Mod 2 = 1 Then
          $(table.rows(i).nodes()).addClass("myColouryellow")
      Else       
          $(table.rows(i).nodes()).addClass("myColourblue") 
     End If 
Next i  

For some reason, only every second row is coloured (yellow). Is something causing this?

Thanks


#2

If it’s only working on every other row the the problem is your modulo.

Modulo (Mod) returns the remainder of a division

(i = 0) / 2 = 0

(i = 1) / 2 = 0.5
(i = 2) / 2 = 0

(i = 3) / 2 = 1.5

Try it without the =1


#3

If i just make it like this…

  $(table.rows(0).nodes()).addClass("myColouryellow")
  $(table.rows(1).nodes()).addClass("myColouryellow")

Only the second row is coloured, and the same goes for all odd rows.


#4

Tip: use triple back ticks before and after any code. It will format nicely. (```)


#5

I found the problem.
I removed the class table-striped and now all rows show colour.


#6

I got the row colours working correctly using the classes. However, this is not practical for my app as i need to colour rows based on different groups and the colours are selected by the users and there can be many groups.

Can i create colour classes when i fill the grid for the numerous groups or is there some other way to colour the row?

Thanks


#7

Assign the user selected color classes to variables then set the classes with the variable.

Glad you got the other part working.


#8

How would the classes be set to variables? I cannot find much about classes in the docs.


#9

Classes are part of CSS, which is well documented elsewhere (it’s not only used by AppStudio).


#10

Should something like this work?

  Dim test
  test = [{ color: "red" }]
      
  $("#Button1").addClass(test)

#11

You’re adding a style, not a class.

// .css

.odd_row {background-color: red;}

// .js

var odd_class = “odd_row”;

$(“odd_row”).addClass(odd_class);

(I think that’s right, it’s late…)


#12

Thanks.

For your code, i am still not sure how i can apply this to my Appstudio code. I cannot put my classes in projectCSS as there is an unknown number of colours to be used and the actual colour is not known yet, as the user adds what they require.

Do i need something like a cellrenderer used with the JqxGrids?