BuyLog In
Example E20052
Visible to All Users

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.

GridView for MVC - PopupHyperlink

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.

XML
// 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()  
JavaScript
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.

JavaScript
function OnDetailGridBeginCallback(s, e) {  
    e.customArgs["_customerID"] = currentCustomerID;  
}  
XML
// 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.

JavaScript
function OnDetailGridEndCallback(s, e) {  
    if (!popup.IsVisible())  
        popup.Show();  
}  
XML
// Index.cshtml  
@Html.DevExpress().PopupControl(settings => {  
    // ...  
    settings.SetContent(() => {  
        Html.RenderPartial("DetailViewPartial", null);  
    });  
}).GetHtml()

Files to Look At

Documentation

More Examples

Does this example address your development requirements/objectives?

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

Example Code

DisplayDetailInPopupWindow/Views/Shared/MasterViewPartial.cshtml 
Razor
@model System.Data.DataTable

@Html.DevExpress().GridView(settings => {
    settings.Name = "masterGrid";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "MasterAction" };
    settings.KeyFieldName = "CustomerID";
    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) {{ OnHyperLinkClick('{0}'); }}", (container as GridViewDataItemTemplateContainer).KeyValue.ToString());
                hlSettings.Properties.Text = "Show Orders";
            }).Render();
        });
    });
    settings.Columns.Add("CompanyName");
    settings.Columns.Add("ContactName");
    settings.Columns.Add("ContactTitle");
    settings.Columns.Add("Address");
    settings.Columns.Add("Country");
    settings.Columns.Add("City");
}).Bind(Model).GetHtml()
DisplayDetailInPopupWindow/Views/Shared/DetailViewPartial.cshtml 
Razor
@model System.Data.DataTable

@Html.DevExpress().GridView(settings => {
    settings.Name = "detailGrid";
    settings.CallbackRouteValues = new { Controller = "Home", Action = "DetailPartialAction" };
    settings.KeyFieldName = "OrderID";
    settings.Columns.Add("OrderID");
    settings.Columns.Add("CustomerID");
    settings.Columns.Add("Freight");
    settings.Columns.Add("ShipName");
    settings.Columns.Add("ShipAddress");
    settings.Columns.Add("ShipCity");
    settings.Columns.Add("ShipCountry");
    settings.Columns.Add("ShipPostalCode");
    settings.Columns.Add("ShippedDate");
    settings.ClientSideEvents.BeginCallback = "OnDetailGridBeginCallback";
    settings.ClientSideEvents.EndCallback = "OnDetailGridEndCallback";
}).Bind(Model).GetHtml()
DisplayDetailInPopupWindow/Controllers/HomeController.cs 
C#
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using DisplayDetailInPopupWindow.Models;

namespace DisplayDetailInPopupWindow.Controllers {
    public class HomeController : Controller {
        public ActionResult Index() {
            return View();
        }
        [HttpPost]
        public PartialViewResult MasterAction() {
            return PartialView("MasterViewPartial", CustomerRepository.GetCustomers());
        }
        [HttpPost]
        public PartialViewResult DetailPartialAction(string _customerID) {
            return PartialView("DetailViewPartial", OrderRepository.GetOrders(_customerID));
        }
    }
}
DisplayDetailInPopupWindow/Scripts/JSCustom.js 
JavaScript
var currentCustomerID;
function OnHyperLinkClick(customerID) {
    currentCustomerID = customerID;
    detailGrid.PerformCallback();
}
function OnDetailGridBeginCallback(s, e) {
    e.customArgs["_customerID"] = currentCustomerID;
}
function OnDetailGridEndCallback(s, e) {
    if (!popup.IsVisible()) 
        popup.Show();
}
DisplayDetailInPopupWindow/Views/Home/Index.cshtml 
Razor
@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@Html.Partial("MasterViewPartial", DisplayDetailInPopupWindow.Models.CustomerRepository.GetCustomers())
@Html.DevExpress().PopupControl(settings => {
    settings.Name = "popup";
    settings.Width = System.Web.UI.WebControls.Unit.Pixel(800);
    settings.Height = System.Web.UI.WebControls.Unit.Pixel(400);
    settings.SetContent(() => {
        Html.RenderPartial("DetailViewPartial", null);
    });
}).GetHtml()

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.