单击按钮时剑道网格不会打开剑道窗口

Posted 2023-05-07

【中文标题】单击按钮时剑道网格不会打开剑道窗口

【英文标题】：Kendo grid does not open up kendo window on button click

【发布时间】：2014-06-20 14:37:45

【问题描述】：

我正在开发一个 MVC 4 应用程序，并且在我的视图中使用了 Kendo UI 网格。此视图有一个显示按钮的命令列。单击此按钮时，我应该显示一个显示局部视图的剑道窗口（弹出窗口）。单击此窗口上的“关闭”按钮时，我应该再次返回网格并且网格应该刷新。 现在我有两个问题，

单击网格上的按钮后，它只显示窗口 一次，即如果它关闭窗口并再次尝试单击按钮 网格，没有一个按钮响应！ 单击窗口上的关闭按钮后，虽然窗口 关闭，但网格不会刷新。而是整个页面 刷新。

我使用了下面的代码，

@(html.Kendo()
      .Grid(Model)
      .Name("DefectGrid")
      .Columns(columns =>
      
          columns.Bound(d => d.DefectId).Title("ID").Width("5%");
          columns.Bound(d => d.Title).Title("Title").Width("20%");
          columns.Bound(d => d.Severity).Title("Severity").Width("10%");
          columns.Bound(d => d.Status).Title("Status").Width("10%");
          columns.Bound(d => d.Description).Title("Description").Width("20%");
          columns.Bound(d => d.LoggedBy).Title("LoggedBy").Width("10%");
          columns.Bound(d => d.LoggedOn).Title("LoggedOn").Width("10%");
          columns.Command(command => command.Custom("ViewDetails").Click("showDetails"));
      )
      .Pageable()
      .Sortable()
      .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
      .Scrollable(scr => scr.Height(200))
      .DataSource(dataSource => dataSource
                                          .Ajax()
                                          .Read(read => read.Action("LoadDefects", "Home").Data("refreshGrid").Type(HttpVerbs.Get))
                                          .PageSize(20)
                                          .ServerOperation(false)))

        @(Html.Kendo()
              .Window()
              .Name("Details")
              .Title("Defect Details")
              .Visible(false)
              .Modal(true)
              .Draggable(true)
              .Width(1000)
              .Height(600)
              .Events(ev => ev.Close("onClose"))
        )
        <script type="text/x-kendo-template" id="template">
            <div id="defectDetails">
            </div>
        </script>
            function showDetails(e) 
//                e.preventDefault();

                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                var wnd = $("#Details").data("kendoWindow");

                var defId = dataItem.DefectId;
                var actionURL = '@Url.Action("DefectDetail", "Home")';

                wnd.refresh(
                                url: actionURL,
                                data:  defectId: defId 
                            );
                wnd.center();
                wnd.open();
            

            function onClose(e) 
                if (!confirm("Are you sure you want to close window?"))
                    e.preventDefault();
            

谁能建议我哪里出错了，我该如何解决这个问题！！！

提前致谢

【问题讨论】：

感谢***.com/questions/19837694/… 的帖子，我已经解决了我的第一个问题。请帮我解决第二个问题

在您想要刷新网格的 clise 按钮​​上，然后阅读此内容，***.com/questions/18399805/…

仍然会导致整个页面重新加载。在我写了@Html.Partial("...") 的父页面上我需要做些什么吗？

【参考方案1】：

试试这样，添加script标签就可以了。

<script type="text/javascript">
            function showDetails(e) 

                var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                var wnd = $("#Details").data("kendoWindow");

                var defId = dataItem.DefectId;
                var actionURL = '@Url.Action("DefectDetail", "Home")';

                wnd.refresh(
                    url: actionURL,
                    data:  defectId: defId 
                );
                wnd.center();
                wnd.open();
            
        </script>

【参考方案2】：

您可以通过在网格元素上调用dataSource.read() 来刷新网格

或许你可以在窗口的onClose()事件中做，

$("#DefectGrid").data("kendoGrid").dataSource.read();

【讨论】：

我尝试了上面的代码，但它仍然会导致整个页面刷新...我的网格出现在部分视图中。因此，当我单击弹出窗口中的按钮时，基本上它应该只刷新部分视图而不是整个页面（ajax 之类的东西！！！）。我需要做些什么来 ajaxify 部分视图吗？