Telerik MVC Grid Detail Popup with Partial View

An easy way to achieve a popup detail window in GridView has to be the following solution (at least the easiest way I manage to find) :

First in the grid we set two properties (you may have set them already):

•  .ClientEvents(events => events.OnRowSelect("OnRowSelect"))

• .Selectable(selecting => selecting.Enabled(true))

Secondly we need a window to put our partial view in it. This part can be done in many ways but the trivial one is just put a telerik window on the same page with gridview.

<% Html.Telerik().Window()

        .Name("Window")

        .Modal(true)

        .Width(500)

        .Height(500)

        .Title("Window Title")

        .Scrollable(true)

        .Draggable(true)

        .Resizable()

        .Visible(false)

        .Render(); 

    %>

Later we need the javascript function OnRowSelect, either in a script tag or in a js file.

The Id field in the dataItem represents your routeValue which is set in the gridview. ActionName and ControllerName represents your action which returns PartialView.

         function OnRowSelect(e) {

            var dataItem = $('#GridName').data('tGrid').dataItem(e.row);

            var Id= dataItem['Id'];

            $.ajax({

                type: 'POST',

                url: '<%= Url.Action("ActionName", "ControllerName") %>',

                data: { id: Id},

                dataType: 'html',

                success: function (htmlData) {

                    $('# Window ').data('tWindow').content(htmlData);

                    $('# Window ').data('tWindow').center().open();

                }

            })

        }

As the final part we need the action class which responds our ajax post.

        public ActionResult ActionName(int id)

        {

            //Build model for partial view

            return PartialView("PartialViewName", model);

        }

Above code enables row selection and on row click a detail window pops up with your partial view in it.

Hope it helps.

P.S : If there is any typing or coding mistakes let me know. See you later.