This example demonstrates how to show the ASPxPopupControl when a user clicks the custom button in the grid's command column.
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);
}
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);
}
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;
}
- How to show ASPxPopupControl on the ASPxGridView's CustomButton click
- ASPxPopupControl
- ASPxGridView
- CustomButtonClick
- ASPxGridView.JSProperties
- 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)