将Telerik树视图绑定到Telerik Grid

Question

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

Answer 1

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

您可以通过另一个子视图中的ajax将ClientTemplate用于列和加载树视图。在RowDataBound事件上启动下载。

实施例： 的 GridView的

<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"))
)

<强> ChildTreeView ：

@{
  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)
}