Syncfusion AI Assistant

How can I help you?

Use custom helper inside the loop with templates

3 Dec 20257 minutes to read

The Syncfusion® Blazor DataGrid supports using custom helpers inside the loop within a column Template. This enables building flexible templates that incorporate additional logic and helper functions.

The following example renders a customer rating column with a custom template. Inside the template, the code iterates over a fixed range and generates star elements. The IsRatingGreater helper method determines which stars to highlight.

.e-grid .rating .star:before {
    content: '★';
}

.e-grid .rating .star {
    font-size: 132%;
    color: lightgrey;
}

The highlighted state is applied based on the result of the IsRatingGreater method:

.e-grid .rating .star.checked {
    color: #ffa600;
}
@using Syncfusion.Blazor.Grids
@using System.Linq

<SfGrid DataSource="@Orders" Height="300px">
    <GridColumns>
        <GridColumn Field="OrderID" HeaderText="Order ID" TextAlign="TextAlign.Right" Width="90"></GridColumn>
        <GridColumn Field="CustomerID" HeaderText="Customer ID" Width="100"></GridColumn>
        <GridColumn HeaderText="Customer Rating" Width="120">
            <Template>
                @{
                    var rating = (context as Order)?.Rating ?? 0;
                }
                <div class="rate" aria-label="@($"{rating} out of 5 stars")">
                    <div class="rating">
                        @foreach (var i in Enumerable.Range(1, 5))
                        {
                            <span class="star @(IsRatingGreater(rating, i) ? "checked" : "")"></span>
                        }
                    </div>
                </div>
            </Template>
        </GridColumn>
    </GridColumns>
</SfGrid>

<style>
    .e-grid .rating .star:before {
        content: '★';
    }

    .e-grid .rating .star {
        font-size: 132%;
        color: lightgrey;
    }

    .e-grid .rating .star.checked {
        color: #ffa600;
    }
</style>

@code {
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
         Orders = Order.GetAllRecords();
    }

    private bool IsRatingGreater(int dataRating, int comparisonValue)
    {
        return dataRating >= comparisonValue;
    }
}
public class Order
{
    public int OrderID { get; set; }
    public string CustomerID { get; set; }
    public int Rating { get; set; }

    public static List<Order> GetAllRecords()
    {
        return new List<Order>
        {
            new Order { OrderID = 1001, CustomerID = "ALFKI", Rating = 3 },
            new Order { OrderID = 1002, CustomerID = "ANATR", Rating = 5 },
            new Order { OrderID = 1003, CustomerID = "ANTON", Rating = 2 },
            new Order { OrderID = 1004, CustomerID = "AROUT", Rating = 4 },
            new Order { OrderID = 1005, CustomerID = "BERGS", Rating = 1 },
            new Order { OrderID = 1006, CustomerID = "BLAUS", Rating = 5 },
            new Order { OrderID = 1007, CustomerID = "BLONP", Rating = 3 },
            new Order { OrderID = 1008, CustomerID = "BOLID", Rating = 2 },
            new Order { OrderID = 1009, CustomerID = "BONAP", Rating = 4 },
            new Order { OrderID = 1010, CustomerID = "BOTTM", Rating = 3 },
            new Order { OrderID = 1011, CustomerID = "BSBEV", Rating = 5 },
            new Order { OrderID = 1012, CustomerID = "CACTU", Rating = 1 },
            new Order { OrderID = 1013, CustomerID = "CENTC", Rating = 4 }
        };
    }
}