Telerik MVC Grid Detail Popup with Partial View (3)

This post is just an update to my previous post where partial view with Telerik Window is described. We will update just two steps and the rest will be the same but I will post all details including updated parts.

First we need a column command button in our grid.

        .Columns(columns =>
        {
            //Columns here
            columns.Command(commands =>
            {
                //Other commands
                commands.Custom("viewDetails").ButtonType(GridButtonType.Text)
                             .Text("Detail");
            }).Width(60);
        })

This time we need a different event instead of OnRowSelect.

       .ClientEvents(events =>  events.OnRowDataBound("OnRowDataBound"))

Then we need two javascript functions in script tags. First one will handle the OnRowDataBound event, and second one will handle OnClick event of our custom command button. Id is grid's routevalue, and we use custom command's id to locate our element, t-grid-viewDetails.

        function OnRowDataBound(e) {
            var id = e.dataItem.Id;
            $(e.row).find('a.t-grid-viewDetails').attr('href', 'javascript:ViewDetails_OnClick(' + id + ');');
        }

In the older version of this approach, we put window as invisible in the aspx page and then opened it in javascript function. Here, we will create window in the javascipt function and then open it.
As we create window in javascript, we no longer need hardcoded window in the aspx page, you can remove it. 

        function ViewDetails_OnClick(id) {            
            $.ajax({
                type: 'POST',
                url: '<%= Url.Action("Action", "Controller") %>',
                data: { Id:  id },
                dataType: 'html',
                success: function (htmlData) {
                    var windowElement = $.telerik.window.create({
                        title: "...",
                        html: htmlData,
                        contentUrl: "",
                        actions: ["Maximize", "Close"],
                        modal: true,
                        width: 500,
                        height: 500,
                        resizable: false,
                        draggable: true,
                        scrollable: false,
                        onClose: function () {
                             $("#popupWindow").data('tWindow').destroy();
                         }
                     });
                    windowElement.attr('id', 'popupWindow');
                    var window = $(windowElement).data('tWindow');
                    window.center().open();

                }
            })
        }

And at last, our action method did not change.

        public ActionResult Action(int Id)
        {
            //Prepare model for PartialView
            return PartialView("PartialViewName", model);
        }     

Above code pops up a detail window with your partial view when custom command is clicked.

Hope it helps.

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