Issue with conent url in kendo window

[Nirmala]

Hi,

We are facing an issue with assignment of content of the kendo window from a javascript. The content to be assigned is a url, which links to an action in a controller and this action method returns a partial view, which is to be shown in the window.

We are opening the window ,while clicking on the toolbar create button on the grid. Gird binding is given as follows and after that the declaration of the window is also given

@(Html.Kendo().Grid(Model.Posts)
                    .Name("Grid").Selectable()
                        .ToolBar(toolbar => toolbar.Template(
                            @<text>
                                <a class="k-button k-button-icon k-grid-add" href="#" onclick="AddNewPost(@Model.ClientId)" title="Add New Post">
                                <span class="k-icon k-add"></span>
                                </a>
                            </text>))

                                                .Columns(columns =>
                                                {
                                                    columns.Bound(p => p.poPostId).Hidden();
                                                    columns.Bound(p => p.poTitle).Title("Post Title").Width(390);
                                                    columns.Bound(p => p.poCreateTime).Format("{0:MM/dd/yyyy hh:mm:ss tt}").Title("Created").Width(180);
                                                    columns.Bound(p => p.poUpdateTime).Format("{0:MM/dd/yyyy hh:mm:ss tt}").Title("Last Updated").Width(200);
                                                    
                                                })
                                                .Pageable(pager => pager.PageSizes(true))
                                                .DataSource(dataSource => dataSource.Ajax()
                                                                                    .ServerOperation(false)
                                                                                    .Read(read => read.Action("GetMessages", "Home", new { area = "Post", id = Model.ClientId }))
                                                                                    .Model(model => model.Id(p => p.poPostId))
                                                                                    .PageSize(20)
                                                ).Sortable()
                                                            )    
                   
                        <script type="text/x-kendo-template" id="toobarTemplate">
                       
                        </script>    
                      

                    @(Html.Kendo().Window()
                            .Name("window")
                            //.Buttons(buttons => buttons.Close())
                    .Draggable(true)
                    .Visible(false)
                    .Modal(true)
                    .Title("Post")
                    .Width(850)
                    .Height(400))

The above given window is opened when the add button on the grid's toolbar is clicked. The java script to open the popup is given below.

function AddNewPost(clientid) {
    OpenPostAddEditWindow("Add New Post",0, clientid);
}

function OpenPostAddEditWindow(title, id, clientId) {   
   var window = $("#window").data("kendoWindow");
   window.content({ url: "/Post/Manage/Edit",
       data: { id: 0, clientId: -1112}
   });     
 
   window.title("New Post");
    debugger;
    alert(window.content());
    window.center();
    window.open();
}

when we were using telerik window, the code we used is as given below:

function OpenPostAddEditWindow(title, id,clientId) {
    var url = $.Site.RelativeWebRoot + "Post/Manage/Edit?id=" + id + "&clientId=" + clientId;
    var windowElement = $.telerik.window.create({
        Name: "PostWindow",
        title: title,
        html: '',
        contentUrl: url,
        modal: true,
        resizable: false,
        width: 850,
        height: 400,
        draggable: true,
        onClose: function (e) {
            e.preventDefault();
            windowElement.destroy();
        },
        onRefresh: function (e) {
            windowElement.center();
        }
    }).data('tWindow');
    windowElement.center().open();

}

how can we make it work same as telerik window and how to call an action in the controller given in the url.Please review this and send us the feedback as early as possible.

Thanks
Nirmala

[Daniel]

Hello Nirmala,

You should use the refresh method if you wish to load the content with a request:

var window = $("#window").data("kendoWindow");
window.refresh({ url: "/Post/Manage/Edit",
   data: { id: 0, clientId: -1112}
});

The content method accepts a string with the new Window content.

Regards,
Daniel
the Telerik team