twincat/2022/01/31/row-classes-provider

[utterances-bot]

How to work with the RowClassesProvider?

Recently a user on the LinkedIn TwinCAT forum shared and example how to use the RowClassesProvider. When I tried the example and went looking for the documentation, there was none to be found! On the whole internet, there is one (1!) example which sort of shows the function. In this post I will show what the RowClassesProvider does and how you can use it to dynamically color data grids.

https://cookncode.com/twincat/2022/01/31/row-classes-provider.html

[HolgerJeromin]

The rowIndex and rowNumber both contain the number of the row. I’m not sure why there are two variables containing the same information.

They can differ with filtering or sorting. rowIndex targets the original data array. rowNumber is the number of current display data.

[Roald87]

@HolgerJeromin thanks for the clarification!

[RuthVoortman]

Hello, I want to use this rowclassesprovider to highlight a row when it is selected. But I can't really succeed. Do you have an idea how to create this?

[Roald87]

@RuthVoortman aren't highlighted rows already formatted? What did you try so far?

[RuthVoortman]

@Roald87 the highlighted rows from above only works with datachange in the selectbox in the table. But I want to create a hightlighted row only when you click on that row. That means no datachange and I believe the rowclassesprovider only works with datachange or am I wrong? I tried the selected rowvalue but it only checks when the table is loaded, at that moment no row is selected. When pressed a row it won’t check again. I tried the event onselectedItemchanged to activate the rowclassesprovider but it doesn’t work.

[Roald87]

@RuthVoortman I think you're right. The RowCLassProvider is only activated on a datachange and on the initial page load. I haven't used the HMI in a while and can't help you I'm afraid.

[RuthVoortman]

@Roald87 no problem, thank you for your help.

[HolgerJeromin]

That means no datachange and I believe the rowclassesprovider only works with datachange or am I wrong?

The function is called with the data and its index as parameters. It do not know which datagrid it is called from. Thats why there is no need / gain in calling the function again after selection (at least with the current infrastructure) as there are no changed data after that.

The color of the selected row is set via CSS variable --tchmi-background-data-scroll which can be overwritten for datagrids in your project theme css file.

.TcHmi_Controls_Beckhoff_TcHmiDatagrid,
.tchmi-datagrid {
    --tchmi-background-data-scroll: red;
}