This example demonstrates how to open a pop-up dialog when a user clicks a hyperlink in the grid's column.
Define master and detail GridView settings in separate PartialView files: MasterViewPartial.cshtml and DetailViewPartial.cshtml.
In the master grid, create a templated column and add a hyperlink to the template. In the hyperlink's Click event handler, send a callback to the detail grid.
// MasterViewPartial.cshtml
@Html.DevExpress().GridView(settings => {
// ...
settings.KeyFieldName = "CustomerID";
settings.Columns.Add(col => {
col.FieldName = "CustomerID";
col.SetDataItemTemplateContent(container => {
Html.DevExpress().HyperLink(hlSettings => {
// ...
hlSettings.Properties.ClientSideEvents.Click = string.Format("function(s, e) {{ OnHyperLinkClick('{0}'); }}", (container as GridViewDataItemTemplateContainer).KeyValue.ToString());
hlSettings.Properties.Text = "Show Orders";
}).Render();
});
});
// ...
}).Bind(Model).GetHtml()var currentCustomerID;
function OnHyperLinkClick(customerID) {
currentCustomerID = customerID;
detailGrid.PerformCallback();
}Handle the client-side BeginCallback event of the detail grid. In the handler, declare the _customerID property and set it to the current customer ID value. The grid sends this value to the server to filter the detail grid data.
function OnDetailGridBeginCallback(s, e) {
e.customArgs["_customerID"] = currentCustomerID;
}// HomeController.cs
public PartialViewResult DetailPartialAction(string _customerID) {
return PartialView("DetailViewPartial", OrderRepository.GetOrders(_customerID));
}Handle the client-side EndCallback event of the detail grid to show the Popup control that contains the detail grid with filtered data.
function OnDetailGridEndCallback(s, e) {
if (!popup.IsVisible())
popup.Show();
}// Index.cshtml
@Html.DevExpress().PopupControl(settings => {
// ...
settings.SetContent(() => {
Html.RenderPartial("DetailViewPartial", null);
});
}).GetHtml()