Completed
Last Updated: 20 Mar 2023 10:17 by ADMIN
Roman
Created on: 13 Mar 2023 12:58
Category: UI for Blazor
Type: Bug Report
0
Blazor grid OnRowRender

OnRowRender in version 4 style is applied through one line.

 

@* Conditional styling/formatting for rows (including locked/frozen columns). *@

<style>
    /*the following selectors target the locked/frozen columns*/
    /*===*/
    .k-grid .k-master-row.myCustomRowFormatting .k-grid-content-sticky,
    .k-grid .k-master-row.myCustomRowFormatting.k-alt .k-grid-content-sticky
    /*===*/
    {
        background-color: inherit;
    }

    .k-grid tr.myCustomRowFormatting:hover {
        background-color: red !important;
    }

    .k-grid tr.myCustomRowFormatting {
        background-color: #90EE90;
    }
</style>

<TelerikGrid Data="@MyData"
             Height="446px"
             Pageable="true"
             Width="450px"
             OnRowRender="@OnRowRenderHandler">
    <GridColumns>
        <GridColumn Field="@(nameof(SampleData.Id))" Width="120px" Locked="true" />
        <GridColumn Field="@(nameof(SampleData.Name))" Width="200px" Title="Employee Name" />
        <GridColumn Field="@(nameof(SampleData.Team))" Width="200px" Title="Team" />
    </GridColumns>
</TelerikGrid>

@code {
    void OnRowRenderHandler(GridRowRenderEventArgs args)
    {
        var item = args.Item as SampleData;

        //conditional applying Class
        if (true)
        {
            args.Class = "myCustomRowFormatting";
        }
    }

    public IEnumerable<SampleData> MyData = Enumerable.Range(1, 30).Select(x => new SampleData
    {
        Id = x,
        Name = "name " + x,
        Team = "team " + x % 5
    });

    public class SampleData
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }
    }
}
2 comments
ADMIN
Nadezhda Tacheva
Posted on: 20 Mar 2023 10:17

Hi Roman,

I've tested the sample and I can confirm the custom class is correctly applied to each row. That said, the issue you are facing is not caused by a bug with the component. A possible reason may be that the selector for this CSS rule is not strong enough.

The solution to that will be to increase the specificity. Here is the modified sample: https://blazorrepl.telerik.com/wdaRmYvk137fGACO11.

Take your time to test adjusting the selectors on your end and please let us know if you are facing any difficulties with that.

In the meantime, I will update the sample in the documentation.

Regards,
Nadezhda Tacheva
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/.

Roman
Posted on: 13 Mar 2023 14:29

Here's what it looks like