如何使用 html helper 为 kendotreeview 选择获取 kendogrid

Question

我是这个剑道 ui 框架和 Telerik 文档的新手，我找不到我正在寻找的解决方案。现在我使用 html helper 创建了一个树视图，如下所示，我的要求是如果我选择任何一个节点，我必须在右侧（或任何向下的地方或）获得一个网格，我做对的代码现在如下图所示

@(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：

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

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

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

3. 在 Controller 中，您声明要像这样读取此 PartialView 的操作：

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

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

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

5. 您正在创建 JavaScript 函数以使用 ajax() 在 treeView 上读取此网格：

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