This repository demonstrates how to build an interactive product dashboard using Syncfusion EJ2 components, combining Grid, Chart, and DataManager to persist user-specific state such as sorting, filtering, and wishlist selections.
This project showcases a client-side web application that integrates multiple Syncfusion EJ2 UI components with a single DataManager instance. The application allows users to view product data in a grid, visualize customer reviews in a pie chart, and manage a personalized wishlist. User-specific state is persisted using the Syncfusion DataManager so that preferences are retained across sessions.
The application is built using plain HTML, CSS, and JavaScript and relies on Syncfusion EJ2 CDN packages for UI components and data handling.
- Product listing using Syncfusion EJ2 Grid
- Checkbox-based row selection with persistent selection
- User-specific state persistence using DataManager
- Sorting products by price (ascending and descending)
- Category-based filtering using MultiSelect
- Wishlist management per user
- Pie chart visualization of customer reviews
- Dynamic UI updates based on user actions
- A modern web browser (Chrome, Edge, Firefox)
- Internet connection (to load Syncfusion CDN resources)
- Clone or download the repository.
- Ensure
index.html,sample.js,datasource.js, andindex.cssare in the same directory. - Open
index.htmldirectly in a browser.
- Select a user from the dropdown to initialize the dashboard.
- Use the sort buttons to order products by price.
- Filter products by category using the filter dropdown.
- Select products and add them to the wishlist.
- View wishlist items and clear persisted data when required.
- Logout to reset the session.
The application uses Syncfusion DataManager persistence to store user-specific queries such as wishlist filters. Each user maintains an independent state identified by their username.
This project is intended for demonstration and educational purposes using Syncfusion EJ2 components.