Highlighting Rows in the Spreadsheet Conditionally

Environment

Product	Telerik UI for ASP.NET Core Spreadsheet
Progress Telerik UI for ASP.NET Core version	Created with the 2022.2.621 version

Description

How to highlight rows conditionally in the Telerik UI for ASP.NET Core Spreadsheet?

Solution

1. Hook up for the DataBound event of the Spreadsheet.
2. Traverse the rows, and if the record meets the condition, recolor all the cells in the row by using the background method of the range object.

Razor

    @(Html.Kendo().Spreadsheet()
        .Name("spreadsheet")
        .HtmlAttributes(new { style = "width:100%" })
        .Events(e => e
            .DataBound("onDataBound")
        )
        .Sheets(sheets =>
        {
            sheets.Add()
                .Name("Products")
                .DataSource<Kendo.Mvc.Examples.Models.SpreadsheetProductViewModel>(ds => ds
                    .Custom()
                    .Batch(true)
                    .Transport(t => t
                        .Read("onRead")
                    )
                    .Events(e => e.Change("onChange"))
                    .Schema(s => s
                        .Model(m =>
                        {
                            m.Id(p => p.ProductID);
                        })
                    )
                )
                .Columns(columns =>
                {
                    columns.Add().Width(100);
                    columns.Add().Width(415);
                    columns.Add().Width(145);
                    columns.Add().Width(145);
                    columns.Add().Width(145);
                })
                .Rows(rows =>
                {
                    rows.Add().Height(40).Cells(cells =>
                    {
                        cells.Add()
                            .Bold(true)
                            .Background("#9c27b0")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");

                        cells.Add()
                            .Bold(true)
                            .Background("#9c27b0")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");

                        cells.Add()
                            .Bold(true)
                            .Background("#9c27b0")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");

                        cells.Add()
                            .Bold(true)
                            .Background("#9c27b0")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");

                        cells.Add()
                            .Bold(true)
                            .Background("#9c27b0")
                            .TextAlign(SpreadsheetTextAlign.Center)
                            .Color("white");
                    });
                });
        })
    )

JS

    function onDataBound(e) {
        var data=e.sheet.dataSource.view();
        data.forEach((item, ind)=>{
            if(item.Discontinued){
                var range = e.sheet.range(`A${ind+2}:E${ind+2}`);
                range.background("red");
            }
        })
        console.log("Data has been bound to sheet ", );
    }

For the complete implementation of the suggested approach, refer to the following Telerik REPL example.

More ASP.NET Core Spreadsheet Resources

• ASP.NET Core Spreadsheet Documentation

• ASP.NET Core Spreadsheet Demos

• ASP.NET Core Spreadsheet Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Telerik REPL: Highlighting Rows in the Spreadsheet Conditionally
• Client-Side API Reference of the Spreadsheet for ASP.NET Core
• Server-Side API Reference of the Spreadsheet for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base