Data Grid with ASP.NET Server
You can use the KendoReact Data Grid with ASP.NET Core. In this way, you can enable CRUD and server data operations like paging, sorting, filtering, and grouping.
Prerequisites
- React version 16.0.0 or later.
- ReactDOM version 16.0.0 or later.
- A commercial or trial license for Telerik UI for ASP.NET Core because the application uses this library for the server operations.
- .NET version 6 that usually comes directly with Visual Studio 2022.
How to Run the Demo
Whether you are looking for examples of how to use KendoReact in applications, or for a starting point for your CRUD Data Grid with server operations, head over to the application's source code on GitHub.
To play with the demo and see how it’s built, you may want to run it locally:
- Clone or download the source code from GitHub.
- Restore all of the dependencies.
- Make sure you have activated your license
- Start the Visual Studio Solution.
About the App
The new React Data Grid with ASP.NET Core Server is a sample application that developers can use as a demo of how to implement CRUD and server data operations in their Data Tables. The sample application is built by using the KendoReact Data Grid, the Kendo Data Query packages, and Telerik UI for ASP.NET Core. We are using Telerik UI for ASP.NET Core on the server to help with all operations like filtering, sorting, paging, and grouping.
The sample application also shows how to use the KendoReact DropDownList component as an editor for complex fields in the Data Grid.
The application uses inline editing for the CRUD operations. This method allows local editing of the data while the user types and saves it on the server only after the user has finished editing the entire row.
The sample application demonstrates only one of the possible ways to integrate the KendoReact Grid with ASP.NET Core. As the Grid provides its data operation parameters in JSON format that can be formatted and sent to any server API, you are free to use any other approach supported by your server setup.
Styling KendoReact Components with Ease
To make styling as easy as possible, you can use the KendoReact Themes that come out-of-the-box with this React UI components library. In this demo, we use the KendoReact Default Theme to make our components stand out and look great.
For more information on how to add one of the themes to your project, refer to the article on using the KendoReact themes in React projects.
If you're interested in applying more styling, How to Add Custom Styles to KendoReact Components with Sass is another helpful resource.
