jquery - 如何使用 html 帮助程序为 kendotreeview 选择获取 Kendo 网格

Question

我是这个 kendo ui 框架和 Telerik 文档的新手，我找不到我正在寻找的解决方案。现在我通过使用 html helper 创建了一个 Treeview ，如下所示，我的要求是，如果我选择任何一个节点，我必须在右侧(或任何向下的位置或)获取网格，我做对的代码现在显示如下

@(Html.Kendo().TreeView()
      .Name("treeview") //The name of the treeview is mandatory. It specifies the "id" attribute of the widget.
      .Items(items =>
      {
          items.Add().Text("SystemModelling"); //Add item with text "Item1")
          items.Add().Text("SystemConfiguration") //Add item with text "Item2")
              .Items(it => it.Add().Text("Root"));

          items.Add().Text("Domains"); //Add item with text "Item1")
          items.Add().Text("Roles"); //Add item with text "Item2")
          items.Add().Text("Users"); //Add item with text "Item1")

      })
      .Events(ev=>ev.Select("treeview_select"))
)

<script>
    $(function () {
        // Notice that the Name() of the treeview is used to get its client-side instance
        var treeview = $("#treeview").data("kendoTreeView");
    });
</script>

我必须在 treeview_select 事件中做什么编码？

编辑

一个简单的疑问，哪个是在 kendo ui 中工作的最佳方式，是使用 Html helper 还是 kendo javascript.IF helper 是一个包装器，那么 helper 和 javascript 之间有什么区别

Answer 1

您需要在 PartialView 中创建网格，然后在 treeView 中选择一个节点时读取 id :

在 treeView ( Index.cshtml ) 的右侧，您必须创建容器以适合您的网格，例如:

<div id="GridContainer"></div>

在 PartialView 中，将其命名为例如。 Grid.cshtml 您正在使用 Html.Helper 创建网格，就像在 this kendoGrid demo 中一样。

在 Controller 中，你声明了像这样读取这个 PartialView 的 Action :

public partial class GridController : Controller 
{
    [HttpPost]
        public PartialViewResult Grid()
        {
            return PartialView();
        }
}

在 Index.html 中，您可以在 Index.html 中创建 hidden 以确保您的 PartialView URL 正确:

@Html.Hidden("GridURL", Url.Action("Grid", "Grid"))

您正在创建 JavaScript 函数以使用 ajax() 在 treeView 选择上读取此网格:

<script>
    function treeview_select(e){
        $.ajax({
            url: $("#GridURL").val(),
            type: "POST",
            success: function (result) {
                $("#GridContainer").html(result);
            }
        });
    }
</script>