Highlighting Rows in the Spreadsheet Conditionally

Environment

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

Description

How to highlight rows conditionally in the Telerik UI for ASP.NET MVC 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.

Index.cshtml

    @(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");
                    });
                });
        })
    )

Script.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 MVC Spreadsheet Resources

• ASP.NET MVC Spreadsheet Documentation

• ASP.NET MVC Spreadsheet Demos

• ASP.NET MVC Spreadsheet Product Page

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

• Telerik UI for ASP.NET MVC Forums

See Also

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