Computing Talk
Home

Devextreme Razor Datagrid Edit Form Add Button

8 min read Oct 06, 2024
Devextreme Razor Datagrid Edit Form Add Button

Seamlessly Integrating Edit Forms, Add Buttons, and DataGrids with DevExtreme Razor Components

The DevExtreme Razor Components suite provides developers with a powerful and efficient way to build feature-rich, modern web applications. One of the key components in this suite is the DataGrid, which offers a flexible and customizable way to display and manipulate data. This article will guide you through the process of integrating edit forms, add buttons, and DataGrids within your DevExtreme Razor Components projects.

Understanding the Basics

Before diving into the code, let's understand the fundamental components and their functionalities:

  • DataGrid: The core component for presenting and managing tabular data. It allows for sorting, filtering, paging, and various other data manipulation operations.
  • Edit Form: A dedicated form designed for modifying or creating new records within your data. It provides fields for editing specific properties of your data source.
  • Add Button: A UI element that triggers the creation of a new record within your data source.

Integrating Edit Forms and Add Buttons with the DataGrid

Let's explore how to seamlessly integrate edit forms, add buttons, and the DataGrid in your DevExtreme Razor Components application. We'll use a hypothetical scenario where you need to manage a list of products with their respective details:

1. Setting Up the Data Model:

public class Product
{
    public int ID { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Price { get; set; }
}

2. Implementing the Data Source:

We need a data source to provide data for the DataGrid. Here's an example using a simple in-memory list:

public class ProductService
{
    public List GetProducts()
    {
        return new List
        {
            new Product { ID = 1, Name = "Product A", Description = "Description for Product A", Price = 10.99m },
            new Product { ID = 2, Name = "Product B", Description = "Description for Product B", Price = 19.99m },
            new Product { ID = 3, Name = "Product C", Description = "Description for Product C", Price = 29.99m }
        };
    }
}

3. Defining the DataGrid:

4. Creating the Edit Form:

5. Implementing the Add Button:

6. Handling the Add Button Click:

private void ShowAddForm()
{
    selectedProduct = new Product();
    isEditFormVisible = true;
}

7. Implementing Edit Functionality:

private void OnEditFormHiding(bool isHiding)
{
    if (isHiding)
    {
        selectedProduct = null;
    }
}

private void SaveProduct()
{
    // Handle saving the product data
    // ...

    isEditFormVisible = false;
}

private void CancelEdit()
{
    selectedProduct = null;
    isEditFormVisible = false;
}

Explanation:

  1. We define a DataGrid to display the product data using DxDataGrid.
  2. We configure the DataGrid to show edit buttons for each row using DxDataGridCommandColumn.
  3. The EditForm is created using DxPopup, and it displays relevant form fields for editing product data using DxForm and DxFormItems.
  4. The Add Button is created using DxButton and calls ShowAddForm when clicked.
  5. ShowAddForm sets the selectedProduct to a new instance of the Product class and shows the edit form.
  6. The OnEditFormHiding event handler ensures that the selectedProduct is cleared when the edit form is hidden.
  7. SaveProduct and CancelEdit handle the saving and canceling of the edit form respectively.

Integrating the Edit Form with the DataGrid

  1. The DxDataGridCommandColumn element automatically provides an "Edit" button for each row.
  2. When the "Edit" button is clicked, the EditForm is triggered, and the corresponding data row's information is populated in the form fields.
  3. When you save the changes in the form, the updated data is reflected in the DataGrid.

Advantages of Using DevExtreme Razor Components

  • Simplified Integration: DevExtreme Razor Components seamlessly integrates with your ASP.NET Core applications, making it easy to build rich user interfaces.
  • Performance Optimization: DevExtreme components are optimized for performance, ensuring your web application runs smoothly even with complex data sets.
  • Comprehensive Feature Set: The DevExtreme suite provides a wide range of components, including data grids, charts, editors, and more, covering various UI needs.
  • Customization and Flexibility: DevExtreme components offer extensive customization options, allowing you to tailor them to your application's specific requirements.

Conclusion

By implementing the techniques discussed above, you can seamlessly integrate edit forms, add buttons, and DataGrids within your DevExtreme Razor Components projects. This empowers you to create dynamic and user-friendly applications that effectively manage and present data. The comprehensive feature set and ease of integration offered by DevExtreme Razor Components make it a powerful and efficient choice for building modern web applications.

Latest Posts

Featured Posts