documentation(EJ2-67661): UG document to save and load report using database.

Author: Yash58vanth

Javascript/README.md

@@ -1,32 +1,18 @@
-# How to bind MSSQL database to pivot table
+# How to bind MSSQL database to pivot table Save & Load Actions
 
-## Introduction
+A quick start project that shows how to save and load reports from a SQL Server database and load them into the Syncfusion Pivot Table at run time. This repository includes a ASP.NET Core Web App Controller ([MyWebService](../MyWebService/)) for saving and loading reports from a SQL server database, as well as a quick start samples in the JavaScript platform that displays the loaded report in a Syncfusion Pivot Table.
 
-This repository contains client-side Javascript sample for syncfusion pivot table save & load.
+## Project prerequisites
 
-## Prerequesties software
+Before beginning work on the server and client projects, ensure the following software to be installed in the machine.
 
-Make sure that you have the following requirements in your machine before starting to work on the client projects.
+* [git](https://git-scm.com/downloads)
+* [Node.js](https://nodejs.org/en/)
+* [Visual Studio Code](https://code.visualstudio.com/)
+* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/ ) and [.NET Core SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) or later installed on your machine
 
-* git
-* Visual Studio Code (Optional)
-* Visual Studio 2022 (Optional)
+## How to run this application?
 
-## Guide to download
+* To run this application, clone the [Save-and-load-report-from-SQL-database-to-pivot-table](https://github.com/SyncfusionExamples/Save-and-load-report-from-SQL-database-to-pivot-table) repository and then open **MyWebService** in Visual Studio 2022. Simply build and run your project in IIS Express, and it will host and display the URL 'https://localhost:44313'.
 
-* To run this application, you need to clone the `Save-and-load-report-from-SQL-database-to-pivot-table` repository and then navigate to the path where it has been stored in your system.
-
-* To do so, open the command prompt and run the below command.
-
-```
-git clone https://github.com/SyncfusionExamples/Save-and-load-report-from-SQL-database-to-pivot-table
-
-```
-
-## Guide to Run sample
-
-Once done with downloading, follows the steps one after the other.
-
-* Run **MyWebService** (Server-side) Core Api application in Visual Studio to get the API link.
- 
-* Now open the Javascript pivot-table sample and Open the `index.html` file in browser page.
+*  Now open JavaScript sample in Visual Studio Code. Initialize the Pivot Table, map the hosted URL,create a pivot report, and finally, open the **index.html** file in your browser to run your project.

Javascript/pivot-table/index.js

@@ -28,9 +28,6 @@ var pivotTableObj = new ej.pivotview.PivotView({
         report: JSON.stringify(report),
       }),
     })
-      .then(function (res) {
-        return res.json();
-      })
       .then(function (response) {
         pivotTableObj.fetchReport();
       });
@@ -49,9 +46,7 @@ var pivotTableObj = new ej.pivotview.PivotView({
           })
           .then(function (response) {
             updateReport(
-              response.ReportNameList !== ""
-                ? response.ReportNameList.split("__")
-                : []
+              response.length > 0 ? response : []
             );
           });
   },
@@ -68,8 +63,8 @@ var pivotTableObj = new ej.pivotview.PivotView({
         return res.json();
       })
       .then(function (response) {
-        if (response.Report) {
-          var report = JSON.parse(response.Report);
+        if (response) {
+          var report = JSON.parse(response);
           report.dataSourceSettings.dataSource =
             pivotTableObj.dataSourceSettings.dataSource;
           pivotTableObj.dataSourceSettings = report.dataSourceSettings;
@@ -85,9 +80,6 @@ var pivotTableObj = new ej.pivotview.PivotView({
       },
       body: JSON.stringify({ reportName: args.reportName }),
     })
-      .then(function (res) {
-        return res.json();
-      })
       .then(function (response) {
         pivotTableObj.fetchReport();
       });
@@ -104,9 +96,6 @@ var pivotTableObj = new ej.pivotview.PivotView({
         renameReport: args.rename,
       }),
     })
-      .then(function (res) {
-        return res.json();
-      })
       .then(function (response) {
         pivotTableObj.fetchReport();
       });

MyWebService/Controllers/PivotController.cs

@@ -9,9 +9,9 @@ public class PivotController : ControllerBase
     {
         [HttpPost]
         [Route("Pivot/SaveReport")]
-        public IActionResult SaveReport([FromBody] SaveReportDB reportDB)
+        public void SaveReport([FromBody] SaveReportDB reportDB)
         {
-            return Ok((SaveReportToDB(reportDB.ReportName, reportDB.Report)));
+            SaveReportToDB(reportDB.ReportName, reportDB.Report);
         }
 
         [HttpPost]
@@ -23,16 +23,16 @@ public IActionResult FetchReport()
 
         [HttpPost]
         [Route("Pivot/RemoveReport")]
-        public IActionResult RemoveReport([FromBody] ReportDB reportDB)
+        public void RemoveReport([FromBody] ReportDB reportDB)
         {
-            return Ok((RemoveReportFromDB(reportDB.ReportName)));
+            RemoveReportFromDB(reportDB.ReportName);
         }
 
         [HttpPost]
         [Route("Pivot/RenameReport")]
-        public IActionResult RenameReport([FromBody] RenameReportDB reportDB)
+        public void RenameReport([FromBody] RenameReportDB reportDB)
         {
-            return Ok((RenameReportInDB(reportDB.ReportName, reportDB.RenameReport)));
+            RenameReportInDB(reportDB.ReportName, reportDB.RenameReport);
         }
 
         [HttpPost]
@@ -65,120 +65,100 @@ public class ErrorViewModel
             public bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
         }
 
-        public Dictionary<string, object> SaveReportToDB(string reportName, string report)
+        public void SaveReportToDB(string reportName, string report)
         {
-            string conSTR = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
-                + @"\App_Data\Database1.mdf;Integrated Security=True";
+            SqlConnection sqlConn = OpenConnection();
             bool isDuplicate = true;
-            SqlConnection sqlConn = new SqlConnection(conSTR);
-            sqlConn.Open();
             SqlCommand cmd1 = null;
             foreach (DataRow row in GetDataTable(sqlConn).Rows)
             {
-                if ((row.ItemArray[0] as string).Equals(reportName))
+                if ((row["ReportName"] as string).Equals(reportName))
                 {
                     isDuplicate = false;
-                    cmd1 = new SqlCommand("update ReportTable set Report=@Report where ReportName like @ReportName", sqlConn);
+                    cmd1 = new SqlCommand("UPDATE ReportTable set Report=@Report where ReportName like @ReportName", sqlConn);
                 }
             }
             if (isDuplicate)
             {
-                cmd1 = new SqlCommand("insert into ReportTable Values(@ReportName,@Report)", sqlConn);
+                cmd1 = new SqlCommand("INSERT into ReportTable (ReportName,Report) Values(@ReportName,@Report)", sqlConn);
             }
             cmd1.Parameters.AddWithValue("@ReportName", reportName);
             cmd1.Parameters.AddWithValue("@Report", report.ToString());
             cmd1.ExecuteNonQuery();
             sqlConn.Close();
-            Dictionary<string, object> dictionary = new Dictionary<string, object>();
-            dictionary.Add("CurrentAction", "Save");
-            return dictionary;
         }
 
-        public Dictionary<string, object> RemoveReportFromDB(string reportName)
+        public void RemoveReportFromDB(string reportName)
         {
-            string conSTR = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
-                + @"\App_Data\Database1.mdf;Integrated Security=True";
-            SqlConnection sqlConn = new SqlConnection(conSTR);
-            sqlConn.Open();
+            SqlConnection sqlConn = OpenConnection();
             SqlCommand cmd1 = null;
             foreach (DataRow row in GetDataTable(sqlConn).Rows)
             {
-                if ((row.ItemArray[0] as string).Equals(reportName))
+                if ((row["ReportName"] as string).Equals(reportName))
                 {
                     cmd1 = new SqlCommand("DELETE FROM ReportTable WHERE ReportName LIKE '%" + reportName + "%'", sqlConn);
+                    break;
                 }
             }
             cmd1.ExecuteNonQuery();
             sqlConn.Close();
-            Dictionary<string, object> dictionary = new Dictionary<string, object>();
-            dictionary.Add("CurrentAction", "Remove");
-            return dictionary;
         }
 
-        public Dictionary<string, object> RenameReportInDB(string reportName, string renameReport)
+        public void RenameReportInDB(string reportName, string renameReport)
         {
-            string conSTR = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
-                + @"\App_Data\Database1.mdf;Integrated Security=True";
-            SqlConnection sqlConn = new SqlConnection(conSTR);
-            sqlConn.Open();
+            SqlConnection sqlConn = OpenConnection();
             SqlCommand cmd1 = null;
             foreach (DataRow row in GetDataTable(sqlConn).Rows)
             {
-                if ((row.ItemArray[0] as string).Equals(reportName))
+                if ((row["ReportName"] as string).Equals(reportName))
                 {
-                    cmd1 = new SqlCommand("update ReportTable set ReportName=@RenameReport where ReportName like '%" + reportName + "%'", sqlConn);
+                    cmd1 = new SqlCommand("UPDATE ReportTable set ReportName=@RenameReport where ReportName like '%" + reportName + "%'", sqlConn);
+                    break;
                 }
             }
             cmd1.Parameters.AddWithValue("@RenameReport", renameReport);
             cmd1.ExecuteNonQuery();
             sqlConn.Close();
-            Dictionary<string, object> dictionary = new Dictionary<string, object>();
-            dictionary.Add("CurrentAction", "Rename");
-            return dictionary;
         }
 
-        public Dictionary<string, object> FetchReportListFromDB()
+        public List<string> FetchReportListFromDB()
         {
-            string conSTR = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
-                + @"\App_Data\Database1.mdf;Integrated Security=True";
-            SqlConnection sqlConn = new SqlConnection(conSTR);
-            sqlConn.Open();
-            string reportNames = string.Empty, currentRptName = string.Empty;
-            foreach (System.Data.DataRow row in GetDataTable(sqlConn).Rows)
+            SqlConnection sqlConn = OpenConnection();
+            List<string> reportNames = new List<string>();
+            foreach (DataRow row in GetDataTable(sqlConn).Rows)
             {
-                currentRptName = (row.ItemArray[0] as string);
-                reportNames = reportNames == "" ? currentRptName : reportNames + "__" + currentRptName;
+                if (!string.IsNullOrEmpty(row["ReportName"] as string))
+                {
+                    reportNames.Add(row["ReportName"].ToString());
+                }
             }
             sqlConn.Close();
-            Dictionary<string, object> dictionary = new Dictionary<string, object>();
-            dictionary.Add("ReportNameList", reportNames);
-            dictionary.Add("CurrentAction", "Fetch");
-            return dictionary;
+            return reportNames;
         }
 
-        public Dictionary<string, object> LoadReportFromDB(string reportName)
+        public string LoadReportFromDB(string reportName)
         {
-            string conSTR = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
-                + @"\App_Data\Database1.mdf;Integrated Security=True";
-            SqlConnection sqlConn = new SqlConnection(conSTR);
-            sqlConn.Open();
-            Dictionary<string, object> dictionary = new Dictionary<string, object>();
-            string currentRptName = string.Empty;
+            SqlConnection sqlConn = OpenConnection();
             string report = string.Empty;
             foreach (DataRow row in GetDataTable(sqlConn).Rows)
             {
-                currentRptName = row.ItemArray[0] as string;
-                if (currentRptName.Equals(reportName))
+                if ((row["ReportName"] as string).Equals(reportName))
                 {
-                    report = row.ItemArray[1] as string;
-                    dictionary.Add("ReportName", currentRptName);
-                    dictionary.Add("Report", report);
-                    dictionary.Add("CurrentAction", "Load");
+                    report = (string)row["Report"];
                     break;
                 }
             }
             sqlConn.Close();
-            return dictionary;
+            return report;
+        }
+
+        private SqlConnection OpenConnection()
+        {
+            string connectionString = @"Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=" + Environment.CurrentDirectory
+                + @"\App_Data\Database1.mdf;Integrated Security=True";
+            SqlConnection sqlConn = new SqlConnection(connectionString);
+            sqlConn.Open();
+            return sqlConn;
         }
 
         private DataTable GetDataTable(SqlConnection sqlConn)

README.md

@@ -1,4 +1,3 @@
-# Save-and-load-report-from-SQL-database-to-pivot-table
-Save and load report from SQL Server Database to a Pivot Table
+# Save and load report from SQL database to a Pivot Table
 
-A quick start project for connecting a SQL server database to a Syncfusion Pivot Table Save & Load Actions. This repository includes a ASP.NET Core Web App Controller (MyWebService) for performing Save & Load Actions from a SQL server database, as well as a quick start samples in the TypeScript, JavaScript, Angular, React, VUE, ASP.NET Core and MVC platforms that display the perform Save & Load Actions in a Syncfusion Pivot Table.
+A quick start project that shows how to save and load reports from a SQL Server database and load them into the Syncfusion Pivot Table at run time. This repository includes a ASP.NET Core Web App Controller ([MyWebService](./MyWebService/)) for saving and loading reports from a SQL server database, as well as a quick start samples in the [TypeScript](./Typescript/), [JavaScript](./Javascript/), [Angular](./Angular/), [React](./React/), [VUE](./VUE/), ASP.NET [Core](./Core/) and [MVC](./MVC/) platforms that displays the loaded report in a Syncfusion Pivot Table.

React/README.md

@@ -1,42 +1,29 @@
-# How to bind MSSQL database to pivot table
+# How to bind MSSQL database to pivot table Save & Load Actions
 
-## Introduction
+A quick start project that shows how to save and load reports from a SQL Server database and load them into the Syncfusion Pivot Table at run time. This repository includes a ASP.NET Core Web App Controller ([MyWebService](../MyWebService/)) for saving and loading reports from a SQL server database, as well as a quick start samples in the React platform that displays the loaded report in a Syncfusion Pivot Table.
 
-This repository contains client-side React sample for syncfusion pivot table save & load.
+## Project prerequisites
 
-## Prerequesties software
+Before beginning work on the server and client projects, ensure the following software to be installed in the machine.
 
-Make sure that you have the following requirements in your machine before starting to work on the client projects.
+* [git](https://git-scm.com/downloads)
+* [Node.js](https://nodejs.org/en/)
+* [React](https://reactjs.org/)
+* [Visual Studio Code](https://code.visualstudio.com/)
+* [Visual Studio 2022](https://visualstudio.microsoft.com/downloads/ ) and [.NET Core SDK 6.0](https://dotnet.microsoft.com/en-us/download/dotnet/6.0) or later installed on your machine.
 
-* git
-* React
-* Node Package Manager (NPM suggests versions above **14+**)
-* Visual Studio Code (Optional)
-* Visual Studio 2022 (Optional)
+## How to run this application?
 
-## Guide to download
+* To run this application, clone the [Save-and-load-report-from-SQL-database-to-pivot-table](https://github.com/SyncfusionExamples/Save-and-load-report-from-SQL-database-to-pivot-table) repository and then open **MyWebService** in Visual Studio 2022. Simply build and run your project in IIS Express, and it will host and display the URL 'https://localhost:44313'.
 
-* To run this application, you need to clone the `Save-and-load-report-from-SQL-database-to-pivot-table` repository and then navigate to the path where it has been stored in your system.
+* Now open React sample in Visual Studio Code and and install the necessary npm packages using the following command.
 
-* To do so, open the command prompt and run the below command.
-
-```
-git clone https://github.com/SyncfusionExamples/Save-and-load-report-from-SQL-database-to-pivot-table
-
-```
-
-## Guide to Run sample
-
-Once done with downloading, follows the steps one after the other.
-
-* Run **MyWebService** (Server-side) Core Api application in Visual Studio to get the API link.
- 
-*  Now open React platform sample in Visual Studio Code and install the necessary npm packages using the following command line script.
 ```sh
 npm install
 ```
 
-* Now run your project using the following command line script.
+* Initialize the Pivot Table, map the hosted URL, create a pivot report, and finally run your project using the following command to achieve the desired result.
+
 ```sh
 npm start
-```
+```