ASP.NET - Grid And Card View - Edit Form Layout Runtime Customization - v19.2 (Now Available)

ASP.NET Team Blog
08 November 2019

In our most recent release (v19.2), we added a major enhancement to the ASP.NET GridView and CardView controls for both ASP.NET WebForms and MVC platforms.

When you use a predefined or custom Edit Form, you often need to change the layout on the fly. For example, you may need to show/hide specific items or groups of items based on user actions, user permissions, or the values (or state) for the row that needs editing. While there is the existing CellEditorInitialize event, it does not provide access to the layout items for the Edit Form.

To solve this issue in an elegant way, we've implemented runtime customization of Edit Form layout items (such as editors, buttons, layout groups) based on various conditions either on the server or client. For example, here's the GridView's Edit Form controlling the visibility of the 'Dismissal Information' group tab on the client-side. When the user enters a value for the 'Dismissal Date', the tab is shown, otherwise, a blank value hides the tab:

DevExpress ASP.NET GridView - Edit Form

To access layout items and change their settings on the server side, use the new EditFormLayoutCreated event.

protected void grid_EditFormLayoutCreated(object sender, DevExpress.Web.ASPxGridViewEditFormLayoutEventArgs e) {
    ASPxGridView gridView = sender as ASPxGridView;
    LayoutGroup layoutGroupDismissal = (LayoutGroup)e.FindLayoutItemOrGroup("DismissalInformation");
 
    if(layoutGroupDismissal == null) return;
 
    if(gridView.IsNewRowEditing) {
        layoutGroupDismissal.Visible = false;
        return;
    }
 
    var fireDate = gridView.GetRowValues(e.RowVisibleIndex, "FireDate");
    layoutGroupDismissal.ClientVisible = fireDate != null && (DateTime)fireDate != DateTime.MinValue;
}

The EditFormLayoutCreated event gives you the opportunity to create different layouts for different rows. You can customize the settings for new layout items or existing ones, and also remove, create, re-arrange group items, and manage row and column spans, and so on.

DevExpress ASP.NET GridView - Edit Form - Hide Elements

The following client-side methods provide access to layout items on the client side:

The example below demonstrates how to toggle an item’s visibility:

function onShowHideInfoClick(s, e) {
    var contactLayoutGroup = clientGrid.GetEditFormLayoutItemOrGroup("groupContactInfo");
    contactLayoutGroup.SetVisible(!contactLayoutGroup.GetVisible());
}

You can use a similar approach to control groups of items, including tabbed groups.

Demo: ASP.NET GridView - Edit Form Layout

CardView

The new functionality is also available in our CardView control. We populated the CardLayoutCreated event’s argument with two methods (FindLayoutItemByColumn and FindLayoutItemOrGroup), which allow you to find a layout item, and the IsEditingCard option that indicates whether the current card is being edited.

On the client, the CardView control provides the same API to manage layout items as the GridView does.

Your Feedback

I would love to hear your feedback about our ASP.NET WebForms and MVC GridView and CardView components. Drop me a line below about what functionality is required for your ASP.NET web applications.

2 comment(s)
Kalem Yazılım
Kalem Yazılım

Hello Mehul,

Thank you for you informative sharing.

Is this feature suitable for XAF project ?

Thanks

10 November, 2019
Arkady (DevExpress)
Arkady (DevExpress)

@Kalem Yazılım, although we haven't thoroughly researched the new functionality in XAF Web applications, we can say this feature is suitable for XAF projects as well.

13 November, 2019

Please login or register to post comments.