Alternating row color attribute

Progress® Telerik® UI for Blazor Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 28 Sep 2021 06:50 by ADMIN

Brian

Created on: 24 Jan 2020 21:22

Category: Grid

Type: Feature Request

Alternating row color attribute

It is a common request to show grids in alternating colors, rather than simply white and grey. Because the Grid component generates the <tr> element, we are left with manually setting each <td> element. A tedious but effective solution.

The feature I would like to request is to add 2 new tags to the <TelerikGrid> component, call them EvenRowClass, and OddRowClass. The behavior is the same as the Class tag, but they operate on Even and Odd numbered rows of data, respectively. Their values would be added to the <tr> element as <tr class="MyEvenClass"> or <tr class="MyOddClass" in the same manner class k-alt is generated or not. This would provide a simple yet extensible mechanism to achieve custom alternating row colors in a Grid.

3 comments

ADMIN

Marin Bratanov

Posted on: 31 Jan 2020 10:29

Hi Brian (and anyone else),

The way to change the alternating row styles is to use CSS, an example of using the built-in Telerik classes is available at the end of the following KB article: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-cell-background.

We would rather not implement parameters for every appearance customization that should usually be done with CSS, especially those that do not require C# logic like this one.

Regards,
Marin Bratanov
Progress Telerik

UI for Blazor

Brian

Posted on: 30 Jan 2020 05:48

To clarify, the Grid component already inserts a k-alt element on alternating rows when it renders inside the <tr> element. It would be nice to have pass in MyEvenClass and MyOddClass

Current Grid component rendering:

<tr role="row" class="k-master-row k-alt " data-row-index="1" data-render-row-index="3" aria-rowindex="4">
<td>

</td>
<td class="MyNormal">

</td>
<td class="MyNormal">

</td>
</tr>

<tr role="row" class="k-master-row" data-row-index="2" data-render-row-index="3" aria-rowindex="4">
<td>

</td>
<td class="MyDanger">

</td>
<td class="MyDanger">

</td>
</tr>

Propose new functionality:

<TelerikGrid Data="MyList"
Class="MyClass"
ClassOddLines="MyOddLineClass"
ClassEvenLines=MyEvenLineClass"
SelectionMode="GridSelectionMode.None"
Sortable="true"
FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
Pageable="true">
<RowTemplate Context="DataClass">
<td>
<img class="rounded-circle" src="@($"images/{DataClass.myimage}.png")" width="50%"/>
</td>
<td">
@DataClass.Column2
</td>
<td >
@DataClass.Column3
</td>
</RowTemplate>
<GridColumns>
<GridColumn Field="@nameof(DataClass.Column1)" />
<GridColumn Field="@nameof(DataClass.Column2)" />
<GridColumn Field="@nameof(DataClass.Column3)" />
</GridColumns>
</TelerikGrid>

The rendered output would include the new classes:

<tr role="row" class="k-master-row k-alt MyOddLineClass" data-row-index="1" data-render-row-index="3" aria-rowindex="4">
<td>

</td>
<td class="MyNormal">

</td>
<td class="MyNormal">

</td>
</tr>

<tr role="row" class="k-master-row MyEvenLineClass" data-row-index="2" data-render-row-index="3" aria-rowindex="4">
<td>

</td>
<td class="MyDanger">

</td>
<td class="MyDanger">

</td>
</tr>

The result would be automatic even and odd line coloring with minimal effort.

Anyway, that is my idea.

ADMIN

Marin Bratanov

Posted on: 25 Jan 2020 09:25

Hello Brian,

I will paste belowthe general guidance I sent in your ticket for anyone else having a similar question.

Before I do that, I'd ask what is the difference between adding a CSS class to the grid and overriding the built-in row styles (like below) and adding a custom row class for alternating rows - it seems to me that it would be two more parameters that would not provide additional functionality?

Would it make more sense if there was an event like RowRendering that provides the model in the arguments and there is an attributes collection or a class in the arguments that you can set and the grid will take it and render it? That would let you do conditional logic for the rows appearance based on the runtime data rather than static alternating rows.

I am just trying to clarify the scope of such a feature so it can be useful and it solves more scenarios.

-------

Here is an article that explains the basics of conditional formatting: https://docs.telerik.com/blazor-ui/knowledge-base/grid-conditional-cell-background

Here is an example of overriding the built-in row and alternating row backgrounds:

<style>
    .custom-row-colors .k-grid-table .k-master-row {
        background-color: red;
    }

        .custom-row-colors .k-grid-table .k-master-row.k-table-row:hover {
            background-color: pink;
        }

        .custom-row-colors .k-grid-table .k-master-row.k-alt {
            background-color: green;
        }

        .custom-row-colors .k-grid-table .k-master-row.k-table-row.k-alt:hover {
            background-color: cyan;
        }
</style>

<TelerikGrid Data="@MyData"
             Class="custom-row-colors">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" />
        <GridColumn Field="@(nameof(SampleData.Name))" Title="Employee Name" />
        <GridColumn Field="@(nameof(SampleData.Team))" Title="Team" />
        <GridColumn Field="@(nameof(SampleData.HireDate))" Title="Hire Date" />
    </GridColumns>
</TelerikGrid>

@code {
    private IEnumerable<SampleData> MyData = Enumerable.Range(1, 7).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5,
        HireDate = DateTime.Now.AddDays(-x).Date
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
        public DateTime HireDate { get; set; }
    }
}

Regards,
Marin Bratanov
Progress Telerik

UI for Blazor