This is a migrated thread and some comments may be shown as answers.

Alternate column color

2 Answers 805 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Gerhard
Top achievements
Rank 1
Veteran
Gerhard asked on 12 Feb 2021, 02:33 PM

Hi,

How could I get alternate COLUMN colors? Note, not alternate ROW colors.

 

In actual fact, I don't just want alternating column colors, I want column 1 and 2 to have the same color, 3 and 4 a different color, then 5 and 6 the same as 1 and 2 and so on. Also, I want a cell to be completely filled with the particular color so I figure I have to work on the <td> level.

I thought I had it by hooking the OnCellRender event but my logic falls apart when you start clicking on the grid! None of the properties on the GridCellRenderEventArgs object tells you which column's cell is being rendered. The Item property contains the entire row context. Unfortunately the cell value does not contain any information either in my case to identify the column of it's index.

Thanks,

Gerhard

2 Answers, 1 is accepted

Sort by
0
Eric R | Senior Technical Support Engineer
Telerik team
answered on 16 Feb 2021, 05:37 PM

Hi Gerhard,

Thank you for the detailed description of the issue. I was able to reproduce the same behavior. The way around this is to use Lambda Expressions for the OnCellRender event. Let me provide more details and and an example for how to do this below. 

Explanation

Using Lambda Expressions adds more flexibility to Event Handlers in Blazor. For example, instead of only passing the GridCellRenderEventArgs to the OnCellRender event, also include a columnNumber argument. Let me show what that would look like.

Grid Markup OnCellRender with Lambda

The highlighted event shows how to add an additional argument to the OnCellRenderHandler.

<TelerikGrid Data=@Products>
    <GridColumns>
        <GridColumn Field="@(nameof(Product.ProductId))" Title="ID" Editable="false" OnCellRender="@((GridCellRenderEventArgs e) => OnCellRenderHandler(e, 1))" />
        <GridColumn Field="@(nameof(Product.ProductName))" Title="Name" OnCellRender="@((GridCellRenderEventArgs e) => OnCellRenderHandler(e, 2))" />
        <GridColumn Field="@(nameof(Product.UnitsInStock))" Title="Units In Stock" OnCellRender="@((GridCellRenderEventArgs e) => OnCellRenderHandler(e, 3))" />
        <GridColumn Field="@(nameof(Product.Discontinued))" Title="Available?" OnCellRender="@((GridCellRenderEventArgs e) => OnCellRenderHandler(e, 4))" />
        <GridColumn Field="@(nameof(Product.UnitPrice))" Title="Unit Price" OnCellRender="@((GridCellRenderEventArgs e) => OnCellRenderHandler(e, 5))" />
    </GridColumns>
</TelerikGrid>

Code for OnCellRender

public void OnCellRenderHandler(GridCellRenderEventArgs args, int columnNumber)
{
    if(columnNumber % 2 == 0 )
    {
        args.Class = "EvenCellFormatting";
    }
    else
    {
        args.Class = "OddCellFormatting";
    }
}

Styles for Alternating Columns

<style>
    .OddCellFormatting {
        background-color: red;
        color: white;
        font-size: 10px;
    }

    .EvenCellFormatting {
        background-color: blue;
        color: white;
        font-size: 10px;
    }
</style>

Output

Wrapping Up

For additional reference, I have attached a page that illustrates the above approach that can be added to any project. 

Please let me know if you need any additional information. Thank you for using the Blazor Forums.

Regards,


Eric R | Senior Technical Support Engineer
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/.

0
Gerhard
Top achievements
Rank 1
Veteran
answered on 17 Feb 2021, 08:35 AM

Hi Eric,

Thank you for your answer. This is almost what I need. But, you have given me the part that I needed to do what I want - a way to pass the column number to the event handler.

Much appreciated.

Regards,

Gerhard

Tags
Grid
Asked by
Gerhard
Top achievements
Rank 1
Veteran
Answers by
Eric R | Senior Technical Support Engineer
Telerik team
Gerhard
Top achievements
Rank 1
Veteran
Share this question
or