New to Kendo UI for jQuery? Download free 30-day trial

Configure the NoRecords Data Attribute for Empty Grids


Product Progress® Kendo UI® Grid for jQuery
Product Version 2018.2.516


How can I determine the equivalency for the noRecords.template which uses data attributes for a Kendo UI MVVM Grid?


To set the noRecords.template use the data-no-records data attribute.

<div data-role="grid"      
      data-no-records="{ template : '<br /><br />Here is my No Records Message!'}">

The following example demonstrates how to implement a custom noRecords template in a Grid with no bound data.


The camelCase data attribute options are set by using dash separators. For example, the noRecords configuration of the Kendo UI Grid is set like data-no-records.

    <div id="example">
        <h4>Add or update a record</h4>
        <!--For DataSource, add: data-bind="source: products" -->
        <div data-role="grid"
                           { 'field': 'ProductName', 'width': 270 },
                           { 'field': 'UnitPrice' },
             data-no-records="{ template : '<br /><br />Here is my No Records Message!'}"            
             style="height: 200px">

        var viewModel = kendo.observable({
          products: new{
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductName: { type: "string" },
                  UnitPrice: { type: "number" }
            transport: {
              read: {
                url: "",
                dataType: "jsonp"
        kendo.bind($("#example"), viewModel);

See Also

In this article