Edit this page

Configure the NoRecords Data Attribute for Empty Grids

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
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

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy