Telerik treeview binding

[Rakesh]

 

Hi Telerik team,
I have an issue with the databinding of treeviw in SL 4 VS 2010. C#.
I have an hierarchial data meaning all the root and children belong to the same class.
for e.g. lookup goes like this.

recruiterno          trackno
(null)                     100
100                        1001
100                        1002
1001                    10011

so, I am trying to bind the data in treeview and when I looked at the different types of binding that one can do in the treeview,  I looked at the examples like object datasource , hierarchial datsource but none of them mentions how to bind heirarchial data of same class type to the treeviw. I have been researching all over for the past couple of days. If you can help me out, it would be great!!!

In asp .net: this is such a good example but I cant find like this one in silverlight
http://demos.telerik.com/aspnet-ajax/treeview/examples/programming/databinding/defaultcs.aspx

Rakesh

[Tina Stancheva]

Hi Rakesh,

The Silverlight RadTreeView cannot bind to a self-referencing flat data collection out-of -the-box. However, you can use the approach described in this blog post to implement such scenario.

Please give it a try and let us know if you need more info.

All the best,
Tina Stancheva
the Telerik team

[Rakesh]

yahoooooooooooooooo

Thanks guys.
It worked. awesome...

Rakesh.

Now I am sorry to ask you this. My business requirement is to have a button or a small icon in the treeview row and upon clicking  on it, I want to show some message. Is it possible to add one in SL4 VS 2010 C#?

I have seen some samples where upon cicking on icon, we can open child items, but is it possible to open some message box?

Thanks,
Rakesh

[Tina Stancheva]

Hello Rakesh,

I am not sure if I understand your scenario correctly. What do you mean by "in the treeview row"? Do you need to add an image or a button next to each RadTreeViewItem? If this is the case you can define the required element(image or button) in the ItemTemplate of the RadTreeView, for example:

<telerik:HierarchicalDataTemplate x:Name="ItemTemplate"
         ItemsSource="{Binding Converter={StaticResource HierarchyConverter}}">
    <StackPanel Orientation="Horizontal">
        <TextBlock Text="{Binding Text}"/>
   <Button Content="ClickMe" Click="Button_Click"/>
    </StackPanel>
</telerik:HierarchicalDataTemplate>

Then you can handle the Click() event of the button, for example you can display the Text of each item:

private void Button_Click(object sender, RoutedEventArgs e)
{
    Button btn = sender as Button;
    RadTreeViewItem treeItem = btn.ParentOfType<RadTreeViewItem>();
    string message = (treeItem.Item as DataItem).Text;
    MessageBox.Show(message);
}

However, if you need to display the button/image next to particular items, you can use an ItemContainerSelector and define different ItemTemplates.

Is this close to what you had in mind? If not, can you please elaborate on your scenario a bit more? that will help us further assist you.

Thank you in advance.

Sincerely yours,
Tina Stancheva
the Telerik team

[Rakesh]

Tina,
    Thanks for your reply about button inside the RadtreeviewItem.

Now as per this thread, I am using DataItemCollection to bind the items to the datacontext of Radtreeview.

I want to expand all the nodes. Since I am using this DataItemCollection, I can't explicitly set the Expanded property to be true for every RadtreeviewItem.

Can you please illustrate me how to expand all the nodes programatically for a DataItemCollection?

Thanks,
Rakesh

[Rakesh]

Hi Tina,

First of all in your reply you mentioned to me about the button and the button_click events. As in .net datagrid, any control placed inside the template container will not be visible to the code-behind to play around.

In this case, you have created a button_click event. I am using System.windows.controls.dll too. So conflicts are arising between the system and telerik controls dll especially in the button handler.

So, I was looking for Telerik.Windows.Controls.RoutedEventArgs . I couldn't find it. Can you please elaborate on this,. I am getting exceptions.

Also I want to display an image along with the button and in order to achieve this, for now I modified the DataItem.cs to add a property called photo of bytes[].

Is it possible to add custom properties to the DataItem class without modifying . for e,g, in this case, is it possible for me to add a class or something which can inherit DataItem and I can include customized properties like photo byte[] and stuff.

I have placed those template classes in library and I don't want to customize it in library,I want to keep it clean so that I can reuse it in other modules.

Eagerly waiting for your reply
Thanks,
Rakesh

[Kiril Stanoev]

Hi Rakesh,

First of all in your reply you mentioned to me about the button and the button_click events. As in .net datagrid, any control placed inside the template container will not be visible to the code-behind to play around.

The event handler will be visible as long as it is in the code-behind of the proper XAML file. Please have a look at the attached project for what precisely I have in mind.

In this case, you have created a button_click event. I am using System.windows.controls.dll too. So conflicts are arising between the system and telerik controls dll especially in the button handler.

To overcome this, you can remove the using statements and use the fully qualified name of the item that causes the conflict i.e. System.Windows.Controls.RoutedEventArgs, Telerik.Windows.Controls.RadTreeViewItem etc.

So, I was looking for Telerik.Windows.Controls.RoutedEventArgs . I couldn't find it. Can you please elaborate on this,. I am getting exceptions.

Here is the help page of the Telerik.Windows.Controls.RadRoutedEventArgs class.

Is it possible to add custom properties to the DataItem class without modifying . for e,g, in this case, is it possible for me to add a class or something which can inherit DataItem and I can include customized properties like photo byte[] and stuff.

Only through inheritance you will be able to extend the DataItem class. It is up to you and your scenario to determine how exactly to do that.

Can you please illustrate me how to expand all the nodes programatically for a DataItemCollection?

You can use RadTreeView's public method called ExpandAll().

Let me know how I can be of further assistance.

Best wishes,
Kiril Stanoev
the Telerik team

[Rakesh]

Hello Kiril,
       Thank you so much for taking your time in explaining things.

I figured out how to handle the button events.

I have 2 queries for you.
1. I know its possible to add a button. Is it possible to add a image to the dataitem row? This is because while adding the rows into the treeview, I am having a field of photo_blob[] byte array. So, Is it somehow possible to display the image only if the bytes array is not null?

2. I am using hierarchial treeview of my custom dataset class. So, its not letting me do the expandall() function. I did try using like

3. I am trying to use drag and drop. Though I enabled the drag and drop by setting

IsDragDropEnabled

 

 

="True"

 

is still not working,. It shows me a little red crossed circle. So, I am guessing this is because of the custom hierarchial table. If you yourself can try this one and Expandall() in the sample sent by Tina, you will get what I am saying. For some reason its not letting me do it.

Infact I am even attaching the code snippet:
==========================================================================

 

 

DataItemCollection _treeviewdata = new DataItemCollection();

 

_treeviewdata.Clear();

 

 

foreach (fundraisetreeviewitems item in _fundraisechilds)

 

{

 

 

DataItem _datarow = new DataItem()

 

{

ID = item.TRACKNO,

ParentID = item.RECRUITERNO,

Text =

 

String.Format("{0} {1} [{2}]", item.TRACKNO, item.NAME, item.PID)

 

};

 

 

if (item.PICTURE_BLOB != null)

 

_datarow.Photo = item.PICTURE_BLOB;

_treeviewdata.Add(_datarow);

}

_treeviewdata.First().ParentID = 0;

tv_fundraise.DataContext = _treeviewdata;

tv_fundraise.ExpandAll();

tv_fundraise.DropExpandDelay =

 

TimeSpan.FromSeconds(3);

 

==============================================================================

If you can help me out in this it would be great.

Thanks for your help,
Rakesh

[Hristo]

Hi Rakesh,


I'll briefly describe the solutions to your questions and the rest you can find in the attached example.

1. It is possible to add an image to the TreeViewItem. You can use Image element in the DataTemplate (or HierarchicalDataTemplate) for the particular tree view item. Also you can bind the Visibility property of the image object to custom property in your view model and determine whether the image must be visible or not.

2-3. Please take a look of the attached example and find a working sample demonstrating points 2 and 3.

I hope the attached project solves your issues. If not please elaborate a little bit more at your scenario so we can help you.


Regards,
Hristo Milyakov
the Telerik team

[Rakesh]

Hi Hristo,
   Thannk you so much for the example. It was great.

Well in Expand all I have 3issues .

1. As stated in the thread, I am using an hierarchial dataset class for displaying the items. So, When I do the expand all,
whats happening is, the sub-items are getting duplicated

for e.g.
0.0
       1.1
       1.2
                2.1
                2.2
This is tha actual one. Because of the Expandall() its displaying like
0.0
       1.1
       1.2
                2.1
                2.2
1.2
    2.1
     2.2.

So its redundant,. If you can try the expandall() for the hierarchial data sample provided by you, it will be great.

2. Expandall() doesn't expand the sub-item nodes which has descendants

3. I have seen in some samples that there is a small animation in expanding all items,. i,.e, it opens gradually. It would be nice if you can please tell me how to do it in this hierarchial treeview

4. Even though I explicitly set drag drop for some reason it's not working. So, can you please show me how to do drag drop in hierarchial class. It works in ur previous post but not with the hierarchial class.

Thanks for your help
Rakesh

[Hristo]

Hello Rakesh,

I was not able to reproduce your issues (1,2,4). However I'm attaching a sample which you can examine and see if techniques employed there are working in your case.

The sample also demonstrates how you can enable the drag and drop functionality.

Regarding the animations - unfortunately we intentionally removed the animation during ExpandAll function. That decision was driven by the poor usability when there are many items.
However the animations are maintained by default so you should enjoy them when expanding/collapsing particular items.

All the best,
Hristo Milyakov
the Telerik team

[Rakesh]

Hristo,
      Thanks for the reply but the code you gave dint compile at all.

Missing library references.

[Hristo]

Hi Rakesh,


Can you try adding a reference to the Telerik.Windows.Controls and Telerik.Windows.Controls.Navigation assemblies. If references exist try removing and adding them again.

If this doesn't work please elaborate a bit more on the issue.


Regards,
Hristo Milyakov
the Telerik team

[Rakesh]

hi hristo,
    Well its working now.

I am almost done with this now. But I have a couple of questions

1. Even though I used Dropexpanddelay and set it to say 5 seconds, its opening abruptly. can you please elaborate on it more?

2. Expandall() and Collapseall() works only when its inside the event handler

i.e. samplefunction(object sender, Eventargs e)

How do I do this without inside an event handling function?

3. If I have to expand just the first level of children, how do I use it in hierarchial class to expand using the ExpandItemByPath() property?

Thanks,
Rakesh

[Hristo]

Hello Rakesh,

I'm glad it's working. Please find answers to your questions below:

1. The DropExpandDelay property has the following semantics: Gets or sets the time has to pass before an item will be expanded because of something being dragged over it. You can read more about it here.
I'm a little bit confused what your intentions are. I suppose you want to decrease the animation speed of RadTreeView when users expand or collapse items. If this is the case, there is another practice you can employ. The code snippet bellow slows all animations of the tree view ten times.

AnimationSelector animationSelector =
    AnimationManager.GetAnimationSelector(SampleTreeView) as AnimationSelector;
foreach (Telerik.Windows.Controls.Animation.RadAnimation animation
    in animationSelector.Animations)
{
    animation.SpeedRatio = 0.1;
}

2. Where do you want to use the ExpandAll() or CollaspeAll() methods? I can not came up with a case in Silverlight when you are executing something not in a event handler (maybe only the constructor).

3. If your tree is data bound you can add properties to the view model objects (IsSelected, IsExpanded) and bind them to tree view item properties. Then you will enjoy the flexibility to manipulate your tree view through the data objects. You can set IsExpanded property to true for all root data objects from the view model and this should result in expanding the first level.

Another solution is to use the ExpandItemByPath function to expand required items. But you must know this is a heavy operation that can degrade performance. In addition to make it work you need to declare which field should be used by the function in the search algorithm. This is done by setting the attached property Textelement.SearchPath of the RadTreeView to the appropriate field from your data.

<telerik:RadTreeView Name="SampleTreeView" ....
    ....
    telerik:TextSearch.TextPath="Name">
</telerik:RadTreeView>

I'm attaching a working sample demonstrating the above mentioned techniques (including the two variants in point 3).

Best wishes,
Hristo Milyakov
the Telerik team

[Rakesh]

Thank you so much dude..

Well regarding the event handler for Expand all(),

I am calling it in a function like

populate_treeview()
{
    treeview1.Expandall();
}

Anyways thanks a lot for your help. Great Job

Rakesh

[Hristo]

Hi Rakesh,

You're welcome!

Sincerely yours,
Hristo Milyakov
the Telerik team