Use custom helper inside the loop with templates in ASP.NET Core Grid

The Syncfusion ASP.NET Core Grid allows you to use custom helpers inside the loop with template property of a column. This feature enables you to create complex templates that can incorporate additional helper functions.

The Customer Rating column includes a custom template defined using template. Inside this template, iterates through the item array and generates tag, displayed as stars using the CSS below:

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

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

The class is dynamically assigned based on the rating value, highlighting the stars using the CSS below:

.e-grid .rating .star.checked {
    color: #ffa600;
}

This is demonstrated in the following example:

<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" height="315">
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" textAlign="Right" width="90"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="120"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" width="120"></e-grid-column>
        <e-grid-column field="CustomerRating" headerText="Customer Rating" template="#ratingTemplate" width="100"></e-grid-column>
    </e-grid-columns>
</ejs-grid>
<script type="text/x-template" id="ratingTemplate">
    ${ RatingStars(data.CustomerRating) }
</script>
<script>
    function RatingStars(rating) {
        let ratingHTML = '<span class="rating">';
        for (let i = 1; i <= 5; i++) {
            ratingHTML += `<span class="star ${i <= rating ? 'checked' : ''}"></span>`;
        }
        ratingHTML += '</span>';
        return ratingHTML;
    }
</script>
<style>
    .e-grid .rating .star:before {
        content: '★';
    }

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

    .rating .star.checked {
        color: #ffa600;
    }
</style>
public IActionResult Index()
{
    ViewBag.DataSource = OrderDetails.GetAllRecords();
    return View();
}

custom helper