【问题标题】:Close the Kendo Window(partial view) on button click within the Kendo Window单击剑道窗口中的按钮关闭剑道窗口(部分视图)
【发布时间】:2014-11-29 15:50:46
【问题描述】:

我有一个视图“TestView1.cshtml”,其中有一个由以下代码定义的 Kendo 窗口控件。

 @(Html.Kendo()
    .Window()
    .Name("TestView1Window")
    .Title("About Kendo")
    .Content(@Html.RenderPartial(~/Views/PartialViews/TestPartialView2.cshtml))
     .Draggable()
     .Resizable()
     .Width(600)
    .Actions(actions => actions.Pin().Minimize().Maximize().Close())
    .Events(ev => ev.Close("onClose"))
    .Render();
    )

我正在使用 TestView1.cshtml 中的按钮打开此窗口。

<span id="undo" style="display:none" class="k-button">Click here to open the window.</span>

现在,当窗口加载部分视图“TestPartialView2”时,其中包含 由以下代码定义的 Kendo 按钮控件:-

@(Html.Kendo()
.Button()
.Name("CloseKendoWindow").
.HtmlAttributes(new {@class="Test2",style="font-size:15px;"})
)

现在我想关闭“CloseKendoWindow”按钮上的局部视图“TestPartialView2.cshtml”,并确保 TestView1 视图的其余部分完好无损,就像加载时一样。

基本上,我想要一个 jQuery 解决方案,通过单击 TestPartialView2.cshtml 上的按钮来关闭 TestView1 中的 Kendo Window 控件。

如果对我在这里尝试实现的目标有任何疑问,请发表评论。

【问题讨论】:

  • 你试过这个 $("#window").data("kendoWindow").close();
  • @sakir- $("#window") 是 Kendo Window 的通用标识符,因为根据问题的标识符名称是“TestView1Window”,并且 Kendo Window 控件不在同一个视图中关闭按钮,所以我猜无法通过简单的 jQuery 访问窗口控件。

标签: jquery asp.net-mvc telerik asp.net-mvc-5 kendo-window


【解决方案1】:

我不熟悉 Telerik 控件,但你可以通过下面的 jQuery 代码尝试:

$(document).ready(function () {
        var wnd = $("#window").data("kendoWindow");


        $("#closebtnId").click(function(e) {
            wnd.close();
        });
    });

更新

你可以试试这个

$(#yourbutton).closest(".k-window-content").data("kendoWindow").close();

*用按钮名称替换你的按钮。

还是这个

 $(document).ready(function () {
        $('#nameOfYourWindow').data().kendoWindow.bind('refresh', function(e) {
            var win = this;
            $('#btnClose').click(function() {
                win.close();
            });
        });
    });

【讨论】:

  • 正如我所提到的,窗口和关闭按钮不在同一个视图页面上。所以上面的内容不会按照我的想法工作,但我仍然会尝试重新解决这个问题。感谢您的回答。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2014-06-20
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多