/asp-net-web-forms-grid-update-master-and-detail-grids-in-batch-mode

Implement master-detail functionality and update all grid controls on a custom button click in batch edit mode.

Primary LanguageASP.NETOtherNOASSERTION

Grid View for ASP.NET Web Forms - How to update master and detail grids simultaneously in batch edit mode

This example demonstrates how to implement master-detail functionality and update all grid controls on a custom button click in batch edit mode.

Master Detail Grids

Overview

Follow the steps below to update master and detail grids simultaneously:

  1. Create a master grid control, specify its Templates.DetailRow property, and add a detail grid to the template.

  2. Hide default command buttons in the grid's server-side CommandButtonInitialize event handler and use the master grid's StatusBar property to create custom Save Changes and Cancel Changes buttons.

    <Templates>
    <!-- ... -->
    <StatusBar>
        <div style="text-align: right">
            <dx:ASPxButton ID="btn" Text="Save Changes" RenderMode="Link" AutoPostBack="false" runat="server">
                <ClientSideEvents Click="OnClick" />
            </dx:ASPxButton>
            <dx:ASPxButton ID="btn2" Text="Cancel Changes" RenderMode="Link" AutoPostBack="false" runat="server">
                <ClientSideEvents Click="OnCancel" />
            </dx:ASPxButton>
        </div>
    </StatusBar>
</Templates>
    protected void Grid_CommandButtonInitialize(object sender, ASPxGridViewCommandButtonEventArgs e) {
    if (e.ButtonType == ColumnCommandButtonType.Update || e.ButtonType == ColumnCommandButtonType.Cancel) {
        e.Visible = false;
    }
}

  3. Handle the master grid's client-side DetailRowCollapsing and DetailRowExpanding events to get the visible indexes of expanded rows.

    var visibleIndicies = [];
function AddCurrentDetailGrid(visibleIndex) {
if (visibleIndicies.indexOf(visibleIndex) == -1)
    visibleIndicies.push(visibleIndex);
}
function RemoveCurrentDetailGrid(visibleIndex) {
    var arrayIndex = visibleIndicies.indexOf(visibleIndex);
    if (arrayIndex > -1)
        visibleIndicies.splice(arrayIndex, 1);
}
function OnExpanding(s, e) {
    AddCurrentDetailGrid(e.visibleIndex);
}
function OnCollapsing(s, e) {
    RemoveCurrentDetailGrid(e.visibleIndex);
}

  4. In the custom button's Click event handler, call the master grid's PerformCallback method to update all grid controls on the server.

    var buttonFlag = false;
function OnClick(s, e) {
    if (visibleIndicies.length == 0)
        grid.UpdateEdit();
    else {
        buttonFlag = true;
        grid.PerformCallback(visibleIndicies);
    }
}

  5. Handle the master grid's server-side CustomCallback event. In the handler, call the master grid's FindDetailRowTemplateContol method to access all detail grids and use their UpdateEdit methods to update data.

    protected void Grid_CustomCallback(object sender, ASPxGridViewCustomCallbackEventArgs e) {
    ASPxGridView parentGrid = sender as ASPxGridView;
    parentGrid.UpdateEdit();
    parentGrid.DataBind();
    if (String.IsNullOrEmpty(e.Parameters))
        return;
    string[] paramArray = e.Parameters.Split(',');
    for (int i = 0; i < paramArray.Length; i++) {
        if (String.IsNullOrWhiteSpace(paramArray[i]))
            continue;
        ASPxGridView child = parentGrid.FindDetailRowTemplateControl(Convert.ToInt32(paramArray[i]), "grid2") as ASPxGridView;
        if (child != null) {
            child.UpdateEdit();
            child.DataBind();
        }
    }
}

Files to Review

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)