{"id":4199,"date":"2016-12-29T18:17:28","date_gmt":"2016-12-29T12:47:28","guid":{"rendered":"https:\/\/www.inogic.com\/blog\/?p=4199"},"modified":"2021-12-15T16:19:46","modified_gmt":"2021-12-15T10:49:46","slug":"events-in-dynamics-365-editable-grid","status":"publish","type":"post","link":"https:\/\/www.inogic.com\/blog\/2016\/12\/events-in-dynamics-365-editable-grid\/","title":{"rendered":"Events in Dynamics 365 Editable Grid"},"content":{"rendered":"<p><strong>Introduction:<\/strong><\/p>\n<p style=\"text-align: justify;\">Dynamics 365 was introduced with lots of useful new features and improvements over the previous versions. Editable grid is one of the most requested feature by Dynamics CRM users. Editable grid provides the ability to register events, so you can execute your business logic.<\/p>\n<p style=\"text-align: justify;\">Let us explore this feature in detail:<\/p>\n<p style=\"text-align: justify;\">You can register Data Events or UI Events as seen in the screenshot below;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-4200\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/17.jpg\" alt=\"1\" width=\"774\" height=\"388\" \/><\/p>\n<p>Different events that can be registered are:<\/p>\n<p><strong>OnChange:<\/strong><\/p>\n<p>Similar to the OnChange event of the other controls, this event fires when the value of a cell in the grid is changed and you tab out of it. Note tab out is important for the event to fire. This event will also auto-fire when a setValue call is used to set the value of any column in the grid.<\/p>\n<p><strong>OnRecordSelect:<\/strong><\/p>\n<p>This will fire when the user moves across rows in the grid. This will not fire if you select multiple rows from the grid.<\/p>\n<p><strong>OnSave:<\/strong><\/p>\n<p>OnSave automatically triggers on the following<\/p>\n<ul>\n<li>Save button on the editable grid is explicitly clicked.<\/li>\n<li>You navigate across rows in the grid.<\/li>\n<li>Any action like sort, filter, grouping that causes the grid to reload\/refresh.<\/li>\n<\/ul>\n<p><strong>Example using Onchange:<\/strong><\/p>\n<p>We can use JavaScript to perform a business logic. Suppose we have a requirement to calculate the margin % and set it into the margin field in Opportunity. We have developed the JavaScript and added on the form. To achieve the same in Editable grid, we have to register the JavaScript, OnChange of the Price and Cost fields. Now, when the user sets or updates the Price or Cost, then our script will fire, calculate the margin and populate it into the margin field of Opportunity.<\/p>\n<p>In the below screenshot, we have added the required scripts and registered the Price and Cost field OnChange event;<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-4201\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/26-1024x537.jpg\" alt=\"2\" width=\"665\" height=\"348\" \/><\/p>\n<p>The code to achieve this functionality is mentioned below;<\/p>\n<pre class=\"lang:default decode:true  \">function calculateMargin() {\r\n    var selectedRow = null;\r\n    var attributeColl = null;\r\n    var price;\r\n    var cost;\r\n    var margin;\r\n\r\n    try {\r\n\r\n        \/\/get the selected rows - use the getControl method and pass the grid name.\r\n        selectedRow = Xrm.Page.getControl(\"crmGrid\").getGrid().getSelectedRows();\r\n\r\n        \/\/loop through rows and get the attribute collection\r\n        selectedRow.forEach(function (row, rowIndex) {\r\n\r\n            \/\/get the attribute Collection\r\n            attributeColl = row.getData().getEntity().attributes;\r\n\r\n            \/\/loop through attribute Collection and do the calculation and set the \r\n            attributeColl.forEach(function (att, attIndex) {\r\n\r\n                switch (att.getName()) {\r\n                    case \"new_price\":\r\n                        \/\/get the value of price\r\n                        if (att.getValue() != null &amp;&amp; att.getValue() != 'undefined') {\r\n                            price = parseFloat(att.getValue());\r\n                        }\r\n                        break;\r\n                    case \"new_cost\":\r\n                        \/\/get the value of cost\r\n                        if (att.getValue() != null &amp;&amp; att.getValue() != 'undefined') {\r\n                            cost = parseFloat(att.getValue());\r\n                        }\r\n                        break;\r\n\r\n                    case \"new_margin\":\r\n\r\n                        \/\/calculate the margin\r\n                        margin = parseFloat([(price - cost) \/ cost]) * 100;\r\n                        \r\n                        \/\/set the margin value\r\n                        if(margin != \"NaN\") {\r\n                            att.setValue(margin);\r\n\r\n                            \/\/get the margin control to set it as read only.\r\n                            var marginControl = att.controls;\r\n\r\n                            marginControl.forEach(function (ctl, attIndex) {\r\n                                ctl.setDisabled(true);\r\n                            });\r\n                        }\r\n\r\n                        if (margin &lt; 0) {                          \r\n                            Xrm.Utility.alertDialog(\"Cost should not be more than Price\");\r\n                        }                       \r\n                        break;\r\n                }\r\n\r\n            });\r\n        });\r\n    } catch (e) {\r\n        Xrm.Utility.alertDialog(e.message);\r\n    }\r\n}\r\n<\/pre>\n<p>When user updates the price or cost, then the margin will auto populate as shown in below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-4202\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/35-1024x214.jpg\" alt=\"3\" width=\"665\" height=\"138\" \/><\/p>\n<p><strong>Example using OnRecordSelect<\/strong><\/p>\n<p>We have another requirement where if the Margin is less than &#8216;0&#8217;\u00a0then we want to alert the user. To achieve this, we developed the script and registered OnRecordSelect event as shown in below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-4203\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/43-1024x543.jpg\" alt=\"4\" width=\"665\" height=\"352\" \/><\/p>\n<p>When the user selects the grid row, the script will fire if the margin is less than\u00a0&#8216;0&#8217; and it shows an alert, as shown\u00a0in the below screenshot.<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-large wp-image-4204\" src=\"https:\/\/www.inogic.com\/blog\/wp-content\/uploads\/2016\/12\/53-1024x393.jpg\" alt=\"5\" width=\"665\" height=\"255\" \/><\/p>\n<p><em><strong>Note<\/strong>: If we have a business rule associated with the cost and price field, they would be executed as well.<\/em><\/p>\n<p><strong>Conclusion:<\/strong><\/p>\n<p style=\"text-align: justify;\">Editable grids in Dynamics 365 enable users to edit the data, right in the grid, with few clicks! Events in editable grids add to the functionality of this feature.<\/p>\n<h2 style=\"text-align: left;\"><div class=\"su-heading su-heading-style-default su-heading-align-center\" id=\"\" style=\"font-size:15px;margin-bottom:5px\"><div class=\"su-heading-inner\">Cut short 90% of your manual work and repetitive data entry!<\/div><\/div><\/h2>\n<p style=\"text-align: left;\"><em>Get 1 Click apps and say goodbye to all repetitive data entry in CRM &#8211;<\/em><br \/>\n<em><strong><a href=\"https:\/\/bit.ly\/3oH7dYw\" target=\"_blank\" rel=\"noopener noreferrer\">Click2Clone<\/a> <\/strong>\u2013 Clone\/Copy Dynamics 365 CRM records in 1 Click<\/em><br \/>\n<em><strong><a href=\"https:\/\/bit.ly\/3EPjAYc\" target=\"_blank\" rel=\"noopener noreferrer\">Click2Export<\/a><\/strong> \u2013 Export Dynamics 365 CRM Report\/CRM Views\/Word\/Excel template in 1 Click<\/em><br \/>\n<em><strong><a href=\"https:\/\/bit.ly\/3EN8h2v\" target=\"_blank\" rel=\"noopener noreferrer\">Click2Undo<\/a><\/strong> \u2013 Undo &amp; Restore Dynamics 365 CRM data in 1 Click<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Introduction: Dynamics 365 was introduced with lots of useful new features and improvements over the previous versions. Editable grid is one of the most requested feature by Dynamics CRM users. Editable grid provides the ability to register events, so you can execute your business logic. Let us explore this feature in detail: You can register\u2026 <span class=\"read-more\"><a href=\"https:\/\/www.inogic.com\/blog\/2016\/12\/events-in-dynamics-365-editable-grid\/\">Read More &raquo;<\/a><\/span><\/p>\n","protected":false},"author":13,"featured_media":4207,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"om_disable_all_campaigns":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[16,26],"tags":[552,630,714],"class_list":["post-4199","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-dynamics-365","category-editable-grid","tag-dynamics-365-editable-grid","tag-dynamics-crm-editable-grid","tag-editable-grid-events"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4199","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/users\/13"}],"replies":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/comments?post=4199"}],"version-history":[{"count":0,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/posts\/4199\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media\/4207"}],"wp:attachment":[{"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/media?parent=4199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/categories?post=4199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.inogic.com\/blog\/wp-json\/wp\/v2\/tags?post=4199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}