Devexpress Aspxgridview Popupeditform Title

5 min read Oct 03, 2024

Devexpress Aspxgridview Popupeditform Title

How to Customize the PopupEditForm Title in DevExpress ASPxGridView

The DevExpress ASPxGridView control is a powerful and versatile tool for displaying and editing data in your web applications. One of its key features is the ability to edit data in a popup window, providing a streamlined and user-friendly experience. However, you might want to customize the title of this popup window to better reflect the context of the data being edited. This article will guide you on how to achieve this using DevExpress ASPxGridView.

Understanding the PopupEditForm

The PopupEditForm is a built-in feature of the ASPxGridView control that allows users to edit data in a separate window. By default, the title of this window is "Edit". While this is a generic and functional title, it might not always be suitable for your specific needs.

Customize the Title Using JavaScript

The most straightforward way to customize the PopupEditForm title is by using JavaScript. Here's how you can achieve this:

Identify the Element: The PopupEditForm title is displayed within an HTML element with the class "dx-popup-title". You'll need to target this element in your JavaScript code.
Update the Content: Once you have identified the element, you can change its text content to your desired title.

Here's an example of how to customize the title using JavaScript:

function OnPopupEditFormShown(s, e) {
    // Find the title element
    var titleElement = e.GetPopupElement().find(".dx-popup-title");

    // Update the title
    titleElement.text("Edit Customer Details");
}

In this example, the JavaScript function OnPopupEditFormShown is triggered when the PopupEditForm is shown. Inside the function, we first find the title element using the .find() method and then change its text using the .text() method.

Applying the JavaScript to Your ASPxGridView

You can integrate the JavaScript code into your ASPxGridView using the ClientSideEvents property. Here's how:

This code snippet will execute the OnPopupEditFormShown JavaScript function whenever the PopupEditForm is displayed.

Customize the Title Based on Data

You might want to customize the title based on the data being edited. For example, you might want to display the customer's name in the title of the edit popup. To achieve this, you can utilize the GetRowValues method of the ASPxGridView.

Here's an example:

function OnPopupEditFormShown(s, e) {
    // Find the title element
    var titleElement = e.GetPopupElement().find(".dx-popup-title");

    // Get the customer name from the current row
    var customerName = s.GetRowValues(e.visibleIndex, "CustomerID");

    // Update the title
    titleElement.text("Edit Details for " + customerName);
}

This code retrieves the customer's name from the "CustomerID" column of the current row and uses it to customize the title of the PopupEditForm.

Conclusion

Customizing the title of the PopupEditForm in DevExpress ASPxGridView provides a more user-friendly and context-aware experience for your users. You can use JavaScript to change the title dynamically, and even tailor it to specific data being edited. By following these steps, you can easily enhance the user interface of your web application.