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

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:

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.

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

• GetEditFormLayout– returns a client-side instance of the built-in Edit Form Layout control.
• GetEditFormLayoutItemByColumn - returns a layout item related to the specified column.
• GetEditFormLayoutItemOrGroup– returns an item or a group from its name.

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.

• GetEditFormLayout– returns a client-side instance of the built-in Edit Form Layout control.
• GetEditFormLayoutItemByColumn - returns a layout item related to the specified column.
• GetEditFormLayoutItemOrGroup– returns an item or a group from its name.

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.