Skip to content

Commit def403c

Browse files
Enhance README with detailed project information
Updated repository description, added features, prerequisites, installation instructions, and examples for better clarity.
1 parent 8d2839b commit def403c

1 file changed

Lines changed: 56 additions & 12 deletions

File tree

README.md

Lines changed: 56 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,59 @@
11
# Different Editing Modes and Cell Edit Types in React Tree Grid
22

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.
45

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

Comments
 (0)