Setting the NoRecords Template from the Controller

Environment

Product	Progress® Telerik® UI for ASP.NET Core Grid
Product Version	2019.1.220

Description

How can I set the NoRecords template message to content from the controller?

Solution

1. Use a Kendo UI Template and pass the text by using the ViewData setting of the controller.
2. Configure the NoRecords TemplateID of the Grid with the ID of the Kendo UI Template.

css

<style>
    .mystyle {
        color: red;
        font-size: 26px;
    }
</style>

javascript

<div>
    @(Html.Kendo().Grid<NoRecordsExample.Models.OrderViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
            columns.Bound(p => p.OrderID).Filterable(false);
            columns.Bound(p => p.Freight);
            columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
            columns.Bound(p => p.ShipName);
            columns.Bound(p => p.ShipCity);
        })
        .Pageable()
        .NoRecords(e => e.TemplateId("myTemplate"))
        .Sortable()
        .Scrollable()
        .Filterable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Orders_Read", "Grid"))
        )
    )
</div>

<script type="text/x-kendo-template" id="myTemplate">
    <div class="mystyle">@ViewData["NoRecords"]</div>
</script>

c#

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewData["NoRecords"] = "Custom No Data Message";
        return View();
    }
}

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Overview of the Kendo UI Templates
• Official Microsoft Documentation of ViewData
• API Reference of Kendo.Mvc.UI.Fluent.GridNoRecordsSettingsBuilder
• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base