Forum | Appery.io

Itried to built a menu to add to a panel in every pages of my app. I have a custom component wich contains a grid with 2 column and 7 rows. For each row i have an icon and a label and on a click event on the cell that contains the label there is a navigation to a specific page. I added the custom component to a panel in each page of my project. I would like to color the row of my custom component that has been clicked by a user before to navigate to a page. How can i obtain this result?

Hi Ciccio,

You would need some custom JavaScript.

Each line (tag tr) has a class with name:
_row_number_from_0_to_N

For example:
mobilegrid1_row_0
mobilegrid1_row_1
mobilegrid1_row_2
mobilegrid1_row_3
mobilegrid1_row_4

You can use styles. To color rows run:
pre// paints all even rows (including zero) in red
Apperyio("mobilegrid_2").find("tr:even").css("background", "red"); /prepre// paints not even lines in green
Apperyio("mobilegrid_2").find("tr:odd").css("background", "green"); /prepre//adds a class only to even rows
Apperyio("mobilegrid_2").find("tr:even").addClass("sameClassForEvenRows");/pre

i tested your code by adding a js with codeAppery("grid_menuPanel").find("tr:odd").css("background", "green");/code
on a cell click event and on label click event on my custom component containing the grid
but when i test the application and i open the panel containing the custom component with the grid it seems to do not work.

another question:
to access to the color of a specific row showld i write codeAppery("grid_menuPanel").find("tr:grid_menuPanel_row_2 ").css("background", "green");/code?

Ciccio,

You can use next code, for example.
Add the following CSS rows: pre[name=mobilegrid_2] .selected td{
background: #11BD1D !important;
}/pre
Use this JavaScript code to set "selected" class for row: pre$('[name="mobilegrid_2"] tr').click(function(){
$(this).addClass("selected").siblings().removeClass("selected");
});/pre