Reply To: DataGrid CellsCSSRules Property Not Working in Blazor Implementation

[Markov]

Hi Duong,

Please, find below a full Blazor demo for this:

@page "/grid-basic"
@inject IJSRuntime JS

<style>
	body,
	html,
	app {
	height: 100%;
	}

	app {
	overflow: auto;
	}

	.content {
	height: calc(100% - 70px);
	}

	/* This is the CSS used in the demo */
	smart-grid {
	height: auto;
	width: 100%;
	}
</style>

<Grid Id="myGrid" DataSource="@Data" @ref="gridRef">
    <Columns>
        <Column Label="First Name" DataField="firstName" />
        <Column Label="Last Name" DataField="lastName" />
        <Column Label="Product" DataField="productName" Width="200" />
        <Column Label="Quantity" DataField="quantity" Width="100" />
        <Column Label="Unit Price" DataField="price" Width="100" CellsFormat="c2" />
        <Column Label="Total" DataField="total" CellsFormat="c2" />
    </Columns>
</Grid>

@code {
    public class CustomCellSettings
    {
        public object Value { get; set; }
    }
    private Grid gridRef;

    // Sample data
    private IEnumerable<object> Data = new List<object>
    {
        new { firstName = "John", lastName = "Doe", productName = "Phone", quantity = 3, price = 199.99, total = 599.97 },
        new { firstName = "Jane", lastName = "Smith", productName = "Laptop", quantity = 5, price = 999.99, total = 4999.95 },
        new { firstName = "Alice", lastName = "Brown", productName = "Tablet", quantity = 7, price = 299.99, total = 2099.93 }
    };

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JS.InvokeVoidAsync("setGridCellCssRules", "myGrid");
        }
    }
}

and

    <style>
        .cell-class-1 {
            background-color: #fff3cd; /* Yellow-ish for value == 5 */
            font-weight: bold;
        }

        .cell-class-2 {
            background-color: #f8d7da; /* Light red for value < 5 */
        }

        .cell-class-3 {
            background-color: #d4edda; /* Light green for value > 5 */
        }
        smart-grid {
            --smart-check-box-default-size: 14px;
        }

            smart-grid .smart-input-overlay-on {
                display: none;
            }
    </style>
<script>
        window.setGridCellCssRules = function (gridId) {
            const grid = document.getElementById(gridId);

            if (!grid) return;

            grid.whenRendered(() => {
                 const quantityColumn = grid.columns.find(c => c.dataField === 'quantity');

                if (quantityColumn) {
                    quantityColumn.cellsCSSRules = {
                        'cell-class-1': function (settings) {
                            return settings.value === 5;
                        },
                        'cell-class-2': function (settings) {
                            return settings.value < 5;
                        },
                        'cell-class-3': function (settings) {
                            return settings.value > 5;
                        }
                    };
                }

                grid.refresh();
            })
        };
    </script>