My Photo

Microsoft Dynamics 365

Official Blog for Microsoft Dynamics Functional and Technical Solutions....
Browsing Category " Telerik "

Telerik Kendo UI: Get sum and average of selected items of a grid in alert / Field / popup for specific columns


Recently we were having a requirement to get sum and average of selected items on a grid in either an alert / Field or popup
Such as in the below example I want to get the average and Sum of selected Frieght columns

And also we wanted to allow this feature only on numeric fields. 


We were able to archive the desired result by using the change event, select and the dataItem methods to get the value of the selected cells. Then we used column index to get the selected column. And to restrict the calculation only for numeric column we programmatically remove the k-state-selected class from the desired cells.

Code Snippet :

<script> $(document).ready(function () { $("#grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "" }, schema: { model: { fields: { OrderID: { type: "number" }, Freight: { type: "number" }, ShipName: { type: "string" }, OrderDate: { type: "date" }, ShipCity: { type: "string" } } } }, pageSize: 20 }, height: 550, filterable: true, sortable: true, pageable: true, selectable: "multiple cell", columns: [{ field: "OrderID", filterable: false, selectable: false }, "Freight", { field: "OrderDate", title: "Order Date", format: "{0:MM/dd/yyyy}", selectable: false }, { field: "ShipName", title: "Ship Name", selectable: false }, { field: "ShipCity", title: "Ship City", selectable: false } ] }); var grid = $("#grid").data("kendoGrid"); grid.bind("change", grid_change); }); function grid_change(e) { debugger; var selectedCells =; var cellOne = selectedCells[0] var colIdx =; var colName = $('#grid').find('th').eq(colIdx).text() if (colName === "Freight") { // execute only for number columns var selectedDataItems = []; var sumOfSelectedItems = 0; var averageOfSelectedItems = 0; for (var i = 0; i < selectedCells.length; i++) { var dataItem = this.dataItem(selectedCells[i].parentNode); if ($.inArray(dataItem, selectedDataItems) < 0) { selectedDataItems.push(dataItem); } } for (let i = 0; i < selectedDataItems.length; i++) { sumOfSelectedItems += parseFloat(selectedDataItems[i].Freight); } averageOfSelectedItems = sumOfSelectedItems / (selectedDataItems.length); averageOfSelectedItems = parseFloat(averageOfSelectedItems); alert("Sum : "+ sumOfSelectedItems.toFixed(2)); alert("Average : " + averageOfSelectedItems.toFixed(2)); $("#sumvalue").empty(); $("#sumvalue").append(sumOfSelectedItems.toFixed(2)); $("#Averagevalue").empty(); $("#Averagevalue").append(averageOfSelectedItems.toFixed(2)); $("#calculatedFields").show(); } } </script> </head> <body> <div class="container-fluid"> <div class="row k-header"> <h1> My App</h1> </div> </div> <div class="container-fluid"> <div class="demo-section k-content"> <div id="calculatedFields" style='float: left; display:none;'> <div style='float: left; margin-right: 30px;'> <span id="lblSum"> Sum : </span> <label id="sumvalue"></label> </div> <div style='float: left; margin-right: 30px;'> <span id="lblAverage">Average : </span> <label id="Averagevalue"></label> </div> </div> </div> <div> <div class="row"> <div class="col-xs-18 col-md-12"> <div id="grid"></div> </div> </div> </div> </div> <div class="container-fluid"> <div class="row"> <div class="col-xs-18 col-md-12"> <div id="grid"></div> </div> </div> </div> </body> </html>

Demo URL :

For your reference I made an example demonstrating this requirement :

Other Useful URLs:

Hope It Helps 😊

Happy Coding ✌

Error: NuGet Package Manager 2.8.50126.400 or later is required

 For Visual studio 2013, when I try to create a new project either for Kendo UI ASP .NET MVC 5 Application or for Telerik ASP .Net MVC Application, I get this error message "NuGet Package Manager 2.8.50126.400 or later required".


NuGet Package Manager 2.8.50126.400 or later is required


Download and Install the latest NuGet Package manager for visual studio 2013 from here