Bootstrap Archives - Microsoft Dynamics 365 Blog http://microsoftdynamics.in/category/bootstrap/ Microsoft Dynamics CRM . Microsoft Power Platform Fri, 24 Apr 2020 15:10:44 +0000 en-US hourly 1 https://wordpress.org/?v=6.6.1 https://i0.wp.com/microsoftdynamics.in/wp-content/uploads/2020/04/cropped-Microsoftdynamics365-blogs.png?fit=32%2C32 Bootstrap Archives - Microsoft Dynamics 365 Blog http://microsoftdynamics.in/category/bootstrap/ 32 32 176351444 Telerik Kendo UI: Get sum and average of selected items of a grid in alert / Field / popup for specific columns http://microsoftdynamics.in/2018/02/20/telerik-kendo-ui-get-sum-and-average-of-selected-items-of-a-grid-in-alert-field-popup-for-specific-columns/ Tue, 20 Feb 2018 13:48:00 +0000 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....

The post Telerik Kendo UI: Get sum and average of selected items of a grid in alert / Field / popup for specific columns appeared first on Microsoft Dynamics 365 Blog.

]]>

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

The post Telerik Kendo UI: Get sum and average of selected items of a grid in alert / Field / popup for specific columns appeared first on Microsoft Dynamics 365 Blog.

]]> 2741