Checked event and CheckState

[Heiko]

Hi!

I am binding a RadTreeView to a collection of items which have an "IsChecked" property of type ToggleState. Via ContainerBinding I bind the CheckState property to my own property which is working fine so far. (see XAML)

<telerik:ContainerBindingCollection x:Name="BindingsCollection">
   <telerik:ContainerBinding PropertyName="CheckState" Binding="{Binding IsChecked, Mode=TwoWay}"/>
</telerik:ContainerBindingCollection>
...
...
<telerik:RadTreeView x:Name="tvwProducts" Grid.Row="1"
    ItemsSource="{Binding Products}"
    ItemTemplate="{StaticResource ProductTemplate}"
    ItemsOptionListType="CheckList"
    IsOptionElementsEnabled="True"
    IsDragDropEnabled="False"
    IsTriStateMode="True"
    Checked="TvwProductsChecked"
    Unchecked="TvwProductsUnchecked">
</telerik:RadTreeView>

When looking at the Checked event of RadTreeView I noticed that when this event gets fired the IsChecked property of my item is not set to ToggleState.On (or ToggleState.Indeterminate) although I expected that. In my opinion the Checked event raises after an item is checked which means the CheckState should be On or Indeterminate. Can someone please explain to me?

TIA
Neils

[Pavel R. Pavlov]

Hi Neils,

The "Tri-state" Check Box logic is designed to work only with static (XAML defined) data. This is why the events triggering the ToggleState are not working as you expect when using a data-binding scenario.

However, you can implement a 'tri-state' behavior by using an MVVM approach which is demonstrated in this article. Also at the end of the article you can find a link to our Code Library, where you can download a runnable project. Take a look at the article and let me know if it fits your needs.

Kind regards,
Pavel R. Pavlov
the Telerik team

[Heiko]

Hi Pavel,

and thank you for your answer. This is sad because the functionality and simplicity of ItemsOptionListType "CheckList" is really great - the MVVM example shows how we had to do it *before* CheckList Option and I was glad that these old times are gone - it is lots of code. Anyway, my solution is that I listen to the PropertyChanged event of each item bind to the TreeView component and whenever the "IsChecked" property (=CheckState) has changed my code jumps in.

Thanks again!
Neils

[Heiko]

Sorry, me again. - I found out that when using data-binding and pre-selecting items (CheckState on/off/indeterminate) the whole logic of CheckList in TreeView is not working correct.
Example: I use two classes as parent/child items which both have an IsChecked property of type ToggleState:

private ToggleState _isChecked;
public ToggleState IsChecked
{
    get
    {
        return this._isChecked;
    }
    set
    {
        if (this._isChecked != value)
        {
            this._isChecked = value;
            this.OnPropertyChanged(() => IsChecked);
        }
    }
}

Loading the items as follows:

Categories = new RadObservableCollection<Category>();
for (int i = 1; i <= 3; i++)
{
    Category category = new Category() { Name = "Category " + i, ShortName = "Cat. " + i };
    if (i == 1)
    {
        category.IsChecked = ToggleState.Indeterminate;
    }
    category.PropertyChanged += CategoryOnPropertyChanged;
    Categories.Add(category);
}

foreach (var category in Categories)
{
    for (int j = 1; j <= 5; j++)
    {
        Product product = new Product()
            { Name = "Product " + j, ShortName = "Prod. " + j };
        if(category.IsChecked == ToggleState.Indeterminate)
        {
            if (2 <= j && j <= 4) product.IsChecked = ToggleState.On;
        }
        product.PropertyChanged += ProductOnPropertyChanged;
        category.Products.Add(product);
    }
}

As you can see I set the first parent-item to ToggleState Indeterminate and some of its child-items to ToggleState On. The resulting treeview looks good (see screenshot 1). But as soon as I click a child-item the CheckState of the parent-item changes to Off - again not what I expected (screenshot 2).
This all means: I can't use data-binding with RadTreeView at all. Very sad and a little bit annoying. Do you have a solution other than doing it all by myself?

Regards
Neils

[Tina Stancheva]

Hello Neils,

Thank you for your valuable feedback. We can understand how you feel and why you would like to avoid implementing this scenario by yourself. However, as the RadTreeView is data-driven control designed to display large amounts of hierarchical data, we do our best to keep its performance at top rates.

This being said, we have had many discussions about the built-in CheckBox functionality implemented in our RadTreeView control. These discussions have all been triggered by our customers feedback regarding the current state of the feature. And after extensive research we realized that in order to fix the issues in the built-in logic we'll have to degrade the performance of the control. However, we don't think that this should be an option. Moreover, as the RadTreeView mostly displays business data, we believe that in the MVVM world it's best to implement all custom business-related logic in the view models. The 'tri-state' feature falls into this category and this is why we advice our customers to handle the checked properties changes in the ViewModels.

And as we understand that this can be an extra effort on your behalf, we are here to assist you in any way we can. This is why we created the tutorial with the CodeLibrary sample - so that you can use it directly in your solutions. And in case, you need to implement further customizations in the logic, you can send over your requirements and we'll do our best to assist you with implementing them.

I really feel that in your case, placing the 'tri-state' logic in the view-models is the best approach for your solution. And if you need any help with implementing it in your real-life app, please let us know.

Regards,
Tina Stancheva
the Telerik team

[Heiko]

Hello Tina,

thanks for the detailed explanations, I appreciate it very much. I understand that it is not easy to develop products that cover all needs of each and every developer. I really like Telerik products and the perfect support, so this was just one minor issue. Finally, I solved the problem, and the CodeLibrary example was a perfect start for my solution.

Thanks again!
Neils

[mayur]

hello tina ,

i am getting one problem with that tristate property i.e i created radtreeview in radcombobox so when i checked the elements the text is shown to radcombobox but thing is that when i check child elements then parent name also came how to restrict that name.it must be only appear when i checked all child elements that is my requirment i tried that but i didnt get that..this is my code please gie mi some suggestion

<body>
    <script type="text/javascript">
        function UpdateAllChildren(nodes, checked) {
            var i;

            for (i = 0; i < nodes.get_count() ; i++) {
                if (checked) {
                    nodes.getNode(i).check();
                }
                else {
                    nodes.getNode(i).set_checked(false);
                }

                if (nodes.getNode(i).get_nodes().get_count() > 0) {
                    UpdateAllChildren(nodes.getNode(i).get_nodes(), checked);
                }
            }
        }
        function clientNodeChecked(sender, eventArgs) {
            debugger;
            var combo = $find("<%=RadComboBox1.ClientID%>");

            var childNodes = eventArgs.get_node().get_nodes();
            var isChecked = eventArgs.get_node().get_checked();
            UpdateAllChildren(childNodes, isChecked);



            checkednodes = sender.get_checkedNodes();
            var getnode = "";


            for (var i = 0; i < checkednodes.length; i++) {
                var n = checkednodes[i];
                var nodeText = n.get_text().toString();
                getnode = getnode + n.get_text().toString() + ",";


            }
            getnode = getnode.substring(0, getnode.length - 1);


            combo.set_text(getnode)

            if (checkednodes.length == 0) {
                combo.set_text('');

            }

        }



    </script>
    <form id="form1" runat="server">
    <div>

        <telerik:RadScriptManager ID="RadScriptManager1" runat ="server" ></telerik:RadScriptManager>
          <telerik:RadComboBox ID="RadComboBox1" runat ="server"  EmptyMessage="Please select Vehicles"
               Height="126px" Width="630px"    >
              <ItemTemplate >
                  <telerik:RadTreeView ID="RadTreeView1" runat ="server" CheckBoxes ="true"
                        TriStateCheckBoxes ="true" OnClientNodeChecked="clientNodeChecked" CheckChildNodes="false"    >
                      <Nodes>
                          <telerik:RadTreeNode runat ="server" Text="Bikes" Expanded ="false"   >
                              <Nodes>
                                  <telerik:RadTreeNode runat ="server" Text="Apache">
                                      <Nodes >
                                       <telerik:RadTreeNode runat ="server" Text="Apache125"></telerik:RadTreeNode>
                                      </Nodes>
                                  </telerik:RadTreeNode>
                                  <telerik:RadTreeNode runat ="server" Text="Karizma"></telerik:RadTreeNode>
                              </Nodes>
                          </telerik:RadTreeNode>
                      </Nodes>
                      <Nodes>
                          <telerik:RadTreeNode runat ="server" Text="Cars" Expanded ="false" >
                              <Nodes>
                                  <telerik:RadTreeNode runat ="server" Text="Gallardo"></telerik:RadTreeNode>
                                  <telerik:RadTreeNode runat ="server" Text="Audi"></telerik:RadTreeNode>
                                  <telerik:RadTreeNode runat ="server" Text="Mustang"></telerik:RadTreeNode>
                              </Nodes>
                          </telerik:RadTreeNode>
                      </Nodes>


                  </telerik:RadTreeView>
              </ItemTemplate>
              <Items>
                    <telerik:RadComboBoxItem Text=""></telerik:RadComboBoxItem>
                </Items>
          </telerik:RadComboBox>





    </div>
    </form>
</body>
</html>

[Pavel R. Pavlov]

Hi Mayur,

I understand that you have difficulties when using our components and I understand that you need our assistance to accomplish your requirements. However, I would like to turn your attention to the fact that you have reached the UI for Silverlight forum. I can see from your code that you are actually not using that specific platform. This is why I would kindly ask you to open new thread and ask your question there. Please make sure to set its Product field to the correct one. This way we will handle your question in the best possible way.

Regards,
Pavel R. Pavlov
Telerik

 

 

[mayur]

ok...thanks for suggestion