Conditional css class for grid row

[jumppard]

Is it possible to customise the row color in the grid?

My scenario:
I have a grid of Employees. Each Employee has 2 properties (name, type), where type property may have following values: 'internal','external'. My intention is to change row color by type property's value with following logic:

If type = 'internal' then row color should be green.
If type = 'external' then row color should be yellow.

[gvreddy04]

@jumppard The grid doesn't support conditional row color updates. But we can add custom logic for it. Please see the below example.

GridDemo.razor

...

<GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id">
    @context.Id
    @if (context.Id <= 105)
    {
        <span class="internal"></span>
    }
    else if (context.Id > 105)
    {
        <span class="external"></span>
    }
</GridColumn>

...

@code {

    ...

    [Inject] protected IJSRuntime JS { get; set; }

    protected override void OnAfterRender(bool firstRender)
    {
        Task.Run(async () => await JS.InvokeVoidAsync("changeRowColor"));
    }

   ...
}

GridDemo.js

function changeRowColor() {
    let internalElements = document.querySelectorAll('span.internal');
    if (internalElements) {
        internalElements.forEach((element) => {
            let parent = element.parentNode.parentNode;
            parent.classList.add('bg-success');
            parent.classList.add('text-white');
            parent.classList.add('bg-opacity-75');
        });
    }

    let externalElements = document.querySelectorAll('span.external');
    externalElements.forEach((element) => {
        let parent = element.parentNode.parentNode;
        parent.classList.add('bg-warning');
        parent.classList.add('text-dark');
        parent.classList.add('bg-opacity-75');
    });
}

[jumppard]

@gvreddy04

Thx for the code reference. To make that work, I needed to add my custom js file into wwwroot folder and reference this file in _Host.cshtml as well.

After that, the row colors were successfully changed so all good. But when I go to the next page in table, the row colors resets to default values.

Is there any way how to solve this problem?

Many thx in advance for help!

[gvreddy04]

@jumppard I tried the below approach

<Grid @ref="grid" TItem="Shop" class="table table-hover table-bordered"
      DataProvider="ShopsDataProvider"
      GridSettingsChanged="OnGridSettingsChanged"
      ...
</Grid>

private async Task OnGridSettingsChanged(GridSettings settings)
{
    await JS.InvokeVoidAsync("changeRowColor");
}

This approach is not supported now because of the grid life cycle events. We will support custom row color changes in the next version. To support the above approach, we have to make a few changes to the grid. So we will plan an enhancement to the grid.

Watch out for the 1.5.0/1.5.1 release.

[jumppard]

@gvreddy04
Ok, I understand. Anyway, for now, I deactivated paging and filtering features (AllowFiltering="false" AllowPaging="false") in Grid. In that case, the color is not being reset to default value, which is good.

[gvreddy04]

@jumppard We are adding this feature in the v1.6.0 release.

[gvreddy04]

@jumppard This feature is released as part of v1.6.0.

Conditional css class for grid row:

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

<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      PageSize="5"
      AllowSorting="true"
      Responsive="true"
      RowClass="GetRowClass">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Active" PropertyName="IsActive" SortKeySelector="item => item.IsActive">
        @context.IsActive
    </GridColumn>

</Grid>

@code {
    private IEnumerable<Employee1> employees;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private string GetRowClass(Employee1 emp)
    {
        if (!emp.IsActive)
            return "table-danger";
        else if (emp.Designation == "Architect")
            return "table-success";

        return string.Empty;
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }
}

Conditional css class for grid column

Link: https://demos.blazorbootstrap.com/grid#conditional-css-class-for-grid-column

<Grid TItem="Employee1"
      Class="table table-hover table-bordered"
      DataProvider="EmployeesDataProvider"
      AllowFiltering="true"
      AllowPaging="true"
      PageSize="5"
      AllowSorting="true"
      Responsive="true">

    <GridColumn TItem="Employee1" HeaderText="Id" PropertyName="Id" SortKeySelector="item => item.Id">
        @context.Id
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Employee Name" PropertyName="Name" SortKeySelector="item => item.Name">
        @context.Name
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="Designation" PropertyName="Designation" SortKeySelector="item => item.Designation">
        @context.Designation
    </GridColumn>
    <GridColumn TItem="Employee1" HeaderText="DOJ" PropertyName="DOJ" SortKeySelector="item => item.DOJ">
        @context.DOJ
    </GridColumn>
    <GridColumn TItem="Employee1"
                HeaderText="Active"
                PropertyName="IsActive"
                SortKeySelector="item => item.IsActive"
                ColumnClass="@(x => x.IsActive ? "table-success" : "table-danger")">
        @context.IsActive
    </GridColumn>

</Grid>

@code {
    private IEnumerable<Employee1> employees;

    private async Task<GridDataProviderResult<Employee1>> EmployeesDataProvider(GridDataProviderRequest<Employee1> request)
    {
        if (employees is null) // pull employees only one time for client-side filtering, sorting, and paging
            employees = GetEmployees(); // call a service or an API to pull the employees

        return await Task.FromResult(request.ApplyTo(employees));
    }

    private IEnumerable<Employee1> GetEmployees()
    {
        return new List<Employee1>
        {
            new Employee1 { Id = 107, Name = "Alice", Designation = "AI Engineer", DOJ = new DateOnly(1998, 11, 17), IsActive = true },
            new Employee1 { Id = 103, Name = "Bob", Designation = "Senior DevOps Engineer", DOJ = new DateOnly(1985, 1, 5), IsActive = true },
            new Employee1 { Id = 106, Name = "John", Designation = "Data Engineer", DOJ = new DateOnly(1995, 4, 17), IsActive = true },
            new Employee1 { Id = 104, Name = "Pop", Designation = "Associate Architect", DOJ = new DateOnly(1985, 6, 8), IsActive = false },
            new Employee1 { Id = 105, Name = "Ronald", Designation = "Senior Data Engineer", DOJ = new DateOnly(1991, 8, 23), IsActive = true },
            new Employee1 { Id = 102, Name = "Line", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 101, Name = "Daniel", Designation = "Architect", DOJ = new DateOnly(1977, 1, 12), IsActive = true },
            new Employee1 { Id = 113, Name = "Merlin", Designation = "Senior Consultant", DOJ = new DateOnly(1989, 10, 2), IsActive = true },
            new Employee1 { Id = 117, Name = "Sharna", Designation = "Data Analyst", DOJ = new DateOnly(1994, 5, 12), IsActive = true },
            new Employee1 { Id = 108, Name = "Zayne", Designation = "Data Analyst", DOJ = new DateOnly(1991, 1, 1), IsActive = true },
            new Employee1 { Id = 109, Name = "Isha", Designation = "App Maker", DOJ = new DateOnly(1996, 7, 1), IsActive = true },
            new Employee1 { Id = 111, Name = "Glenda", Designation = "Data Engineer", DOJ = new DateOnly(1994, 1, 12), IsActive = true },
        };
    }
}