From 59ec47ba49938437a7e63156eb32cecc1d084907 Mon Sep 17 00:00:00 2001
From: "Narmatha.SF4450" <narmatha.sameenathan@gmail.com>
Date: Tue, 17 Jun 2025 16:33:13 +0530
Subject: [PATCH 1/2] 855594: Need to update the Core platform toolbar
 documentation sample.

---
 .../pivot-table/toolbar/save-load-json/razor  | 78 ++++++++++++-----
 .../toolbar/save-load-json/tagHelper          | 83 ++++++++++++-------
 2 files changed, 110 insertions(+), 51 deletions(-)

diff --git a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor
index a4aac0b124..ec85ca5b0e 100644
--- a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor
+++ b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor
@@ -13,7 +13,7 @@
 .Filters(filters =>
 {
     filters.Name("Product_Categories").Caption("Product Categories").Add();
-})).GridSettings(new PivotViewGridSettings { ColumnWidth = 140 }).DataBound("ondataBound").Render()
+})).GridSettings(new PivotViewGridSettings { ColumnWidth = 140 }).Render()
 <style>
     #pivotview {
         width: 100%;
@@ -40,29 +40,61 @@
 
 </style>
 <script>
-    function ondataBound(args) {
-        var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
-        var dataSource = JSON.parse(pivotTableObj.getPersistData()).dataSourceSettings.dataSource;
-        var a = document.getElementById('save');
-        var mime_type = 'application/octet-stream'; // text/html, image/png, et c
-        a.setAttribute('download', 'pivot.JSON');
-        a.href = 'data:'+ mime_type +';base64,'+ btoa(JSON.stringify(dataSource) || '');
-        document.getElementById('files').addEventListener('change', readBlob, false);
-    }
-
-    function readBlob(args) {
-        var files = document.getElementById('load').files;
-        var file = files[0];
-        var start = 0;
-        var stop = file.size - 1;
+    // Step 1: Initiate the file uploader
+    var uploadObj = new ej.inputs.Uploader({});
+    uploadObj.appendTo('#fileupload');
+    var input = document.querySelector('input[type="file"]');
+    // Step 2: Add the event listener which fires when the *.CSV file is uploaded.
+    input.addEventListener('change', function (e) {
+        // Step 3: Initiate the file reader
         var reader = new FileReader();
-        reader.onloadend = function(evt) {
-            if (evt.target.readyState == FileReader.DONE) {
-                var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
-                pivotTableObj.dataSource = JSON.parse(evt.target.result);
+        reader.onload = function () {
+            var lines = [];
+            var jsonObject = reader.result.split(/\r?\n|\r/);
+            lines.push(jsonObject[0].split(',').map(function (e) { return e.replace(/ /g, '').replace(/^\"(.+)\"$/, "$1"); }));
+            for (var i = 1; i < jsonObject.length; i++) {
+                if (!ej.base.isNullOrUndefined(jsonObject[i]) && jsonObject[i] !== '') {
+                    lines.push(jsonObject[i].split(','));
+                }
             }
+            console.log(lines)
+            var pivotObj = document.getElementById('PivotView').ej2_instances[0];
+            pivotObj.dataSourceSettings.dataSource = lines;
         };
-        var blob = file.slice(start, stop + 1);
-        reader.readAsBinaryString(blob);
-    }
+        reader.readAsText(input.files[0]);
+    });
+
+    document.addEventListener("DOMContentLoaded", function () {
+                var pivotGridObj = document.getElementById('PivotView').ej2_instances[0];
+                document.getElementById("save").addEventListener("click", function () {
+                    if (pivotGridObj) {
+                        const dataSource = JSON.parse(pivotGridObj.getPersistData()).dataSourceSettings;
+                        const a = document.createElement('a');
+                        const mime_type = 'application/octet-stream';
+                        a.setAttribute('download', 'pivot.JSON');
+                        a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || '');
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                    }
+                });
+
+                document.getElementById("files").addEventListener("change", function (event) {
+                    const input = event.target;
+                    const file = input.files?.[0];
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onloadend = function (evt) {
+                            if (evt.target.readyState === FileReader.DONE) {
+                                const result = evt.target.result;
+                                if (pivotGridObj) {
+                                    pivotGridObj.dataSourceSettings = JSON.parse(result);
+                                }
+                            }
+                        };
+                        reader.readAsText(file);
+                    }
+                    input.value = ''; // Clear the input
+                });
+            });
 </script>
\ No newline at end of file
diff --git a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper
index 1f5a0fff85..5e81ece747 100644
--- a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper
@@ -1,4 +1,4 @@
-<ejs-pivotview id="pivotview" width="100%" height="300" dataBound="ondataBound">
+<ejs-pivotview id="pivotview" width="100%" height="300">
     <e-datasourcesettings dataSource="@ViewBag.DataSource" enableSorting="true">
         <e-formatsettings>
             <e-field name="Amount" format="C0" maximumSignificantDigits="10" minimumSignificantDigits="1" useGrouping="true"></e-field>
@@ -24,11 +24,6 @@
 </ejs-pivotview>
 <a id="save" class="btn btn-primary">Save</a><div class="fileUpload btn btn-primary"><span>Load</span><input id="files" type="file" class="upload" /></div>
 <style>
-    #pivotview {
-        width: 100%;
-        height: 100%;
-    }
-
     .fileUpload {
         position: relative;
         overflow: hidden;
@@ -48,29 +43,61 @@
     }
 </style>
 <script>
-    function ondataBound(args) {
-        var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
-        var dataSource = JSON.parse(pivotTableObj.getPersistData()).dataSourceSettings.dataSource;
-        var a = document.getElementById('save');
-        var mime_type = 'application/octet-stream'; // text/html, image/png, et c
-        a.setAttribute('download', 'pivot.JSON');
-        a.href = 'data:'+ mime_type +';base64,'+ btoa(JSON.stringify(dataSource) || '');
-        document.getElementById('files').addEventListener('change', readBlob, false);
-    }
-
-    function readBlob(args) {
-        var files = document.getElementById('load').files;
-        var file = files[0];
-        var start = 0;
-        var stop = file.size - 1;
+    // Step 1: Initiate the file uploader
+    var uploadObj = new ej.inputs.Uploader({});
+    uploadObj.appendTo('#fileupload');
+    var input = document.querySelector('input[type="file"]');
+    // Step 2: Add the event listener which fires when the *.CSV file is uploaded.
+    input.addEventListener('change', function (e) {
+        // Step 3: Initiate the file reader
         var reader = new FileReader();
-        reader.onloadend = function(evt) {
-            if (evt.target.readyState == FileReader.DONE) {
-                var pivotTableObj = document.getElementById('pivotview').ej2_instances[0];
-                pivotTableObj.dataSource = JSON.parse(evt.target.result);
+        reader.onload = function () {
+            var lines = [];
+            var jsonObject = reader.result.split(/\r?\n|\r/);
+            lines.push(jsonObject[0].split(',').map(function (e) { return e.replace(/ /g, '').replace(/^\"(.+)\"$/, "$1"); }));
+            for (var i = 1; i < jsonObject.length; i++) {
+                if (!ej.base.isNullOrUndefined(jsonObject[i]) && jsonObject[i] !== '') {
+                    lines.push(jsonObject[i].split(','));
+                }
             }
+            console.log(lines)
+            var pivotObj = document.getElementById('PivotView').ej2_instances[0];
+            pivotObj.dataSourceSettings.dataSource = lines;
         };
-        var blob = file.slice(start, stop + 1);
-        reader.readAsBinaryString(blob);
-    }
+        reader.readAsText(input.files[0]);
+    });
+
+    document.addEventListener("DOMContentLoaded", function () {
+                var pivotGridObj = document.getElementById('PivotView').ej2_instances[0];
+                document.getElementById("save").addEventListener("click", function () {
+                    if (pivotGridObj) {
+                        const dataSource = JSON.parse(pivotGridObj.getPersistData()).dataSourceSettings;
+                        const a = document.createElement('a');
+                        const mime_type = 'application/octet-stream';
+                        a.setAttribute('download', 'pivot.JSON');
+                        a.href = 'data:' + mime_type + ';base64,' + btoa(JSON.stringify(dataSource) || '');
+                        document.body.appendChild(a);
+                        a.click();
+                        document.body.removeChild(a);
+                    }
+                });
+
+                document.getElementById("files").addEventListener("change", function (event) {
+                    const input = event.target;
+                    const file = input.files?.[0];
+                    if (file) {
+                        const reader = new FileReader();
+                        reader.onloadend = function (evt) {
+                            if (evt.target.readyState === FileReader.DONE) {
+                                const result = evt.target.result;
+                                if (pivotGridObj) {
+                                    pivotGridObj.dataSourceSettings = JSON.parse(result);
+                                }
+                            }
+                        };
+                        reader.readAsText(file);
+                    }
+                    input.value = ''; // Clear the input
+                });
+            });
 </script>
\ No newline at end of file

From 5d9bfc7a1a0bca395546c7ebf636fb0529420a7b Mon Sep 17 00:00:00 2001
From: "Narmatha.SF4450" <narmatha.sameenathan@gmail.com>
Date: Tue, 17 Jun 2025 16:43:09 +0530
Subject: [PATCH 2/2] 855594: Removed unwanted lines.

---
 .../code-snippet/pivot-table/toolbar/save-load-json/razor        | 1 -
 .../code-snippet/pivot-table/toolbar/save-load-json/tagHelper    | 1 -
 2 files changed, 2 deletions(-)

diff --git a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor
index ec85ca5b0e..e6aac8f7b3 100644
--- a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor
+++ b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/razor
@@ -57,7 +57,6 @@
                     lines.push(jsonObject[i].split(','));
                 }
             }
-            console.log(lines)
             var pivotObj = document.getElementById('PivotView').ej2_instances[0];
             pivotObj.dataSourceSettings.dataSource = lines;
         };
diff --git a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper
index 5e81ece747..ff86646089 100644
--- a/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper
+++ b/ej2-asp-core-mvc/code-snippet/pivot-table/toolbar/save-load-json/tagHelper
@@ -60,7 +60,6 @@
                     lines.push(jsonObject[i].split(','));
                 }
             }
-            console.log(lines)
             var pivotObj = document.getElementById('PivotView').ej2_instances[0];
             pivotObj.dataSourceSettings.dataSource = lines;
         };