Scenario:
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 :
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
