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

13 Mar 20252 minutes to read

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