asp.net-mvc - Telerik ツリービューを Telerik Grid にバインドする

Question

RAZOR エンジンで Telerik MVC TreeView を Telerik MVC Grid にバインドする方法。単一の列データ、つまりグリッド内の 1 つの列のみにバインドされた Telerik MVC グリッドを持つダッシュボードを取得しました。そして、Telerik MVC TreeView をグリッド内の各アイテム、つまり各セルにバインドする必要があります。つまり、以下に示すように、Telerik Grid の各セルを TreeView に表示する必要があります。

Answer 1

箱から出すことはできません。ただし、テンプレートを使用できます: http://demos.telerik.com/aspnet-mvc/treeview/templates

列に ClientTemplate を使用し、ツリービューを別の子ビューから ajax でロードできます。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)
}