Grid "active" state, separate from "selected"

[baleeds]

Is your feature request related to a problem? Please describe.

Our UX requires checkbox multi-select for performing bulk actions but also has the ability to click a single row and open a details panel. The row that is being viewed in the details panel is then "active" and should have a blue background. The selection state is decoupled from the active state.

Describe the solution you'd like

I would like the ability to specify whether a row is "active" or the ability to specify custom classes based on the data in a row. Another option would be to have the row ID as a data attribute on the row DOM element.

I'm sure your team has seen ag-grid. Not saying you should be more like ag-grid, but they do have a feature where the grid options can specify a "getRowClass" callback which provides the row data and returns class names for a row. This feature would work to solve our problem, since we track the "active" state independently from the grid. One common way to track the active state would be the ID of an item in the current route.
https://www.ag-grid.com/javascript-grid/grid-callbacks/#reference-callbacks

Describe alternatives you've considered

The only way I can think to do this with my current understanding is to keep track of the active row primary key, and use the template context on each column template to determine if this column's row's data is active.

[ddincheva]

Hello @baleeds,
We take a look at your request and currently we have two grid input properties evenRowCSS and oddRowCSS, which allow you to set custom classes on rows but we can see why this is not enough to address your request.
So about your suggestion, we have already implemented such behavior but it is only available on grid's cell:
we have introduced cellClasses and cellStyles input properties which can be set on column level. Here you can see more detailed description.
So currently we are planning to introduce similar properties on grid level - probably rowClasses and rowStyles which will accept an object containing key-value pairs. /key is the name of the CSS class/property, the value is either a callback function that returns a boolean or boolean value/. The callback signature for both rowClasses and rowStyles will be:
(row: RowType) => boolean
Please let us if this going to fulfill your us case.

[baleeds]

@ddincheva Yes, the rowClasses and rowStyles callbacks would be immensely helpful! Is there a timeline on when we might see that feature?

[radomirchev]

Hi @baleeds , I am the Product Owner of Ignite UI for Angular. I would like to inform you that the feature has been included in milestone 18 in our roadmap. When we have draft specification for the feature, you would be updated and you can provide feedback on it. The feature would be released with our next major release. P.S> The ROADMAP is to be updated till end of the week

[baleeds]

Thanks @radomirchev! I greatly appreciate the details 👏

Is there a projected timeframe for when the major release might occur? We are deciding how to proceed in the meantime.

[radomirchev]

@baleeds we are targeting end of Sept for the feature release. Which version of Ignite UI you're using?

[baleeds]

We are currently on 11.1.2, but we will do major updates for this feature.

[hanastasov]

@baleeds, we exposed this feature in an alpha version if you want to test it in advance. The version is 12.2.0-alpha.2 available on npm already.

[baleeds]

Just wanted to thank you all for your attention to this. The row classes (and styles) feature is working great for our use cases. 🎉

[zdrawku]

Thank you, @baleeds! We strive to listen whenever our customers have anything to share. Any type of feedback is highly appreciated as it validates our product direction, with that said, please feel free to share your feedback/review here.

Thank you 🙏