Blog on software engineering
Show kendo ui grid total record count with MVVM.

Show kendo ui grid total record count with MVVM.

Kendo UI MVVM allows functions of objects to be called in the binding syntax:

<div class="totals"><span>Totals: </span><span data-bind="text: products.data().length"></span></div>

In this case the viewmodel property [products] is a kendo.data.DataSource object.

To get the total count of the records in the DataSource, you can use the function data().

This will return an ObservableArray which has a property length, containing the total record count.

 

image

 

HTML

<!DOCTYPE html> <html> <head> <title>Kendo element binding research page.</title> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.common.min.css" /> <link rel="stylesheet" type="text/css" href="//cdn.kendostatic.com/2014.1.528/styles/kendo.metro.min.css" /> <style> /* Resets */ div, span, i, p, input, select { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; /* Border boxing is used, so the padding, margin and borders are within the width and height of de element. */ color: rgb(112, 112, 112); font-family: Arial, Helvetica, sans-serif; /* For know use default fonts used on google.com stackoverflow.com, telerik.com etc. */ font-size: 13px; margin: 0; /* Margin zero is used to prevent unnecessary white space. */ padding: 0; /* Padding zero is used to prevent unnecessary white space. */ } html, body { height: 100%; max-height: 100%; } body { padding: 20px; } .info { border: 1px solid rgb(128, 128, 128); box-shadow: rgba(0, 0, 0, 0.298039) 0 2px 6px 0, rgba(0, 0, 0, 0.2) 0 -3px 8px 0; padding: 10px; } .totals { margin-top: 20px; font-weight: bold; } </style> </head> <body> <div id="view"> <div class="info"> <script id="productsRowTemplate" type="text/x-kendo-tmpl"> <tr data-uid="#: uid#"> <td>#: Id#</td> <td>#: Name#</td> </tr> </script> <div id="productsGrid" data-role="grid" data-row-template="productsRowTemplate" data-columns="[ { 'field': 'Id' }, { 'field': 'Name' } ]" data-bind="source: products"></div> <div class="totals"><span>Totals: </span><span data-bind="text: products.data().length"></span></div> </div> </div> <!-- Libraries --> <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="//cdn.kendostatic.com/2014.1.528/js/kendo.all.min.js"></script>


<!-- Custom -->
<script type="text/javascript" src="kendo-controller.js"></script> </body> </html>

 

JavaScript (kendo-controller.js)

var kendo = kendo || {};

kendo.controller = (function () {
    var self = {};
    var _vm = null;

    self.show = function () {

        _vm = new kendo.data.ObservableObject({
            products: new kendo.data.DataSource({
                data: new kendo.data.ObservableArray([
                    { Id: 1, Name: "Product 1" },
                    { Id: 2, Name: "Product 2" },
                    { Id: 3, Name: "Product 3" },
                    { Id: 4, Name: "Product 4" },
                    { Id: 5, Name: "Product 5" }
                ])
            })
        });

        kendo.bind($("#view"), _vm);
    };

    return self;
})();

kendo.controller.show();

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.