Infragistics｜Ultimate UI Blazor｜更改 DataGrid 中任意行的背景色和文字顏色

707 瀏覽人次

2023-02-15 更新

IgbDataGrid 是一個已經棄用的控件。請改用IgbGrid 。如果您對如何在IgbGrid中實現有任何疑問，請聯繫我們的技術支援。

要更改 DataGrid 特定行的樣式，例如背景顏色或文字顏色，請編寫更改單元格樣式的 JavaScript 並將其設置為每列的 DataBoundScript。下面是一個示例代碼，它根據“ProductName”單元格的值更改行的背景顏色和文本顏色。值為“Item1”的行的文本顏色為藍色，值為“Item2”的行的背景顏色為綠色。

Razor

<DataGrid Height="100%"           Width="100%"           @ref="DataGridRef"           DataSource="DataSource"           AutoGenerateColumns="false">     <NumericColumn Field="ProductID" HeaderText="Product ID" DataBoundScript="onColumnDataBound" />     <TextColumn Field="ProductName" HeaderText="Product Name" DataBoundScript="onColumnDataBound" />     <NumericColumn Field="Price" HeaderText="Price" DataBoundScript="onColumnDataBound" />     <DateTimeColumn Field="OrderDate" HeaderText="Order Date" DataBoundScript="onColumnDataBound" /> </DataGrid>

Javascript

function onColumnDataBound(column, args) {     if (args.rowObject.ProductName == "Item1") {         args.cellInfo.textColor = "blue";     }     else {         args.cellInfo.textColor = '#181d1f';     }     if (args.rowObject.ProductName == "Item2") {         args.cellInfo.background = "green";     }     else {         args.cellInfo.background = 'white';     } } igRegisterScript("onColumnDataBound", onColumnDataBound, false);