Progress® Telerik® UI for Blazor Feedback Portal
Back to Feed
Request a Feature Report a Bug
Completed
Last Updated: 01 Sep 2021 21:48 by ADMIN
Release 2.18.0
tilt32
Created on: 09 Mar 2020 10:12
Category: Grid
Type: Feature Request
20
Conditional row and cell class for styling

Based on row values, I want to style the entire row.

It could perhaps be exposed through something like a "<RowDescriptor>" element inside the <GridColumns>

//ADMIN EDIT: We plan to extend this item so that it includes not only row styling, but also the ability to add CSS classes to the cells, without having to use the Template.

Duplicated Items
10 comments
ADMIN
Marin Bratanov
Posted on: 01 Sep 2021 21:48

Hi Jason,

When a way to set a static class to all column elements (header, footers, body, filter row) is implemented, using such classes from bootstrap will be something I strongly advise that you do NOT do. They are suitable for plain static HTML, and with a complex and interactive component like the grid they are likely to either not work, or break the component appearance and behavior. Our components generally have much more functionality, elements and interaction options that the plain html Bootstrap is designed for, that both cannot be used for the same purpose. What Bootstrap can do simply is not enough for feature rich components like ours.

If you want to hide columns conditionally based on breakpoints, use the media query component we have, here is an example:  https://docs.telerik.com/blazor-ui/components/mediaquery/integration

 

Regards,
Marin Bratanov
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Jason
Posted on: 31 Aug 2021 14:00
Just throwing this out there again as to why I like to define the class on Telerik. The code below is how it's done in Bootstrap. I'm not saying MediaQuery doesn't have its uses, but it duplicates the functionality in Bootstrap.
<th class="d-none d-xl-block"></th>
<td class="d-none d-xl-block"></td>
ADMIN
Svetoslav Dimitrov
Posted on: 31 Aug 2021 06:56

Hello Janos,

You can use the short-hand syntax of the OnCellRender event to attach a custom CSS class to the GridColumn:

        <GridColumn Field="@(nameof(SampleData.Name))"
                    OnCellRender="@((e) => e.Class = "myCustomCellFormatting")" />

Adding another parameter to the GridColumn to duplicate the behavior would clutter the API of the GridColumn. Could you give me some additional information on the need for an additional parameter that adds a CSS class to the Grid column? 

Regards,
Svetoslav Dimitrov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Janos
Posted on: 24 Aug 2021 09:16

Any update on this?

A simple CSS class addition to the GridColumn would be more than enough, without having to deal with MediaQueries and OnCellRender and OnRowRender.

 

I just want to hide columns for small screen sizes. Simple...

ADMIN
Marin Bratanov
Posted on: 19 Mar 2021 07:54

Hi Jason,

We exposed two events for that - OnCellRender for each column and OnRowRender for the rows at the grid level. You can use their event arguments to set the class for the, respectively, data cell, and data row.

Since I see that the bootstrap classes you are attempting to use are about hiding elements depending on browser resolution - the way to do that would be through the Visible parameter of the columns, not through CSS. There will be a demo and documentation on how to do this with our MediaQuery component that will be part of our next 2.23.0 release, you can do it already with any other business logic that determines the viewport.

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Jason
Posted on: 16 Mar 2021 19:15

This shows completed, but how is this accomplished? I'm trying to add these standard Bootstrap classes to the columns.

<th class="d-none d-xl-block"></th>
<td class="d-none d-xl-block"></td>

ADMIN
Marin Bratanov
Posted on: 23 Jul 2020 13:32

Hi John,

I am going to count this as a vote for a "row creating" type of event, as that's what I see in the linked article. If I am missing something, let me know.

 

Regards,
Marin Bratanov
Progress Telerik

John Campion
Posted on: 22 Jul 2020 21:26
Following up: jJust some simple way to add classes to a row at a time would be enough.  I do like the simplicity of the DevEx approach though.  It can be used for either row or cell customizations without have to generate a template for each column
John Campion
Posted on: 22 Jul 2020 21:24

I need this too. I would suggest something similar to DevEx's implementation:

https://demos.devexpress.com/blazor/GridHTMLDecoration

ADMIN
Marin Bratanov
Posted on: 09 Mar 2020 10:15

For the time being, a solution is available in this KB article: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-cell-background

Another approach might be an event like "RowCreating" that provides you with the model in the arguments, and another field in the arguments can take the Class you want to apply to the row.

Please post your ideas on how you would want such a thing to be exposed, considering that we need to keep control over the <tr> element rendering so we can apply the necessary classes and attributes so that the grid will function.

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Create an account Log In
View
Type
Status
Category