Bind Telerik treeview to Telerik Grid - asp.net-mvc

Question

How to bind Telerik MVC TreeView to a Telerik MVC Grid in RAZOR engine. I got a dashboard which has a Telerik MVC Grid bound with single column data ie only one column in a Grid. And I need to bind Telerik MVC TreeView to each Item in the Grid ie each cell. ie each cell in the Telerik Grid should be shown in TreeView, just as shown below :

Answer 1

It is not possible out of the box. But you can use templates:
http://demos.telerik.com/aspnet-mvc/treeview/templates
You can use ClientTemplate for column and load treeview to it by ajax from another child view. Downloading is started on RowDataBound event.
Example:
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" });
});
})
}
Controller:
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)
}