[Solved] How to structure hierarchy

[Philip Senechal]

I'm having a problem trying to figure out how to set up the binding for this treeview.

I have a model named ReportOptionValue setup as follows:

public virtual int Id { get; set; }
public virtual ReportOptionRecord ReportOption { get; set; }
public virtual string OptionValueValue { get; set; }
public virtual string OptionValueName { get; set; }

ReportOptionRecord is the following model

public virtual int Id { get; set; }
public virtual string OptionCode { get; set; }
public virtual string OptionName { get; set; }
public virtual string OptionType { get; set; }

I want the treeview setup so that OptionName from ReportOptionRecord is the title of each node and when expanded, it shows each of the ReportOptionValue records that correspond to the ReportOption. I need the title of the children to be OptionValueName and the value to be OptionValueValue.

Can you help me get the coding for the BindTo and mappings correct for this? I can't seem to figure out how to get the children configured since it seems my model setup is backwards from what the Treeview control expects...I have a parent in my child table, not children in my parent table (if that makes sense at all).

Thanks!

[Philip Senechal]

Just to show you what I have...

@(Html.Telerik().TreeView()
    .Name("availableTree")
    .DragAndDrop(settings => settings
        .DropTargets(".drop-container")
    )
    .ShowLines(false)
    .ClientEvents(events => events
        .OnNodeDrop("onNodeDrop")
    )
    .BindTo(Model.Options, mappings =>
    {
        mappings.For<ReportOptionRecord>(binding => binding
            .ItemDataBound((item, option) =>
            {
                item.Text = String.Format("{0}", option.OptionName);
            })
            .Children(option => option.ReportOptionValueRecord));
        mappings.For<ReportOptionValueRecord>(binding => binding
            .ItemDataBound((item, optionvalue) =>
            {
                item.Text = String.Format("{0}", optionvalue.OptionValueName);
            }));
    })
    .HtmlAttributes(new { style = "overflow: hidden;" })
)

Model.Options is an IEnumerable of ReportOptionRecord

I can't seem to figure out how to configure the .Children line...and how do I pass the ReportOptionValueRecord's into the View, or does the Treeview automatically know how to go get them? The sample is really hard to figure out how they're getting the Products in there from the Categories.

Without the Children, I can get the ReportOptionRecord items to display fine...just can't seem to figure out how to connect them to the ReportOptionValueRecord items and display them as children.

Any help is appreciated. Thanks.

[Philip Senechal]

I've also tried it this way...

@(Html.Telerik().TreeView()
    .Name("availableTree")
    .DragAndDrop(settings => settings
        .DropTargets(".drop-container")
    )
    .ShowLines(false)
    .ClientEvents(events => events
        .OnNodeDrop("onNodeDrop")
    )
    .BindTo(Model.Options, mappings =>
    {
        mappings.For<ReportOptionValueRecord>(binding => binding
            .ItemDataBound((item, option) =>
            {
                item.Text = option.OptionValueName;
                item.Value = option.Id.ToString();
            })
        );
    })
    .HtmlAttributes(new { style = "overflow: hidden;" })
)

which gives me all of the ReportOptionValues, but they're not grouped by ReportOption which is what I need. I tried playing with the item.Parent option, but it just kept giving me errors whatever I tried.

If I need to create a new model and populate it from the other 2 models to make this work, let me know...I can do that too. Thanks.

[Atanas Korchev]

Hi Philip Senechal,

 You need a hierarchical object in order to bind the treeview. Consider our model binding example:

<%= Html.Telerik().TreeView()
        .Name("TreeView")
        .BindTo(Model, mappings => 
        {
            mappings.For<Category>(binding => binding
                    .ItemDataBound((item, category) =>
                    {
                        item.Text = category.CategoryName;
                    })
                    .Children(category => category.Products));
            mappings.For<Product>(binding => binding
                    .ItemDataBound((item, product) =>
                    {
                        item.Text = product.ProductName;
                    }));
        })
%>

The Category class has a property called Products and is of type IEnumerable<Product> (technically EntitySet<Product>):

public class Category
{
   public EntitySet<Product> Products
   {
        /*implementation*/
   }
   public string CategoryName { get; set;}
}
public class Product
{
  public string ProductName { get; set; }
}

 The above configuration tells that for the Category nodes the children come from the Products property. The ItemDataBound is used to set the Text of the node using the property of the bound object. Regards,
Atanas Korchev
the Telerik team

[Philip Senechal]

Thanks Atanas,

I was able to create a new model called OptionTree that consisted of a ReportOptionRecord and IEnumerable<ReportOptionValueRecord>.

I populated it using this method

public IEnumerable<OptionTree> GetOptionTree()
{
    List<OptionTree> optiontree = new List<OptionTree>();
    var reportoptions = from reportoption in _reportoptionRepository.Table
                  select reportoption;
    foreach (var reportoption in reportoptions)
    {
        OptionTree option = new OptionTree();
        option.ReportOption = reportoption;
        List<ReportOptionValueRecord> optionvalues = new List<ReportOptionValueRecord>();
        var reportoptionvalues = from reportoptionvalue in _reportoptionvalueRepository.Table
                                 where reportoptionvalue.ReportOption == reportoption
                                 select reportoptionvalue;
        foreach (var reportoptionvalue in reportoptionvalues)
        {
            optionvalues.Add(reportoptionvalue);
        }
        option.ReportOptionValues = optionvalues.AsEnumerable();
        optiontree.Add(option);
    }
    return optiontree.AsEnumerable();
}

I fed it to my View through a ViewModel that contained an IEnumerable<OptionTree> and then generated my TreeView as follows

@(Html.Telerik().TreeView()
    .Name("availableTree")
    .DragAndDrop(settings => settings
        .DropTargets(".drop-container")
    )
    .ShowLines(false)
    .ClientEvents(events => events
        .OnNodeDrop("onNodeDrop")
    )
    .BindTo(Model.Options, mappings =>
    {
        mappings.For<OptionTree>(binding => binding
            .ItemDataBound((item, option) =>
            {
                item.Text = option.ReportOption.OptionName;
                item.Value = option.ReportOption.Id.ToString();
            })
            .Children(option => option.ReportOptionValues)
        );
        mappings.For<ReportOptionValueRecord>(binding => binding
            .ItemDataBound((item, optionvalue) =>
            {
                item.Text = optionvalue.OptionValueName;
                item.Value = optionvalue.Id.ToString();
            })
        );
    })
    .HtmlAttributes(new { style = "overflow: hidden;" })
)

I believe I tried this before, but what was tripping me up was that the first mapping is to an OptionTree model while the second is directly to the ReportOptionValueRecord. Previously I was trying to map both using OptionTree or mapping the first as ReportOptionRecord and the second as ReportOptionValueRecord.

Anyways...everything is working great now and it's displaying the way I need it to. Thanks for the assistance!