最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - How to load a View as Kendo Window popup on Button Click Event - Stack Overflow

programmeradmin3浏览0评论

I am trying to load a view in a kendo window only on click button’s event. Actually, the popup is displayed each time on the load of the base page. I want that that popup loads only on the click event of the button.

Am I missing something? I've also added onclick event in the html button and called openWindow() javascript method. But it didn't work either, apparently something is wrong.

Is it possible to put the server code of kendo Window below in a jquery function? If yes, how?

<% Html.Kendo().Window()
      .Name("partListGridWindow")
      .Width(800)
.......
%>

Here is my code JQuery:

$(document).ready(function () {
   $("#partListLink")
        .bind("click", function () {
            $("#partListGridWindow").data("kendoWindow").open().center();
        });
});

The kendo Window: In the LoadContentFrom I call PartList which is the Action Name that return my View, from Claim Controller.

<% Html.Kendo().Window()
               .Name("partListGridWindow")
               .Width(800)
               .Modal(true)
               .Title("Part List Info")
               .Content("Loading Part List Info...")
               .LoadContentFrom("PartList", "Claim", Model)
                //.Visible(false)
               .Draggable()
               .Resizable()
               .Render();
%>

Here is the html button:

<a id="partListLink" class="k-button" onclick=openWindow()></a>

By the way, I saw on the Telerik forum they remend this formula to hide the window with Visible = false but it should be a way to bypass the load of those windows at the beginning of the base page load.

What to do in the case there are tens or more of popup windows to load?

Any help is greatly appreciated! Thank you so much for ur help!

I am trying to load a view in a kendo window only on click button’s event. Actually, the popup is displayed each time on the load of the base page. I want that that popup loads only on the click event of the button.

Am I missing something? I've also added onclick event in the html button and called openWindow() javascript method. But it didn't work either, apparently something is wrong.

Is it possible to put the server code of kendo Window below in a jquery function? If yes, how?

<% Html.Kendo().Window()
      .Name("partListGridWindow")
      .Width(800)
.......
%>

Here is my code JQuery:

$(document).ready(function () {
   $("#partListLink")
        .bind("click", function () {
            $("#partListGridWindow").data("kendoWindow").open().center();
        });
});

The kendo Window: In the LoadContentFrom I call PartList which is the Action Name that return my View, from Claim Controller.

<% Html.Kendo().Window()
               .Name("partListGridWindow")
               .Width(800)
               .Modal(true)
               .Title("Part List Info")
               .Content("Loading Part List Info...")
               .LoadContentFrom("PartList", "Claim", Model)
                //.Visible(false)
               .Draggable()
               .Resizable()
               .Render();
%>

Here is the html button:

<a id="partListLink" class="k-button" onclick=openWindow()></a>

By the way, I saw on the Telerik forum they remend this formula to hide the window with Visible = false but it should be a way to bypass the load of those windows at the beginning of the base page load.

What to do in the case there are tens or more of popup windows to load?

Any help is greatly appreciated! Thank you so much for ur help!

Share Improve this question edited Apr 2, 2014 at 14:15 user3470946 asked Apr 1, 2014 at 19:56 user3470946user3470946 431 gold badge1 silver badge7 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 2

If your Kendo Window is populating when the base page Loads you have to set .Visible(false). This is how we've done it in our previous project.

This is the click event

function clientLaunchWindow() {

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

     window.refresh({
             url: "/Order/LaunchWindow"        
     });      
     window.center();
     window.open();

Your Controller will just return the partial view

public ActionResult LaunchWindow()
    {
       return PartialView("_PartialView");
    }

Hello Mate I understand your issue really well. it seems kendo's default feature that it loads content with it's base page load. You should add content instead of LoadcontentFrom chain. and define a div and set a id for that. The in the button click function you should do a ajax call and get the content and load into id that you set for the div.

<% Html.Kendo().Window()
               .Name("partListGridWindow")
               .Width(800)
               .Modal(true)
               .Title("Part List Info")
               .Content(@<text>
                <div id="WindowContent"> </div> </text>)
               .Visible(false)
               .Draggable()
               .Resizable()
               .Render();
%>

Your button is:

function openWindow(e) {
        var GridWindow = $("#partListGridWindow");
        GridWindow.data("kendoWindow").open().center();

    $.ajax({
        type: "GET",
        url: '@Url.Action("LaunchWindow", "Controller")',
        cache: false,
        data: { "x": 1 },

                success: function (result) {
                    if (result) {

                        $("#WindowContent").html(result);
                    }
                    else {
                        $("#WindowContent").html(<h2>No Content found</h3>)
                    }
                }
            });
}
发布评论

评论列表(0)

  1. 暂无评论