Hello, I have a XamDataTree defined as follows:
<ig:XamDataTree x:Name="_MenuTree" ItemsSource="{Binding Menus}" SelectedDataItems="{Binding SelectedMenuItems}" NodeLineVisibility="Visible" IsExpandedMemberPath="IsExpanded" NodeCheckedChanged="TreeNodeCheckedChanged"> <ig:XamDataTree.CheckBoxSettings> <ig:CheckBoxSettings CheckBoxVisibility="Visible" CheckBoxMode="Auto" /> </ig:XamDataTree.CheckBoxSettings> <ig:XamDataTree.SelectionSettings> <ig:TreeSelectionSettings NodeSelection="Multiple" /> </ig:XamDataTree.SelectionSettings> <ig:XamDataTree.GlobalNodeLayouts> <ig:NodeLayout Key="MenuLayout" TargetTypeName="clsMenuItem" DisplayMemberPath="Description" CheckBoxMemberPath="IsSelected"> </ig:NodeLayout> </ig:XamDataTree.GlobalNodeLayouts> </ig:XamDataTree>
The Menus property is in the ViewModel and is an ObservableCollection of clsMenuItem. clsMenuItem has the following properties: ID (int), Description (string) and ChildItems (ObservableCollection(of clsMenuItem))
I looked at one of the other similar posts on the forums board, but in my case, I don't see anything on the screen when then form loads, even though the Menus property has proper stuff in it.
What am I missing / doing wrong?
Hello Manasi,
Your code appears to be correct, unless there is some sort of issue with data context not being propagated down to the tree, I don’t see any issue with this. I created a sample using the description of your data and your XAML and the tree appeared as expected. Please review the sample and see if you notice may differences which may attribute to your issue.
Let me know if you have any questions.
Sincerely
Valerie
Software Developer
Infragistics Inc
hi Valerie, apparently the ItemSource was being filled after the controls were loaded. I just assigned the "Menus" property in Form Loaded event and it worked fine. Now I have another question:
1) When the form loads, if there are only some child nodes checked and others unchecked, the parent node does not show the "-" (partially selected). But if I check / uncheck on the form, then the sign shows up. Is there something I have to do in the code-behind to show the right states of all check-boxes when the form loads?
2) Can I show Green Check and Red Cross images when the user checks / unchecks something on the form? How can I assign image property to a node depending on whether it is checked or unchecked?
Thanks,
Manasi
PS: I tried to add an image here, didn't show up??
The initial state of the checkbox is being determined by the underlying value that it is bound to. If you use a nullable bool and set the initial value (true = all checked, false = non checked, null = some checked) to indicate the value of the checked children then the tree will appear correctly initially.
For you second question, if you are looking to change the appearance of the Checkbox you can create your own style which re-templates the check box control and then tell the tree to use this style by creating a style targeting the XamDataTreeNodeControl and within this style set the CheckBoxStyle property to use your new checkbox style.
Otherwise if you want to add an additional image to the contents of the Node you can set the ContentTemplate property in a style targeting the XamDataTreeNodeControl and then add your own custom DataTemplate to display the node values along with the image. In order to display certain images based on whether the node is checked, you can use a relative source binding to the XamDataTreeNodeControl and set the visibility based on whether the node is checked. The XamDataTreeNodeControl’s datacontext is set to an instance of a XamDataTreeNodeContext which contains a ‘Data’ property to access the underlying data object and a ‘Node’ property to access properties of the node. You can either bind to the property in your object which is bound to the checkbox or to the node’s IsChecked property, For example:
Visibility="{Binding DataContext.Data.IsSelected,RelativeSource={RelativeSource AncestorType={x:Type ig:XamDataTreeNodeControl}},Converter={StaticResource VisConverter}}"/>
Or
Visibility="{Binding DataContext.Node.IsChecked,RelativeSource={RelativeSource AncestorType={x:Type ig:XamDataTreeNodeControl}},Converter={StaticResource VisConverter}}
Please let me know if you have any questions,
Sincerely,
Valerie,
I made the nullable(boolean) changes as you said and it works OK now. The right nodes show the "-" sign.
I am not sure I follow on the second one. But I will try the method you suggested and get back.
Question: I just added another DataTree that only shows the nodes selected in the first tree. I set it as follows:
<ig:XamDataTree x:Name="_MenuTreeSelected" ItemsSource="{Binding SelectedMenuItems}" NodeLineVisibility="Visible" Grid.Column="1" Grid.Row="0"> <ig:XamDataTree.CheckBoxSettings> <ig:CheckBoxSettings CheckBoxVisibility="Hidden"/> </ig:XamDataTree.CheckBoxSettings> <ig:XamDataTree.GlobalNodeLayouts> <ig:NodeLayout Key="MenuLayoutSelected" TargetTypeName="entMenuItem" DisplayMemberPath="Description" CheckBoxMemberPath="IsSelected"> </ig:NodeLayout> </ig:XamDataTree.GlobalNodeLayouts> </ig:XamDataTree>
I have set the ItemsSource to "SelectedMenuItems" which is the SelectedDataItems Property of the first big grid. "SelectedMenuItems" is IEnumerable(of Object) in the ViewModel class. SelectedMenuItems is always nothing, no matter what I do on the form in the first tree.
How can I connect the two?
Thanks for the help,
When binding to the SelectedDataItems collection the underlying type should be an array of objects (public object[] SelectedMenuItems { get; set; }).
I am attaching a modified sample which illustrates this and also demonstrates the two methods I spoke of previously to either re-template the check box or change the display of the node to show the image. Currently, I have the setter for the CheckBoxStyle commented out so that you can see the modified node look. Simply uncomment the setter for the CheckBoxStlye to run the example with re-templating of the checkbox.
Please let me know if you have any questions.
Hi Valerie,
Thanks for the sample. I created a similar one in VB as I am working in VB.NET. Doesn't seem to work. Please take alook and let me know what I am doing wrong.
The "RaiseEvent PropertyChanged" doesn't do anything. Should I be writing a handler of my own, or does DataTree know what it's supposed to do?
If you need more information or changes to my sample, please let me know. This is first time I am using this control.
Question: If I select a child node on the Main Tree, how can I get the Selected Tree to show the child with the it's parent hierarchy? Is it a property I can set or do I have to do a recursive search to include the parent in the second tree?
Thanks,Manasi
I have been looking over the sample project that you have sent, and currently, it appears that the reason that the sample isn't working correctly is because the DataContext of the window and its containing elements is not set. It also appears that the namespace definitions in a couple of the classes is incorrect as well. From my perspective, it looks like what you were looking to create was a direct VB.NET modeling of the C# project that Valerie sent, and so I have attached a working VB.NET example of the sample Valerie created to this post. You should see that in this sample project, since the data context has been corrected, the "RaiseEventPropertyChanged" part of the clsMenuItem class does get fired for the properties that change in the XamDataTree.
Regarding your most recent question, you will need to do a recursive search to include the parent hierarchy in the ItemsSource of the secondary XamDataTree. The secondary XamDataTree cannot include the hierarchy from the first tree by only having the child node in its collection. You may also need to include a separate node layout for your secondary tree, but I'm not entirely sure on this at the moment. I am going to continue looking into this, and I will update the sample that is attached to this post when I have more information for you on this matter.
Please let me know if you have any other questions or concerns on this matter.
Sincerely,AndrewAssociate DeveloperInfragistics Inc.www.infragistics.com/support
That worked. Thank you.
The definition of that style for XamDataTreeNodeControl in the XamDataTree.Resources is at a lower scope than the one defined in your Grid.Resources, so yes, this will effectively override the one in your Grid.Resources. This is not to say that you can't have both, though.
I would recommend giving the style in your Grid.Resources an x:Key. This will allow you to base the one in your XamDataTree.Resources off of the one in your Grid.Resources by using BasedOn="{StaticResource gridResourceKey}" in the <Style> tag. Note, though, that this will now remove the style from your secondary XamDataTree, as the style in the Grid.Resources will no longer be implicit. You can reapply this style to your secondary XamDataTree by setting the NodeStyle property of your NodeLayout in the secondary tree to "{StaticResource gridResourceKey}." This will allow you to have both the PreviewMouse event and the context menu on the tree that you need it on.
Hi Andrew,
I can now run the selection functionality fine. But if I add the following code to the first Tree's XAML, the PreviewMouseButtonDown event stops working.
<ig:XamDataTree.Resources> <Style TargetType="{x:Type ig:XamDataTreeNodeControl}"> <Setter Property="ContextMenu"> <Setter.Value> <ContextMenu Tag="{Binding Node}"> <MenuItem Header="Remove" /> </ContextMenu> </Setter.Value> </Setter> </Style> </ig:XamDataTree.Resources>
I think this code overrides the Grid.Resources?
Can I have the PreviewMouse event and also the context menu? I need them both in my project.
Thanks
I have taken a look at the sample project that you have attached, and the issue here is not so much the PreviewMouseLeftButtonDown event or the NodeCheckedChanged event. The reason your checkboxes are not changing their state is because you are showing a message box on the PreviewMouseLeftButtonDown event. This message box will essentially demand focus, and since the "PreviewMouse" related events actually happen before the actual mouse events, the mouse action never gets triggered, and so the node never gets checked.
After removing these message boxes from your sample, I see that the NodeCheckedChanged event now gets fired, but there is still an issue. Currently, the "SelectedCopy" collection that you are using for your separate tree is getting populated inside of the setter for the bound object array used for the first tree's SelectedDataItems property. This is going to cause issues, because you will be adding more and more nodes to the tree each time this SelectedDataItems array changes. Currently, you are also adding all of the nodes that exist in the SelectedDataItems collection, so you are getting essentially the same behavior as before, but since you are adding them each time this array changes, you will actually end up with many more nodes in your separate tree than you originally had by binding the separate one to the SelectedDataItems array of the original tree.
It appears to me that perhaps you are slightly confused on what I had meant by usage of the PreviewMouseLeftButtonDown and NodeCheckedChanged events from a couple of posts ago. In an attempt to alleviate that possible confusion, I have created a sample project that is based on the one you have sent me. Note, this sample project is very barebones, in that I have removed all of the styling and anything extra that doesn't pertain to the actual selection-based operations between the two trees. This was intentional, as the point of this sample project is to demonstrate what I had tried to describe from a couple of posts to this forum ago, without the inclusion of the extra styling clutter in the code used.
The sample project demonstrating these operations is attached. I hope it helps you.
I modified the sample with the changes suggested by you, but I still think I am doing it wrong. Especially with the PreviewMouseLeftButtonDown event. If I click on a checkbox, it fires the event, but does not change the checkbox state (doesn't fire the checkedchanged event).
Can you look at the sample and let me know?