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.
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();
