GridView for ASP.NET MVC - How to Open a Popup Window on a Hyperlink Click

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()

Files to Look At

• HomeController.cs
• JSCustom.js
• Index.cshtml
• DetailViewPartial.cshtml
• MasterViewPartial.cshtml

Documentation

• CallbackRouteValues
• BeginCallback
• EndCallback
• SetContent

More Examples

• Grid View for ASP.NET MVC - How to Use ContentUrl to Display Detail Data within a Popup Window
• Grid View for ASP.NET Web Forms - How to Display a Popup Dialog When a User Clicks a Link in a Grid Row

Does this example address your development requirements/objectives?

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