Telerik MVC Grid Detail Popup with Partial View (2)

Like my previous post, I will try to show another way to obtain detail view with partial view and popup. This time we will change button's href attribute and there will be no need for row selection.

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


As in the previous post, we have the same window.


<% Html.Telerik().Window()
        .Name("Window")
        .Modal(true)
        .Width(500)
        .Height(500)
        .Title("Window Detay")
        .Scrollable(true)
        .Draggable(true)
        .Resizable()
        .Visible(false)
        .Render(); 
    %>


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 + ');');
        }




        function ViewDetails_OnClick(id) {            
            $.ajax({
                type: 'POST',
                url: '<%= Url.Action("Action", "Controller") %>',
                data: { Id:  id },
                dataType: 'html',
                success: function (htmlData) {
                    $('#Window ').data('tWindow').content(htmlData);
                    $('#Window ').data('tWindow').center().open();
                }
            })
        }

And at last, our action method did not changed.


        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.