Effortlessly Synchronize JavaScript Controls Using DataManager
Tags: javascript, chart, datagrid, development
Published: 2024-05-23 18:38:37

---
title: Effortlessly Synchronize JavaScript Controls Using DataManager
published: true
date: 2024-05-21 13:39:47 UTC
tags: javascript, chart, datagrid, development
canonical_url: https://www.syncfusion.com/blogs/post/sync-javascript-controls-datamanager
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usfjm0vxrdx517ufeder.png
---
**TL;DR:** Syncfusion’s JavaScript DataManager solves data synchronization issues with its query persistence feature. Let’s see how to synchronize DataGrid and Charts controls using DataManager. Demonstrating synchronized data management, ensuring consistency even after a browser refresh. Check out the GitHub link for complete code examples.

Data synchronization between different controls has always been a challenge in web development. However, with the advent of [Syncfusion JavaScript DataManager](https://help.syncfusion.com/js/datamanager/overview "JavaScript DataManager Overview"), this issue is elegantly resolved through its ingenious **query persistence** feature.

This blog delves into the fascinating world of Syncfusion’s JavaScript DataManager and how to seamlessly integrate it with the [JavaScript DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid") and [Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts "JavaScript Charts") controls to synchronize data.

## JavaScript DataManager: An overview

Before we plunge into the intricacies of DataManager query persistence, let’s grasp the essence of DataManager itself.

The Syncfusion JavaScript DataManager is a dynamic gateway that effortlessly connects local and remote data sources. It acts as a bridge between data and controls, orchestrating data interactions using queries. This query-based approach binds data to the corresponding controls and empowers you with complete CRUD (Create, Read, Update, Delete) data operations.

The DataManager plays a pivotal role in implementing sorting, paging, filtering, grouping, searching, and aggregating data on the client and server sides. Remarkably, this functionality isn’t confined to a single control; it’s a common thread woven into various Syncfusion JavaScript controls such as [Grid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid"), [Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts "JavaScript Charts"), [Scheduler](https://www.syncfusion.com/javascript-ui-controls/js-scheduler "JavaScript Scheduler"), [Kanban Board](https://www.syncfusion.com/javascript-ui-controls/js-kanban-board "JavaScript Kanban Board"), and more.

## JavaScript Data Manager’s memory magic: What’s that?

The JavaScript DataManager’s **query persistence** feature ensures that the query object retains its integrity within the browser’s local storage, even when the browser is refreshed, or the user navigates between different pages. This capability sets the stage for synchronized data management across multiple controls.

Imagine the convenience of maintaining various components that utilize the same DataManager, all harmoniously synchronized. Any update to the query state reverberates instantaneously across associated controls, creating a seamless user experience.

## Making controls synchronization together: DataManager, DataGrid, and Charts

**Note:** Before proceeding, refer to the [Getting started with JavaScript DataGrid](https://help.syncfusion.com/js/grid/getting-started "Getting started with JavaScript DataGrid"), [Charts](https://help.syncfusion.com/js/chart/getting-started "Getting started with JavaScript Charts") and [DataManager documentation](https://help.syncfusion.com/js/datamanager/getting-started "Getting Started with JavaScript DataManager").

In a shopping app, let’s see how to synchronize the JavaScript DataManager changes in both DataGrid and Charts controls simultaneously. When users log in to the app, they can identify that their previous data persists even though they refresh or log out. The previously added cart items, wish list, and deleted items state are preserved in the app. Eventually, this will provide a better user experience.

To achieve this, we will configure the JavaScript DataGrid and Charts controls to fetch data from the same DataManager instance and share DataManager’s persistent memory. This harmony ensures that the controls move in perfect synchronization.

The DataGrid component displays the entire dataset, while the Charts component presents user reviews based on the specific data from the column name field. Both components are associated with the same DataManager instance, and we have enabled the state persistence feature in the DataManager.

The query state of the DataManager is automatically saved in the browser’s local storage as the user applies filtering and sorting actions. Both components reload the data with the last persisted state while refreshing or reloading the browser.

In this demo, the filter and sort queries persist, whereas the search queries do not. The **onSearch** query is excluded from persistence by setting it in the **ignoreOnPersist** property of the DataManager.

Let’s see how the data synchronization works by following these steps!

### Step 1: Initialization and data setup

Start by selecting a username from the dropdown list to initialize the demo. Upon selection, the DataGrid and Charts components will load the initial data, utilizing the DataManager. Specifically tailored for this demonstration, the DataManager assigns the chosen username’s ID and stores the associated query in the browser’s **window.localstorage** page.

### Step 2: Interacting with JavaScript DataGrid and Charts

Now, interact with the DataGrid by selecting items via the checkboxes and adding them to your cart using the **Add** button in the toolbar. Sort products by price from **high to low or vice versa** using the **Price Low-High and Price High-Low** buttons. Additionally, view products added to the wish list by clicking the **star** icon. All user actions and data are managed and persisted by the DataManager, which is associated with the user ID. Filter product items by category; however, note that this category filter does not persist. The Charts component complements the Grid by displaying product reviews.

### Step 3: Logging out

You can log out by utilizing the **Logout** button at the right corner.

### Step 4: Persistent data and clearing wish list

Upon logging out or refreshing the browser, select a username from the dropdown list again (repeat from step 1). However, this time, the Grid data loads based on the last persisted wish list associated with the chosen username. You can clear the wish list for a specific user by clicking the **Clear Wishlist** button. This action removes all saved wish list items for that user.

Refer to the following GIF image.
<figure>

  <img src="https://www.syncfusion.com/blogs/wp-content/uploads/2024/05/Synchronizing-data-in-JavaScript-DataGrid-and-Charts-using-DataManager.gif" alt="Synchronizing data in JavaScript DataGrid and Charts using DataManager" style="width:100%">

  <figcaption>Synchronizing data in JavaScript DataGrid and Charts using DataManager</figcaption>

</figure>

## GitHub reference

Check out the complete code examples for [Synchronizing DataManager with JavaScript](https://github.com/SyncfusionExamples/EJ2-DataManager-peristence-cart-sample "GitHub demo: How to maintain the component's state using Syncfusion JavaScript DataManager") controls GitHub demo for more details.

## Conclusion

Thanks for reading! In this blog, we’ve explored how to integrate and synchronize Syncfusion [JavaScript DataManager](https://help.syncfusion.com/js/datamanager/overview "JavaScript DataManager") with [JavaScript DataGrid](https://www.syncfusion.com/javascript-ui-controls/js-data-grid "JavaScript DataGrid") and [Charts](https://www.syncfusion.com/javascript-ui-controls/js-charts "JavaScript Charts") controls. Try out the steps in this blog and share your feedback in the comments section below!

Existing customers can access the latest version of Essential Studio on the [License and Downloads](https://www.syncfusion.com/account/login "Essential Studio License and Downloads page") page. Not yet a Syncfusion customer? Sign up for our [30-day free trial](https://www.syncfusion.com/downloads "Get free evaluation of the Essential Studio products") to experience our features firsthand.

You can also contact us via our [support forum](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal"). We’re here to assist you every step of the way!

## Related blogs

- [Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler](https://www.syncfusion.com/blogs/post/add-salesforce-javascript-scheduler "Blog: Optimizing Productivity: Integrate Salesforce with JavaScript Scheduler")
- [PNPM vs. NPM vs. Yarn: What Should I Choose in 2024?](https://www.syncfusion.com/blogs/post/pnpm-vs-npm-vs-yarn "Blog: PNPM vs. NPM vs. Yarn: What Should I Choose in 2024?")
- [Empower Your Data Insights: Integrating JavaScript Gantt Chart into Power BI](https://www.syncfusion.com/blogs/post/add-gantt-chart-into-power-bi "Blog: Empower Your Data Insights: Integrating JavaScript Gantt Chart into Power BI")
- [Start Using the npm Query Today: Powerful Commands for Every Developer](https://www.syncfusion.com/blogs/post/npm-query-commands-for-developers "Blog: Start Using the npm Query Today: Powerful Commands for Every Developer")