Render MVC partial view content within the Telerik MVC Window via jQuery orJavascript

[Patrick]

Yo, so im using the trail version of Telerik and doing some R&D to check if the telerik controls would suit our dev environment.

 

I have a mvc grid on a view, the grid has an additional action button column using the ClientTemplate(), in this column i render image button which has javascript function linked to the click event which also passes the Grid Id as a parameter. and depending on an active status bound to the grid this also decides what image buttons are displayed.

@(Html.Kendo().Grid<Presentation.AccountGridViewModel>()
                .Name("Grid")
                .Columns(columns =>
                {
                    columns.Select().Width(31);
                    columns.Bound(o => o.Id).Groupable(false).Visible(false);
                    columns.Bound(o => o.Name);
                    columns.Bound(o => o.LastUpdated);
                    columns.Bound(o => o.Active);
                    columns.Bound(o => o.Id).ClientTemplate("<img class='grid-button gb-update' src='../Images/icons/update.png' onclick='update(#=Id#)' title='Update'/>" +
                                                "#if(Active){#<img class='grid-button gb-delete' src='../Images/icons/delete.png' onclick='deactivate(#=Id#)'  title='Delete'/>#}#")
                                            .Width(100)
                                            .Title("Actions")
                                            .Filterable(false);

                })
                .Pageable(pager => pager.AlwaysVisible(true).ButtonCount(5).PageSizes(new List<object> { 5, 10, 20, 100 }))
                .Sortable()
                .Filterable()
                .Scrollable()
                .PersistSelection()
                .Events(ev => ev.Change("onChange"))
                .ClientDetailTemplateId("template")
                .HtmlAttributes(new { style = "height: 500px;margin-top:40px;" })
                .DataSource(d => d
                .Ajax()
                .Model(a => a.Id(p => p.Id))
                .Read(read => read.Action("CustomAjaxBinding_Read", "Setting"))
                .PageSize(20)
                ))

I have also instantiated a very basic window on the page and the rest i control via javascript.

@(Html.Kendo().Window()
                   .Name("window")
                   .Width(650)
                   .Height(500)
                   .Visible(false)
                   .Actions(actions => actions.Maximize().Close())
                   .Draggable())

 

When the grid button is clicked the javascript function i have opens the window with out any issue,sets the title and centers the window. the problem i am having is how do i dynamically render a MVC partial view inside of the window. loading static content is no issue. is there a javascript equivalent to LoadContentFrom() for the MVC control?

The request should pass the Id parameter from the javascript function to a MVC PartialViewResult action and render the partial view within the Telerik window.

function update(Id) {
    $("#window").data("kendoWindow")
        .center()
        .title('Update Account')
        .content("your current ID is : "+ Id)
        // .LoadContentFrom("Test", "Setting")
        .open();
}

 

The end goal here is to display a form within the window that will allow me to update the record and close the window once the save button is clicked and the grid will also be refreshed to display the updated values.

Thanks in advance

 

[Patrick]

Or even better how would i pass the grid id to the instantiation of the window so that i can use the grid id in the window().LoadContentFrom()

[Patrick]

So i have found a solution to this, its more of a hack tho.

I changed my window instantiation and added an Open() event

@(Html.Kendo().Window()
                            .Name("window")
                            .Width(650)
                            .Height(500)
                            .Visible(false)
                            .Actions(actions => actions.Maximize().Close())
                            .Draggable()
                            .Events(events => events
                                    .Open("OpenWindow"))
    )

 

So when i click on my grid button it still calls the update() javascript function, but in the content section i added a loading icon. additionally i added a global variable called UpdateId, the UpdateId get set when i click on the update image button in the grid.

var UpdateId = 0;

        function update(Id) {

            UpdateId = Id;

            $("#window").data("kendoWindow")
                .center()
                .title('Update Account')
                .content("<img src='../images/loader.gif' style='margin:0 auto;'/>")
                .open();
        }

 

the update function open the window, but now my other javascript function called OpenWindow kicks in and makes an ajax request to the server and populates my window with the MVC Partial view content.

function OpenWindow(e) {


           $.ajax({
               cache: false,
               type: 'get',
               data: { 'Id': UpdateId },
               url: '/Setting/UpdateAccount',
               success: function (result) {
                   e.sender.content(result);
               }
           })
       }

 

Even though this works, its probably not the best approach.

 

 

 

 

[Ivan Danchev]

Hello Patrick,

You can try using the Window's refresh method. It allows a parameter to be sent to the action, so your update function could be modified like this:

function update(Id) {

    var win = $("#window").data("kendoWindow");

    win.open().center();

    win.refresh({
        url: "/Setting/UpdateAccount",
        data: { Id: Id }
    });
}

Regards,
Ivan Danchev
Progress Telerik