Git Product home page Git Product logo

how-to-select-the-items-in-winui-treeview-sftreeview-'s Introduction

How to select the items in WinUI TreeView (SfTreeView)?

About the sample

This example illustrates how to select the items in WinUI TreeView (SfTreeView)?

WinUI TreeView (SfTreeView) allows selecting the items either programmatically or mouse click/touch interactions by setting the SelectionMode property value to something other than None. The control has different selection modes to perform selection operations listed as follows.

None: Allows disabling the selection.

Single: Allows selecting a single item only. When clicking on the selected item, the selection is not cleared. This is the default value for SelectionMode.

SingleDeselect: Allows selecting a single item only. When clicking on the selected item, the selection gets cleared.

Multiple: Allows selecting more than one item. Selection is not cleared, when selecting multiple items. When clicking on the selected item, the selection gets cleared.

Extended: Allows selecting the multiple items using the common key modifiers.

The following code sample explains the single item selection in TreeView.

<treeView:SfTreeView   x:Name="treeView"
                       Width="400"
                       Height="500"
                       AutoExpandMode="AllNodes"
                       ChildPropertyName="Childs"
                       IsAnimationEnabled="True"
                       SelectionMode="Single"
                       FullRowSelect="True"
                       ItemsSource="{Binding Nodes1}">
            <treeView:SfTreeView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <ContentPresenter Width="20"
                                          Height="20"
                                          HorizontalAlignment="Stretch"
                                          VerticalAlignment="Center"
                                          ContentTemplate="{Binding ImageTemplate}" />
                        <TextBlock
                                            Margin="5"
                                            VerticalAlignment="Center"
                                            Text="{Binding Header}" />
                    </StackPanel>
                </DataTemplate>
            </treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>

Shows the single selection in SfTreeView

Multiple Items Selection

TreeView allows to select multiple items by setting the SfTreeView.SelectionMode as Multiple or Extended.

<treeView:SfTreeView x:Name="treeView"
                     Width="400"
                     Height="500"
                     AutoExpandMode="AllNodes"
                     ChildPropertyName="Childs"
                     IsAnimationEnabled="True"
                     SelectionMode="Multiple"
                     FullRowSelect="True"
                     ItemsSource="{Binding Nodes1}">
            <treeView:SfTreeView.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <ContentPresenter Width="20"
                                          Height="20"
                                          HorizontalAlignment="Stretch"
                                          VerticalAlignment="Center"
                                          ContentTemplate="{Binding ImageTemplate}" />
                        <TextBlock
                                            Margin="5"
                                            VerticalAlignment="Center"
                                            Text="{Binding Header}" />
                    </StackPanel>
                </DataTemplate>
            </treeView:SfTreeView.ItemTemplate>
</treeView:SfTreeView>

Shows the multiple selection in SfTreeView

Programmatic Selection

When the SelectionMode is other than None, the item or items in the TreeView can be selected from the code by setting the SelectedItem or adding items to the SelectedItems property based on the SelectionMode.

When the selection mode is Single or SingleDeselect, programmatically select an item by setting the underlying object to the SelectedItem property.

treeView.SelectedItem = viewModel.Items[0];

When the selection mode is Multiple, programmatically select more than one item by adding the underlying object to the SelectedItems property.

treeView.SelectedItems.Add(viewModel.Items[2]);
treeView.SelectedItems.Add(viewModel.Items[3]);

Note: If an item is selected programmatically when SelectionMode is None and if multiple items are programmatically selected when SelectionMode is Single or SingleDeselect, then an exception will be thrown internally.

Events

SelectionChanging Event

The SelectionChanging event will be triggered while selecting an item at the execution time. The ItemSelectionChangingEventArgs has the following members, which provide the information for the SelectionChanging event:

  • AddedItems: Gets a collection of the underlying data objects where the selection is going to process.

  • RemovedItems: Gets a collection of the underlying data objects where the selection is going to remove.

treeView.SelectionChanging += OnSelectionChanging;

private void OnSelectionChanging(object sender, Syncfusion.UI.Xaml.TreeView.ItemSelectionChangingEventArgs e)
{

}

SelectionChanged event

The SelectionChanged event will occur, once the selection process has been completed for the selected item in the TreeView. The ItemSelectionChangedEventArgs has the following members, which provide information for the SelectionChanged event:

  • AddedItems: Gets a collection of the underlying data objects where the selection has been processed.

  • RemovedItems: Gets a collection of the underlying data objects where the selection has been removed.

treeView.SelectionChanged += OnSelectionChanged;

private void OnSelectionChanged(object sender, Syncfusion.UI.Xaml.TreeView.ItemSelectionChangedEventArgs e)
{

}

Note: SelectionChanging and SelectionChanged events will be triggered only on UI interactions.

Disable the selection for a specific item

TreeView selection for specific items can be disabled by setting the ItemSelectionChangingEventArgs.Cancel property to true in the SelectionChanging event.

treeView.SelectionChanging += OnSelectionChanging;

private void OnSelectionChanging(object sender, Syncfusion.UI.Xaml.TreeView.ItemSelectionChangingEventArgs e)
{
    if(e.AddedItems.Count > 0)
    {
         //disable the selection for specific items by setting the ItemSelectionChangingEventArgs.Cancel property to true.
         if ((e.AddedItems[0] as Model).Header == "Overall Project Plan.docx" || (e.AddedItems[0] as Model).Header == "Server")
              e.Cancel = true;
    }
}

Take a moment to peruse the WinUI TreeView - Selection documentation, where you can find about selection with code examples.

Requirements to run the demo

Visual Studio 2019 and above versions.

how-to-select-the-items-in-winui-treeview-sftreeview-'s People

Contributors

vijayarasan avatar mohanramanbukkarasu avatar sarubala20 avatar vinothkumar-ganesan avatar

Watchers

Vijay Anand avatar Rajendran R avatar Vijayakumar Srinivasan avatar harivenkateshe avatar

Forkers

vijayarasan

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.