Grid Component : Conditional css class for grid row

[joselitogatchalianalonzo]

Based on my own testing, Conditional css class only works if I'm using standard Bootstrap color classes like table-danger, table-primary etc. I want to use my own CSS class for colors not available in Bootstrap. How can I accomplish this task? If you can provide sample code, that would be good.

[gvreddy04]

@joselitogatchalianalonzo Thanks for trying BlazorBootstrap components. Will share a sample code ASAP.

[joselitogatchalianalonzo]

Thanks @gvreddy04 I'll just wait for the sample code.

[gvreddy04]

Default Example: https://demos.blazorbootstrap.com/grid#conditional-css-class-for-grid-row

Now, add the below custom CSS class to your .css file:

.table-row-yellow {
    --bs-table-color: #000;
    --bs-table-bg: #F8D81D;
    --bs-table-border-color: #DFC32A;
    --bs-table-striped-bg: #ECCD89;
    --bs-table-striped-color: #004;
    --bs-table-active-bg: #DFC364;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #E5C865;
    --bs-table-hover-color: #000;
    color: var(--bs-table-color);
    border-color: var(--bs-table-border-color);
}

Update the GetRowClass(.....) method with the new custom CSS class.

    private string GetRowClass(Employee1 emp)
    {
        if (!emp.IsActive)
            return "table-row-yellow"; // custom CSS class
        else if (emp.Designation == "Architect")
            return "table-success";

        return string.Empty;
    }

Output:

Note:

--bs-table-hover-color is a predefined bootstrap CSS variable. CSS varaibles are prefixed with --. Override these variables with the appropriate colors as needed.

[joselitogatchalianalonzo]

Thanks @gvreddy04. I will try the sample code.