This is a migrated thread and some comments may be shown as answers.

[Solved] TreeView() in Grid.DetailView

1 Answer 18 Views
Grid
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Greg
Top achievements
Rank 1
Greg asked on 30 Oct 2012, 06:11 PM
I am trying to use a TreeView control in the DetailView of my grid. Assume a generic model like the following.

class MyModel()
{
    int Id {get; }
    string Prop1 {get; set;}
    string Prop2 {get; set;}
    IEnumerable<string> Items {get; set'}
}

And a View of

@model IEnumerable<MyModel>

Html.Telerik().Grid<MyModel>()
    ... configruation for the grid ... columns bound to Prop1 and Prop2 ....
    .DetailView(d => d.ClientTemplate(
        Html.Terlerik().TreeView()
        .Name("TreeView_<#= Id#>")
        ... configuration for the TreeView ....
        .... HELP .... do not know how to correctly bind ....
        .ToHtmlString()
))
    .DataBinding(... my ajax call...)
    .Render()

My problem is that I do not know the proper way to bind this. The most efficient approach would be to use .BindTo() with the Items property of MyModel. However, I can't figure out the correct syntax to use to reference Items. Is there syntax to bind to Items?

My second approach was to use .DataBinding() to load on demand, but I need MyModel.Id in order to get the correct list and that no longer exists after initialization. Is there any way I can get back to the ClientTemplates name? Or some other parameter?

Finally, I've tried work-arounds via the OnDataBinding and OnDetailViewExpand events, but it doesn't look like they are getting fired.

Thanks for any help.

1 Answer, 1 is accepted

Sort by
0
Greg
Top achievements
Rank 1
answered on 31 Oct 2012, 06:29 PM

Figured out a solution.

In TreeView(), I set the databinding:

.DataBinding(b => b.Ajax().Select(actionName, controllerName, new { listId =  "UPDATE_TO_ID"}))

then added a ClientEvent for OnDataBinding:

.OnDataBinding("onItemDataBinding")


From onItemDataBinding I extracted the list's Id from the Html.Id tag and updated the Ajax Url.

onItemDataBinding: function (e) {
     try {
         var rowId = e.target.id;
         var basicListId = rowId.replace("Treeview_", "");
 
        var updatedUrl = $(e.currentTarget).data('tTreeView').ajax.selectUrl.replace("UPDATE_TO_ID", basicListId);
         $(e.currentTarget).data('tTreeView').ajax.selectUrl = updatedUrl;
     } catch (e) {


The control then continues with the Ajax binding. Hope this helps someone else out.


Tags
Grid
Asked by
Greg
Top achievements
Rank 1
Answers by
Greg
Top achievements
Rank 1
Share this question
or