Grid View for ASP.NET Web Forms - Show the Popup Control on the Grid's Custom Button Click

This example demonstrates how to show the ASPxPopupControl when a user clicks the custom button in the grid's command column.

Show the Popup in the Client-Side Custom Button Click Event Handler

Handle the grid's client-side CustomButtonClick event. In the handler, get the key value of the specified row and call the OnDetailsClick function. In this function, send a callback to the popup control with the row's key value as a parameter.

<dx:ASPxPopupControl ID="popup" ClientInstanceName="popup" runat="server" ... >
    ...
</dx:ASPxPopupControl>

<dx:ASPxGridView ID="gv" runat="server" ClientInstanceName="gv" ... >
    <Columns>
        ...
        <dx:GridViewCommandColumn VisibleIndex="4">
            <CustomButtons>
                <dx:GridViewCommandColumnCustomButton ID="btnDetails" Text="Details" />
            </CustomButtons>
        </dx:GridViewCommandColumn>
    </Columns>
    <ClientSideEvents CustomButtonClick="OnCustomButtonClick" />
</dx:ASPxGridView>

function OnCustomButtonClick(s, e) {
    OnDetailsClick(gv.GetRowKey(e.visibleIndex))
}
function OnDetailsClick(keyValue) {
    popup.Show();
    popup.PerformCallback(keyValue);
}

Show the Popup on the Custom Button Callback

Handle the grid's server-side CustomButtonCallback event. In the handler, get the value of the specified data cell and assign this value to the ASPxGridView.JSProperties cpKeyValue property. Handle the popup's client-side EndCallback event. In this handler, send a callback to the popup control with the key value as a parameter.

<dx:ASPxPopupControl ID="popup" ClientInstanceName="popup" runat="server" ...>
    ...
</dx:ASPxPopupControl>

<dx:ASPxGridView ID="gv" runat="server" ClientInstanceName="gv" KeyFieldName="EmployeeID"
    OnCustomButtonCallback="gv_CustomButtonCallback">
    <ClientSideEvents EndCallback="OnEndCallback" />
    <Columns>
        ...
        <dx:GridViewCommandColumn VisibleIndex="4">
            <CustomButtons>
                <dx:GridViewCommandColumnCustomButton ID="btnDetails" Text="Details" />
            </CustomButtons>
        </dx:GridViewCommandColumn>
    </Columns>
</dx:ASPxGridView>

protected void gv_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e) {
    ASPxGridView grid = (ASPxGridView)sender;
    string keyValue = grid.GetRowValues(e.VisibleIndex, "EmployeeID").ToString();
    gv.JSProperties["cpKeyValue"] = keyValue;
}

function OnEndCallback(s, e) {
    popup.Show();
    popup.PerformCallback(gv.cpKeyValue);
}

Show the Popup on the Custom Button Callback When the Grid's CallBacks are disabled

Handle the grid's server-side CustomButtonCallback event. In the handler, get the value of the specified data cell and save this value in the current session state. Show the popup control on the grid's postback.

<dx:ASPxPopupControl ID="popup" ClientInstanceName="popup" runat="server" ...>
    <ContentCollection>
        <dx:PopupControlContentControl ID="PopupControlContentControl1" runat="server">
            <dx:ASPxGridView ID="popupGv" runat="server" .../>
        </dx:PopupControlContentControl>
    </ContentCollection>
</dx:ASPxPopupControl>

<dx:ASPxGridView ID="gv" runat="server" ClientInstanceName="gv" KeyFieldName="EmployeeID"
    OnCustomButtonCallback="gv_CustomButtonCallback" EnableCallBacks="false">
    <Columns>
        ...
        <dx:GridViewCommandColumn VisibleIndex="4">
            <CustomButtons>
                <dx:GridViewCommandColumnCustomButton ID="btnDetails" Text="Details" />
            </CustomButtons>
        </dx:GridViewCommandColumn>
    </Columns>
</dx:ASPxGridView>

protected void gv_CustomButtonCallback(object sender, ASPxGridViewCustomButtonCallbackEventArgs e) {
    ASPxGridView grid = (ASPxGridView)sender;
    string keyValue = grid.GetRowValues(e.VisibleIndex, "EmployeeID").ToString();
    Session["EmployeeID"] = keyValue;
    ((ASPxGridView)PopupControlContentControl1.FindControl("popupGv")).DataBind();
    popup.ShowOnPageLoad = true;
}

Documentation

• How to show ASPxPopupControl on the ASPxGridView's CustomButton click
• ASPxPopupControl
• ASPxGridView
• CustomButtonClick
• ASPxGridView.JSProperties

Files to Look At

• Default1.aspx (VB: Default1.aspx)
• Default1.aspx.cs (VB: Default1.aspx.vb)
• Default2.aspx (VB: Default2.aspx)
• Default2.aspx.cs (VB: Default2.aspx.vb)
• Default3.aspx (VB: Default3.aspx)
• Default3.aspx.cs (VB: Default3.aspx.vb)

Does this example address your development requirements/objectives?

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