将Telerik treeview绑定到Telerik网格

Question

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

​

Answer 1

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

您可以通过ajax从另一个子视图将ClientTemplate用于列并将treeview加载到它。下载将在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)
}