asp.net-mvc - 将 Telerik 树视图绑定到 Telerik Grid

Question

如何将 Telerik MVC TreeView 绑定到 RAZOR 引擎中的 Telerik MVC Grid。我有一个仪表板，它有一个 Telerik MVC 网格，绑定了单列数据，即网格中只有一列。我需要将 Telerik MVC TreeView 绑定到网格中的每个项目，即每个单元格。即 Telerik Grid 中的每个单元格都应显示在 TreeView 中，如下所示：

Answer 1

开箱即用是不可能的。但您可以使用模板： http ://demos.telerik.com/aspnet-mvc/treeview/templates

您可以将 ClientTemplate 用于列并通过 ajax 从另一个子视图加载树视图。在 RowDataBound 事件上开始下载。

示例： 网格视图

<script type="text/javascript">

function onRowDataBound(e) {
    var grid = $(this).data('tGrid');
        var dataItem = e.dataItem;
        var replacement = $('div.e-marker-detailarea', e.detailRow);

        $.ajax(
            {
                url: '@Url.Action("GetTreeView", "SomeController")',
                data: {value: dataItem.TreeViewValue},
                type: 'POST',
                error: function() {
                    alert("Error!!!")
                },
                success: function (data, textStatus, XMLHttpRequest) { replacement.html(data); }
            }
        );
    }
}

@(
Html.Telerik().Grid<GridModel>()
        .Name("GridModel")
        .DataBinding(b=>b.Ajax().Select("GridBind", "SomeController"))
        .Columns(columns=>
            {
                columns.Bound(b => b.TreeViewValue).Title("Комментарий").ClientTemplate("<div class=\"e-marker-detailarea\"></div>");
            })
        .ClientEvents(c => c.OnRowDataBound("onRowDataBound"))
)

子树视图：

@{
  Html.Telerik().TreeView()
    .Name("TreeView")
    .Items(item =>
    {
        item.Add()
            .Text("Mail")
            .ImageUrl("~/Content/PanelBar/FirstLook/mail.gif")
            .ImageHtmlAttributes(new { alt = "Mail Icon" })
            .Items(subItem =>
            {
                subItem.Add()
                        .Text("Personal Folders")
                        .ImageUrl("~/Content/PanelBar/FirstLook/mailPersonalFolders.gif")
                        .ImageHtmlAttributes(new { alt = "Personal Folders Icon" });
            });
        item.Add()
            .Text("Contacts")
            .ImageUrl("~/Content/PanelBar/FirstLook/contacts.gif")
            .ImageHtmlAttributes(new { alt = "Contacts Icon" })
            .Items((subItem) =>
            {
                subItem.Add()
                        .Text("My Contacts")
                        .ImageUrl("~/Content/PanelBar/FirstLook/contactsItems.gif")
                        .ImageHtmlAttributes(new { alt = "Contact Icon" });

            });
        item.Add()
            .Text("Tasks")
            .ImageUrl("~/Content/PanelBar/FirstLook/tasks.gif")
            .ImageHtmlAttributes(new { alt = "Tasks Icon" })
            .Items((subItem) =>
            {
                subItem.Add()
                        .Text("My Tasks")
                        .ImageUrl("~/Content/PanelBar/FirstLook/tasksItems.gif")
                        .ImageHtmlAttributes(new { alt = "Task Icon" });                   
            });
    })
}

控制器：

ActionResult GridView()
{
    return View();
}
[GridAction]
ActionResult GridBind()
{
    //initialize IEnumerable<GridModel> gridModelList
    return View(new GridModel(gridModelList));
}

ActionResult GetTreeView(TreeViewValue treeViewValue)
{
    //some calculations to get model
    return PartialView("ChildTreeView", model)
}