|
1 | 1 | # Different Editing Modes and Cell Edit Types in React Tree Grid |
2 | 2 |
|
3 | | -A quick-start project that helps you to enable toolbar with editing options in React Tree Grid, and the different cell edit types and modes. This project also contains simple code to render command columns in Tree Grid. |
| 3 | +## Repository Description |
| 4 | +A quick-start project that demonstrates different editing modes and cell edit types in the Syncfusion React Tree Grid. This project showcases toolbar-based editing with multiple CRUD operations and custom command columns for managing records in a hierarchical task structure. |
4 | 5 |
|
5 | | -Documentation:https://ej2.syncfusion.com/react/documentation/treegrid/edit/ |
6 | | - |
7 | | -Online examples: https://ej2.syncfusion.com/react/demos/#/material/treegrid/inline-editing |
8 | | - |
9 | | -## Project prerequisites |
10 | | - |
11 | | -Make sure that you have the lastest versions of NodeJS and visual studio code in your machine before starting to work on this project. |
12 | | - |
13 | | -## How to run this application? |
14 | | - |
15 | | -To run this application, you need to clone the `different-editing-modes-and-cell-edit-types-in-react-tree-grid` repository and then open it in Visual Studio Code. Now, simply install all the necessary react packages into your current project using `npm install` command and run your project using the `npm start` command. |
| 6 | + |
| 7 | +## Overview |
| 8 | +This repository provides a practical example of implementing editing functionality in the EJ2 TreeGrid component with Row editing mode, various cell editors, and command columns for CRUD operations in React applications. |
| 9 | + |
| 10 | +## Features |
| 11 | +- **TreeGrid Component with Row Editing**: Integrated Syncfusion EJ2 TreeGrid with row-based editing mode |
| 12 | +- **Toolbar Actions**: Add, Edit, Delete, Update, and Cancel operations via toolbar buttons |
| 13 | +- **Multiple Cell Edit Types**: DatePicker for dates, Dropdown for priority selection, Boolean editor for approval status |
| 14 | +- **Command Column**: Inline action buttons (Edit, Delete, Save, Cancel) for individual record management |
| 15 | +- **Local Data Binding**: Hierarchical task data with parent-child relationships via subtasks |
| 16 | +- **Pagination**: Built-in paging support for better data organization |
| 17 | + |
| 18 | +## Project Prerequisites |
| 19 | +Before starting, ensure you have the following installed: |
| 20 | + |
| 21 | +- **Node.js**: Latest stable version |
| 22 | +- **Visual Studio Code**: Latest version recommended |
| 23 | +- **npm**: Node Package Manager (included with Node.js) |
| 24 | +- Basic knowledge of React and JavaScript |
| 25 | + |
| 26 | +## Installation |
| 27 | + |
| 28 | +Clone and set up the project: |
| 29 | + |
| 30 | +``` |
| 31 | +git clone https://github.com/SyncfusionExamples/different-editing-modes-and-cell-edit-types-in-react-tree-grid |
| 32 | +cd different-editing-modes-and-cell-edit-types-in-react-tree-grid |
| 33 | +npm install |
| 34 | +``` |
| 35 | + |
| 36 | +## Running the Application |
| 37 | + |
| 38 | +Start the development server: |
| 39 | + |
| 40 | +``` |
| 41 | +npm start |
| 42 | +``` |
| 43 | + |
| 44 | +The application will open in your default browser. Any changes you make to the source files will automatically reload the application. |
| 45 | + |
| 46 | +## Examples |
| 47 | + |
| 48 | +Explore Syncfusion EJ2 TreeGrid editing and cell type examples: |
| 49 | +https://ej2.syncfusion.com/react/demos/#/tailwind3/treegrid/row-editing |
| 50 | +https://ej2.syncfusion.com/react/demos/#/tailwind3/treegrid/dialog-editing |
| 51 | +https://ej2.syncfusion.com/react/demos/#/tailwind3/treegrid/cell-edit-types |
| 52 | +https://ej2.syncfusion.com/react/demos/#/tailwind3/treegrid/command-column |
| 53 | +https://ej2.syncfusion.com/react/demos/#/tailwind3/treegrid/toolbar |
| 54 | + |
| 55 | +## Documentation |
| 56 | + |
| 57 | +For detailed information on editing configurations and cell edit types: |
| 58 | +https://ej2.syncfusion.com/react/documentation/treegrid/editing/ |
| 59 | +https://ej2.syncfusion.com/react/documentation/treegrid/columns/column-types/ |
0 commit comments