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. Required fields are marked *

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