Is there a way to select complete row in TreeViewAdv?

Is there a way to select complete row in TreeViewAdv? 

7 Replies

VR Vijayalakshmi Roopkumar Syncfusion Team March 1, 2018 03:26 PM UTC

Hi Anup

Thank you for contacting the Syncfusion Support.

We have checked your requirement and it seems that you are asking about the MultiColumnTreeView. If so, you can able to select the Item on clicking the TreeviewItem. We have prepared the simple sample for the same, please download it from following location:

Sample: http://www.syncfusion.com/downloads/support/forum/136154/ze/Multicolumntreeview670011652.zip 

If our understanding on your requirement is different, please brief about your requirement clearly. It would be helpful for us to proceed on this.

Regards
Vijayalakshmi V.R. 
  
  



AL Anup Lokhande March 2, 2018 06:39 AM UTC

Thanks for reply! No, I am not asking about MultiColumnTreeView. Please look at following XAML :
 
            <syncfusion:TreeViewAdv ItemsSource="{Binding Tasks}" >
                 <syncfusion:TreeViewAdv.ItemContainerStyle>
                    <Style TargetType="{x:Type syncfusion:TreeViewItemAdv}">
                        <Setter Property="IsExpanded" Value="True"/>
                    </Style>
                </syncfusion:TreeViewAdv.ItemContainerStyle>
                <syncfusion:TreeViewAdv.ItemTemplate>
                    <HierarchicalDataTemplate ItemsSource="{Binding SubTasks}">
                        <TextBlock Grid.Column="0" Text="{Binding Path=Name, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}" />
                    </HierarchicalDataTemplate>
                </syncfusion:TreeViewAdv.ItemTemplate>
            </syncfusion:TreeViewAdv>




VR Vijayalakshmi Roopkumar Syncfusion Team March 6, 2018 09:18 AM UTC

Hi Anup,

Thank you for the information.

We have prepared a sample that tries to meet your requirement. In our sample, we have override the template of TreeviewAdv by binding TreeviewItemAdv ActualWidth to the border named "BD".

You can download the sample from below location:

Sample: http://www.syncfusion.com/downloads/support/forum/136154/ze/TreeViewAdv_Fullrowselect-2020554806 

Please try this solution and let us know if it is helpful.

Regards
Vijayalakshmi V.R. 



AL Anup Lokhande March 6, 2018 11:03 AM UTC

I have looked at your sample, but there are issues with it 
1. Vertical Scroll is not working.
2.  It slowdown the selection (By looking at following style ,its try to find relative tree item to set Width),   
<Setter Property="Width" TargetName="Bd" Value="{Binding Path=ActualWidth, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type syncfusion:TreeViewItemAdv}}}" />

FYI : In my codebase, I have modified control template, now tree item takes full width, selection is superfast and scroll is working fine. 



Thanks
Anup


VR Vijayalakshmi Roopkumar Syncfusion Team March 7, 2018 11:51 AM UTC

Hi Anup,

From your update, you have said that you have modified the template which works in your application. Can you share the template with us?

Regards,
Vijayalakshmi V.R.


AL Anup Lokhande March 9, 2018 07:05 AM UTC

Sorry for late reply. 

                         <Grid Grid.Column="1" Margin="3,0,0,0" Grid.Row="0" Panel.ZIndex="20">
                                <!--<Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto" />
                                </Grid.ColumnDefinitions>-->

                                <Grid Name="PART_CompleteHeader" >
                                    <Grid.ColumnDefinitions>
                                        <ColumnDefinition Width="Auto" />
                                        <ColumnDefinition Width="*" />
                                    </Grid.ColumnDefinitions>
                                    
                                    <Grid Name="PART_ImagePanel" Grid.Column="0">
                                        <Image Name="ExpanderImage"
               Focusable="False"
               Source="{TemplateBinding ExpandedImageSource}"
               Stretch="{TemplateBinding ImageStretch}"
               Width="{TemplateBinding ImageWidth}"
               Height="{TemplateBinding ImageHeight}" Visibility="Collapsed"
 />

                                        <Image Name="CollapsedImage"
               Focusable="False"
               Source="{TemplateBinding CollapsedImageSource}"
               Stretch="{TemplateBinding ImageStretch}"
               Width="{TemplateBinding ImageWidth}"
               Height="{TemplateBinding ImageHeight}"
 />
                                        <Image Name="LeftImage"
               Focusable="False"
               Margin="2,0,0,0"
               Source="{TemplateBinding LeftImageSource}"
               Stretch="{TemplateBinding ImageStretch}"
               Width="{TemplateBinding ImageWidth}"
               Height="{TemplateBinding ImageHeight}"
 />
                                    </Grid>

                                    <Grid Name="PART_ItemContent" Grid.Column="1"
                                        VerticalAlignment="Center"
                                        Focusable="True"
                                        KeyboardNavigation.TabNavigation="Cycle">
                                        <Border Name="Bd"
                                        ToolTip="{TemplateBinding tools_controls:TreeViewItemAdv.Header}"
                                        ToolTipService.IsEnabled="False"
                                        ToolTipService.Placement="Center"
                                        ToolTipService.HorizontalOffset="4"
                                        ToolTipService.VerticalOffset="2"
                                        Background="{TemplateBinding Panel.Background}"
                                        TextElement.Foreground="{TemplateBinding Foreground}"
                                        BorderBrush="{TemplateBinding BorderBrush}" Margin="0,1,0,1"
                                        Padding="{TemplateBinding Padding}"
                                        CornerRadius="0"
                                        BorderThickness="1"
                                        SnapsToDevicePixels="True"
                                        MinHeight="19">
                                            <Grid>
                                                <ContentPresenter  Name="PART_Header"
  Visibility="Visible" Margin="{TemplateBinding Padding}"
  HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
  VerticalAlignment="Center"
  ContentSource="Header"
  Content="{TemplateBinding tools_controls:TreeViewItemAdv.Header}"
  ContentTemplate="{TemplateBinding tools_controls:TreeViewItemAdv.HeaderTemplate}"
  ContentTemplateSelector="{TemplateBinding tools_controls:TreeViewItemAdv.HeaderTemplateSelector}" />
                                                <ContentPresenter x:Name="LoadingContentPresenter"
                                                      HorizontalAlignment="Left"
                                                      Content="{TemplateBinding LoadingHeader}"
                                                      ContentTemplate="{TemplateBinding LoadingHeaderTemplate}" Visibility="Collapsed" />
                                            </Grid>
                                        </Border>

                                        <ContentPresenter Name="PART_EditHeader"
                                                      Visibility="Collapsed"
                                                      HorizontalAlignment="{TemplateBinding Control.HorizontalContentAlignment}"
                                                      VerticalAlignment="Center"
                                                      ContentSource="Header"
                                                      Content="{Binding Path=Header, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type tools_controls:TreeViewItemAdv}}}"
                                                        ContentTemplate="{Binding Path=EditedItemTemplate, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type tools_controls:TreeViewAdv}}}"
ContentTemplateSelector="{Binding Path=EditedItemTemplateSelector, RelativeSource={RelativeSource FindAncestor, AncestorType={x:Type tools_controls:TreeViewAdv}}}"
 />
                                    </Grid>

                                    <Image Name="RightImage"
                                       Focusable="False"
                   Margin="3,0,3,0"
                   Source="{TemplateBinding RightImageSource}"
                                       Stretch="{TemplateBinding ImageStretch}"
                                       Width="{TemplateBinding ImageWidth}"
                                       Height="{TemplateBinding ImageHeight}" />
                                </Grid>
                            </Grid>



VR Vijayalakshmi Roopkumar Syncfusion Team March 12, 2018 07:29 AM UTC

Hi Anup.

Thank you for the update.

We will use your provided template.

Please let us know if you need any other assistance.

Regards
Vijayalakshmi V.R.

Loader.
Up arrow icon