Configure the NoRecords Data Attribute for Empty Grids

Environment

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

Description

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

Solution

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!'}">
</div>

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

Important

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


      <script>
        var viewModel = kendo.observable({
          products: new kendo.data.DataSource({
            schema: {
              model: {
                id: "ProductID",
                fields: {
                  ProductName: { type: "string" },
                  UnitPrice: { type: "number" }
                }
              }
            },
            transport: {
              read: {
                url: "https://demos.telerik.com/kendo-ui/service/products",
                dataType: "jsonp"
              }
            }
          })
        });
        kendo.bind($("#example"), viewModel);
      </script>
    </div>

See Also

• Kendo Grid MVVM Demo
• Documentation on the data Attribute Initialization