html Archives - Microsoft Dynamics 365 Blog http://microsoftdynamics.in/category/html/ Microsoft Dynamics CRM . Microsoft Power Platform Fri, 24 Apr 2020 15:10:44 +0000 en-US hourly 1 https://wordpress.org/?v=6.5.5 https://i0.wp.com/microsoftdynamics.in/wp-content/uploads/2020/04/cropped-Microsoftdynamics365-blogs.png?fit=32%2C32&ssl=1 html Archives - Microsoft Dynamics 365 Blog http://microsoftdynamics.in/category/html/ 32 32 176351444 Telerik Kendo UI: Get sum and average of selected items of a grid in alert / Field / popup for specific columns https://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 USE HTML CODE USING JAVASCRIPT IN MSCRM 2011 , MSCRM 2013 https://microsoftdynamics.in/2014/02/19/use-html-code-using-javascript-in-mscrm-2011-mscrm-2013/ Wed, 19 Feb 2014 14:08:00 +0000 http://microsoftdynamics.in/2014/02/19/use-html-code-using-javascript-in-mscrm-2011-mscrm-2013/ function pwd_onchange() {     var fieldTable1 = Xrm.Page.getAttribute( “new_password”).getValue();     fieldTable1.innerHTML = ‘<input tabIndex=”1050″ class=”ms-crm-Text” id=”new_password” style=”ime-mode: auto;”  type=”password” maxLength=”100″ _events=”[object Object]” control=”[object Object]” attrName=”new_password” req=”0″/>’;     Xrm.Page.getAttribute(“new_password” ).setValue(Xrm.Page.getAttribute(“new_password”).innerHTML); } SOURCE : JUST2CODE.IN Subscribe to our YouTube channel : https://www.youtube.com/user/TheRussell2012

The post USE HTML CODE USING JAVASCRIPT IN MSCRM 2011 , MSCRM 2013 appeared first on Microsoft Dynamics 365 Blog.

]]>


function pwd_onchange() {
    var fieldTable1 = Xrm.Page.getAttribute( “new_password”).getValue();
    fieldTable1.innerHTML = ‘<input tabIndex=”1050″ class=”ms-crm-Text” id=”new_password” style=”ime-mode: auto;”  type=”password” maxLength=”100″ _events=”[object Object]” control=”[object Object]” attrName=”new_password” req=”0″/>’;
    Xrm.Page.getAttribute(“new_password” ).setValue(Xrm.Page.getAttribute(“new_password”).innerHTML);
}




SOURCE : JUST2CODE.IN
Subscribe to our YouTube channel : https://www.youtube.com/user/TheRussell2012

The post USE HTML CODE USING JAVASCRIPT IN MSCRM 2011 , MSCRM 2013 appeared first on Microsoft Dynamics 365 Blog.

]]> 2837