Handle CRUD Actions Using Fetch API and React Data Grid Events

Learn how to perform server-side CRUD operations in the Syncfusion React Data Grid using Fetch API and client-side events of React Data Grid. In this video, you will see how to create REST APIs using the Express server and call the endpoints to a custom service using the Fetch API. Finally, learn how to bind the custom service with the React Data Grid using the dataSourceChanged event. The React Data Grid is a feature-rich component for displaying data in a tabular format. Its wide range of functionalities includes data binding, editing, Excel-like filtering, custom sorting, aggregating rows, and selection. Bind data seamlessly from various local and remote data sources such as JSON, OData, WCF, and RESTful web services with the help of a data manager. Data Grid has a highly responsive layout and an optimized design for desktops, tablets, and smartphones. It works well on all mobile phones that use iOS, Android, or Windows OS. It comes with built-in Fluent, Tailwind CSS, Bootstrap, Material, high contrast, and Fabric themes. Utilize the Theme Studio tool to customize these themes. The React Data Grid lets users perform create, read, update, and delete operations (CRUD) easier with lists of business objects or a remote data service with the help of the data manager. Users can create custom user experiences in the Data Grid using a wide range of template options. Export the Data Grid in various file formats, including Excel, PDF, and CSV. Print all of the rows, regardless of the number of pages, or just the currently viewed page. Format dates, currency, and numbering to suit supported cultures. Tutorial video: https://www.syncfusion.com/tutorial-videos To learn how to create a React app and integrate the Syncfusion React Data Grid component, check out this link: https://www.youtube.com/watch?v=QNwcXokKc70 To learn about server-side CRUD operations using DataManager, watch this video: https://www.youtube.com/watch?v=TfqwtSjnQs8 Download the example from GitHub: https://github.com/SyncfusionExamples/handling-crud-actions-using-fetch-api-and-react-grid-events TRIAL LICENSE KEY ---------------------------- If you need a trial license key, start your React trial from your Syncfusion account and then obtain your trial license key from the downloads page: https://www.syncfusion.com/account/manage-trials/start-trials Check if you are eligible for a free license for all Essential Studio products on our Community License page: https://www.syncfusion.com/products/communitylicense BOOKMARK DETAILS ------------------- [00:00] React Data Grid - Introduction [00:40] Creating server endpoints [03:17] Learn about dataSourceChanged event [05:20] Create custom service [07:00] Call the services in dataSourceChanged event REACT DATA GRID --------------------------- Product overview: https://www.syncfusion.com/react-components/react-data-grid Examples: https://ej2.syncfusion.com/react/demos/#/tailwind3/grid/remote-data Documentation: https://ej2.syncfusion.com/react/documentation/grid/data-binding/data-binding Download free trial: https://www.syncfusion.com/downloads/react npm package: https://www.npmjs.com/package/@syncfusion/ej2-react-grids SUBSCRIBE ------------- Syncfusion on YouTube: https://www.youtube.com/user/syncfusioninc     Sign up to receive email updates: https://www.syncfusion.com/account/email-preference     SOCIAL COMMUNITIES ----------------------------- Facebook: https://www.facebook.com/Syncfusion/ X: https://x.com/Syncfusion LinkedIn: https://www.linkedin.com/company/syncfusion/ Instagram: https://www.instagram.com/syncfusionofficial     #react #grid #datavisualization #editing