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
- Hook up for the
DataBoundevent of the Spreadsheet. - Traverse the rows, and if the record meets the condition, recolor all the cells in the row by using the
backgroundmethod of therangeobject.
@(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");
});
});
})
)
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.