Devexpress Aspx Datatable New Row

Mohammad

9 min read

·

Oct 07, 2024

33

Share

Adding a New Row to a DevExpress ASPx Data Table

The DevExpress ASPx Data Table is a powerful and versatile control for displaying and manipulating data within your ASP.NET web applications. One common requirement is the ability to add new rows to the table, allowing users to input and save new data. This article will guide you through the process of adding a new row to a DevExpress ASPx Data Table.

Understanding the Basics

Before diving into the code, it's essential to understand the core concepts involved in adding new rows:

• Data Source: The ASPx Data Table retrieves data from a data source, typically a database. When adding a new row, you'll be interacting with this data source.
• Editing Mode: The DevExpress ASPx Data Table offers different editing modes, including "Inline," "Popup," and "Batch." Choose the mode that best suits your application's needs.
• Data Binding: The ASPx Data Table binds to your data source, displaying the retrieved data in rows and columns. When adding a new row, you'll need to update the data binding.
• Validation: Implementing validation rules ensures data integrity. You can validate user input on the client-side and server-side to prevent errors.

Adding a New Row in Inline Editing Mode

Inline editing mode allows users to directly edit rows within the table itself. Here's how to enable it and add a new row:

1. Enable Inline Editing: Set the SettingsEditing.Mode property of the ASPx Data Table to "Inline."

2. Add a New Row Button: Provide a button or link that triggers the addition of a new row. You can use the ASPxButton control for this purpose.

3. Handling the Button Click: In the button's click event handler, perform the following steps:

   • Create a New Data Object: Instantiate a new object of your data source's type.
   • Initialize the New Row: Populate the object with initial values, if required.
   • Add the New Object to the Data Source: Append the newly created object to your data source.
   • Refresh the ASPx Data Table: Call the DataBind() method on the ASPx Data Table to reflect the added row.

Example:

protected void AddNewRowButton_Click(object sender, EventArgs e)
{
    // Create a new data object
    Customer newCustomer = new Customer();

    // Initialize the new row
    newCustomer.Name = "New Customer";
    newCustomer.Email = "[email protected]";

    // Add the new object to the data source
    CustomerDataSource.Add(newCustomer);

    // Refresh the ASPx Data Table
    ASPxDataTable1.DataBind();
}

Adding a New Row in Popup Editing Mode

Popup editing mode provides a dedicated popup window for adding or editing data. This approach offers a more organized and user-friendly interface for data entry.

1. Enable Popup Editing: Set the SettingsEditing.Mode property of the ASPx Data Table to "Popup."
2. Add a New Row Button: As in inline editing, provide a button or link to trigger the popup window.
3. Handling the Button Click: In the button's click event handler, call the ShowEditRow method of the ASPx Data Table to display the popup window. This method takes the index of the new row as a parameter, which you can set to -1 for a new row.

Example:

protected void AddNewRowButton_Click(object sender, EventArgs e)
{
    ASPxDataTable1.ShowEditRow(-1); // -1 indicates a new row
}

4. Populate the Popup Form: Inside the popup window, you'll find edit controls corresponding to the columns in the ASPx Data Table. Populate these controls with initial values, if necessary.

5. Handling Save: Implement a save button or mechanism within the popup. On clicking the save button, perform the following steps:

   • Retrieve Values from the Popup Form: Get the entered values from the edit controls in the popup window.
   • Create a New Data Object: Instantiate a new object of your data source's type.
   • Set Data Object Properties: Assign the retrieved values to the properties of the newly created object.
   • Add the New Object to the Data Source: Append the new object to your data source.
   • Refresh the ASPx Data Table: Call the DataBind() method to reflect the changes.

Example:

protected void SaveNewCustomer_Click(object sender, EventArgs e)
{
    // Retrieve values from the popup form
    string name = NameTextBox.Text;
    string email = EmailTextBox.Text;

    // Create a new data object
    Customer newCustomer = new Customer();

    // Set data object properties
    newCustomer.Name = name;
    newCustomer.Email = email;

    // Add the new object to the data source
    CustomerDataSource.Add(newCustomer);

    // Refresh the ASPx Data Table
    ASPxDataTable1.DataBind();

    // Close the popup window
    ASPxDataTable1.CloseEditRow();
}

Validation in ASPx Data Table

Data validation is crucial to ensure data integrity and prevent errors. You can perform validation both on the client-side and server-side using the DevExpress ASPx Data Table:

• Client-Side Validation: Define validation rules using the SettingsValidation property of the ASPx Data Table. You can set validation rules for individual columns, such as required fields, data types, and length restrictions.
• Server-Side Validation: Implement validation logic within your code-behind file. You can perform more complex validation checks, potentially referencing data from multiple sources.

Example:

// Client-Side Validation

    
        
            
            
        
    


// Server-Side Validation
protected void SaveNewCustomer_Click(object sender, EventArgs e)
{
    // ...

    if (!IsValidEmail(email)) 
    {
        // Display an error message
    } else {
        // ...
    }
}

Conclusion

Adding new rows to a DevExpress ASPx Data Table involves understanding the editing mode, data source interaction, and validation concepts. By leveraging the features and capabilities of the control, you can provide your users with a seamless and efficient experience for adding new data to your web applications.