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

infragistics log


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);





延伸閱讀
aa71435723的大頭照
Winston

Eggplant DAI 自動化測試專家。

留言