Scenario:

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. 

Solution:

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: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" }, 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 = this.select(); var cellOne = selectedCells[0] var colIdx = this.select().index(); 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 :
 https://dojo.telerik.com/@Shashank%20Binjola/EtEwe


Other Useful URLs:

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/change#change

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/select

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/methods/dataitem

Hope It Helps 😊

Happy Coding ✌
SOURCE : mscrm.com