Skip to content

Commit de06a0f

Browse files
authored
Merge pull request #5 from Sridhar-Karunakaran/master
987889: Updating the README file content
2 parents 55b62b6 + 8ebd250 commit de06a0f

File tree

1 file changed

+48
-6
lines changed

1 file changed

+48
-6
lines changed

README.md

Lines changed: 48 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,52 @@
1-
# Save and load report through the toolbar in angular pivotview component
2-
A quick-start project that demonstrates how to save and load reports in the Syncfusion Angular Pivotview component using the toolbar.
1+
# Export and import reports as JSON through custom toolbar options (Angular Pivot Table)
32

4-
## Project prerequisites
3+
The Syncfusion Angular Pivot Table allows you to persist and restore report settings (also referred to as dataSourceSettings). In this sample, two custom toolbar actions are provided:
4+
- **Save**: Exports the current Pivot Table configuration as a JSON file (for example, pivot.json).
5+
- **Open**: Imports a previously saved JSON file and applies it to the Pivot Table.
56

6-
Make sure that you have the latest versions of NodeJS and Visual Studio Code in your machine before starting to work on this project.
7+
These actions help users back up, share, or reload their exact Pivot Table layout, including rows, columns, values, filters, sorting, formatting, and more.
78

8-
## How to run this application?
9+
## ⚙️ How it works
10+
This sample uses the **toolbarTemplate** property of the Pivot Table to render two custom controls in the toolbar:
11+
- A Save button (anchor element) that serializes the current report using getPersistData, converts it to a downloadable file, and triggers a download in the browser.
12+
- An Open input (file element) that reads a selected JSON file using the FileReader API and then assigns the parsed content back to the component’s dataSourceSettings to instantly restore the report.
913

10-
To run this application, you need to clone the [`save-and-load-report-through-the-toolbar-in-angular-pivotview-component`](https://github.com/SyncfusionExamples/save-and-load-report-through-the-toolbar-in-angular-pivotview-component) repository and then open it in Visual Studio Code. Now, simply install all the necessary angular packages into your current project using the `npm install` command and run your project using the `ng serve` command.
14+
Key APIs and references used:
15+
- [`dataSourceSettings`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/#datasourcesettings)
16+
- [`toolbarTemplate`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/#toolbartemplate)
17+
- [`getPersistData`](https://ej2.syncfusion.com/angular/documentation/api/pivotview/#getpersistdata)
18+
- [`change event (MDN)`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event)
19+
20+
## 🛠 Prerequisites
21+
- Node.js (LTS recommended)
22+
- Angular CLI (to run locally with ng serve)
23+
- Visual Studio Code (or any preferred editor)
24+
25+
## 📦 Installation and Running the Sample
26+
1. Clone this repository:
27+
- https://github.com/SyncfusionExamples/save-and-load-report-through-the-toolbar-in-angular-pivotview-component
28+
2. Open the project in Visual Studio Code.
29+
3. Install dependencies:
30+
- In the integrated terminal, run:
31+
- npm install
32+
4. Start the development server:
33+
- ng serve
34+
5. Navigate to the URL shown in the terminal (typically http://localhost:4200) to view the sample.
35+
36+
## ✅ Compatibility
37+
- This sample targets the Angular version specified in package.json. Update your local Node.js and Angular CLI to compatible versions if you encounter setup issues.
38+
39+
## 📚 Learn More
40+
41+
- [Getting Started with Syncfusion Angular Pivot Table](https://ej2.syncfusion.com/angular/documentation/pivotview/getting-started)
42+
- [Live Feature Samples and Demos](https://ej2.syncfusion.com/angular/demos/#/tailwind3/pivot-table/overview)
43+
44+
## 💬 Support and Feedback
45+
46+
For any other queries, contact our [Syncfusion® support team](https://support.syncfusion.com/?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) or post your queries through the [community forums](https://www.syncfusion.com/forums?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples).
47+
48+
Request a new feature through [Syncfusion® feedback portal](https://www.syncfusion.com/feedback?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples).
49+
50+
## 📜 License
51+
52+
This is a commercial product and requires a paid license for possession or use. Syncfusion's licensed software, including this component, is subject to the terms and conditions of [Syncfusion's EULA](https://www.syncfusion.com/license/studio/22.2.5/syncfusion_essential_studio_eula.pdf?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples). You can purchase a license [here](https://www.syncfusion.com/sales/products?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples) or start a free 30\-day trial [here](https://www.syncfusion.com/account/manage-trials/start-trials?utm_source=github&utm_medium=listing&utm_campaign=github-github-documenteditor-examples)

0 commit comments

Comments
 (0)