Grid View for ASP.NET MVC - How to display detail data in a pop-up window

This example demonstrates how to create a column's template, add a hyperlink to that template, and show a pop-up window with detail grid data on a hyperlink click.

Overview

Call a column's SetDataItemTemplateContent method and add a hyperlink control to the template. Handle the hyperlink's Click event. In the handler, specify the URL to the page with detail data, pass the URL as a parameter to the popup control's SetContentUrl method, and invoke a pop-up window.

settings.Columns.Add(col => {
    col.FieldName = "CustomerID";
    col.SetDataItemTemplateContent(container => {
        Html.DevExpress().HyperLink(hlSettings => {
            hlSettings.Name = string.Format("hl_{0}", (container as GridViewDataItemTemplateContainer).VisibleIndex);
            hlSettings.NavigateUrl = "javascript:void(0)";
            hlSettings.Properties.ClientSideEvents.Click = string.Format("function(s, e) {{ ShowDetailPopup('{0}'); }}", Url.Action("DetailAction", "Home", new { _customerID = (container as GridViewDataItemTemplateContainer).KeyValue.ToString() }));
            hlSettings.Properties.Text = "Show Orders";
        }).Render();
    });
});

function ShowDetailPopup(url) {
    popup.SetContentUrl(url);
    popup.Show()
}

Files to Review

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

Documentation

• Grid View Extension
• Popup Control Extension

More Examples

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