Changing Expander Style

17 posts, 0 answers
  1. Jarred Froman
    Jarred Froman avatar
    57 posts
    Member since:
    Aug 2008

    Posted 16 Jul 2010 Link to this post

    We want to change the style of the expander (caret -> + / -).  I see there is a way to change the expanderstyle in the treeview, but don't see the same property in the TreeListView.  Is this possible with the current release?

    Thanks,
    Jarred Froman
  2. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 19 Jul 2010 Link to this post

    Hello Jarred Froman,

     You need to provide a custom implicit style for the GridViewToggleButton class, which is used in the TreeListView.

    Sincerely yours,
    Yavor Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. DevCraft banner
  4. John Thompson
    John Thompson avatar
    44 posts
    Member since:
    Dec 2009

    Posted 19 Jul 2010 Link to this post

    That's not working for me,  I tried this: 

    <!-- Implicit style for the tree grid item expander -->
    <Style TargetType="telerik:GridViewToggleButton">
        <Setter Property="IsEnabled" Value="True" />
        <Setter Property="IsTabStop" Value="False" />
        <Setter Property="Cursor" Value="Hand" />
        <Setter Property="Template">
            <Setter.Value>
                <ControlTemplate TargetType="ToggleButton">
                    <Grid>
                                          ...
                    </Grid>
                </ControlTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    But, alas, it does not work in either my global resources or in the resources for the RadTreeListView itself.  Can you give an example, please?

  5. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 19 Jul 2010 Link to this post

    Hello John Thompson,

     I apologize for misinforming you. An issue with this control part has cropped up which we are currently investigating. I'll let you know the moment a solution presents itself.

    All the best,
    Yavor Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  6. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 20 Jul 2010 Link to this post

    Hi John Thompson,

     I'm attaching a Blend project that changes the style of the expander button in the RadTreeListView. The actual button control is part of the TreeListViewRow class and so you can find the style for the button in the extracted style for the TreeListViewRow class.

    Kind regards,
    Yavor Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  7. John Thompson
    John Thompson avatar
    44 posts
    Member since:
    Dec 2009

    Posted 20 Jul 2010 Link to this post

    Ouch!  That's not real friendly.  Could you consider adding the "ExpanderStyle" property a in RadTreeView?

    Regards,

    John
  8. Yavor Georgiev
    Admin
    Yavor Georgiev avatar
    982 posts

    Posted 20 Jul 2010 Link to this post

    Hi John Thompson,

     Indeed this approach is not very friendly. However, I have some good news: based on your case we have started implementing a couple of properties: HierarchyExpandButtonStyle and HierarchyExpandButtonStyleSelector. We hope they will be available in our internal builds in a couple of weeks. Until then, please accept my apologies for the inconvenience caused.

    Best wishes,
    Yavor Georgiev
    the Telerik team
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  9. John Thompson
    John Thompson avatar
    44 posts
    Member since:
    Dec 2009

    Posted 20 Jul 2010 Link to this post

    I understand... no need to apologize!  But, I am glad there's a simpler solution coming!

    Regards, 

    John
  10. Tim
    Tim avatar
    169 posts
    Member since:
    Apr 2008

    Posted 12 Jan 2011 Link to this post

    I tried this today, applying the same button as your LoadOnDemandExpanderStyle (based on ToggleButton.) I also tried the TargetType="T:GridViewToggleButton" but in neither case does the HierarchyExpandButtonStyle="{StaticResource xxx}" have any effect.  Do you have a working example?  I don't see one in your http://demos.telerik.com/silverlight/#TreeListView/FirstLook example.

    Thanks,
    Tim
  11. John Thompson
    John Thompson avatar
    44 posts
    Member since:
    Dec 2009

    Posted 13 Jan 2011 Link to this post

    Tim, I am sorry, but I don't have an example at this time.  We are currently living with the default expander and I have modified all the RadGridView controls in the application to have a manual toggle column for row details as shown in the following XAML.

                    <Style TargetType="telerik:GridViewToggleButton">
                        <Setter Property="PresentationMode" Value="Arrow" />
                    </Style>
    ...
     
                    <telerik:GridViewColumn Header="Row Details">
                        <telerik:GridViewColumn.CellTemplate>
                            <DataTemplate>
                                <telerik:GridViewToggleButton Click="GridViewToggleButton_Click"/>
                            </DataTemplate>
                        </telerik:GridViewColumn.CellTemplate>
                    </telerik:GridViewColumn>


    The event handler looks something like this.

    private void GridViewToggleButton_Click(object sender, RoutedEventArgs e)
    {
        GridViewToggleButton button = sender as GridViewToggleButton;
     
        if (button == null)
        {
            return;
        }
     
        DataElement element = button.DataContext as DataElement;
     
        if (element == null)
        {
            return;
        }
     
        RadGridView grid = button.ParentOfType<RadGridView>();
     
        if (grid == null)
        {
            return;
        }
     
        GridViewRow row = grid.ItemContainerGenerator.ContainerFromItem(element) as GridViewRow;
     
        if (row == null)
        {
            return;
        }
     
        row.DetailsVisibility = ((button.IsChecked == true) ? Visibility.Visible : Visibility.Collapsed);
    }
  12. IxReveal
    IxReveal avatar
    7 posts
    Member since:
    Jan 2011

    Posted 20 Jan 2011 Link to this post

    I tried the following in XAML

    <

     

     

    Style x:Key="PlusExpanderStyle" TargetType="ToggleButton">

     

     

     

     

    <Setter Property="IsEnabled" Value="True" />

     

     

     

     

    <Setter Property="IsTabStop" Value="False" />

     

     

     

     

    <Setter Property="Cursor" Value="Hand" />

     

     

     

     

    <Setter Property="Template">

     

     

     

     

    <Setter.Value>

     

     

     

     

    <ControlTemplate TargetType="ToggleButton">

     

     

     

     

    <Grid>

     

     

     

     

    <VisualStateManager.VisualStateGroups>

     

     

     

     

    <VisualStateGroup x:Name="CommonStates">

     

     

     

     

    <VisualState x:Name="Normal"></VisualState>

     

     

     

     

    <VisualState x:Name="MouseOver">

     

     

     

     

    <Storyboard>

     

     

     

     

    <DoubleAnimation Duration="0:0:0.05"

     

     

     

    Storyboard.TargetName="Button"

     

     

     

    Storyboard.TargetProperty="Opacity" To="0" />

     

     

     

     

    <DoubleAnimation Duration="0:0:0.05"

     

     

     

    Storyboard.TargetName="ButtonOver"

     

     

     

    Storyboard.TargetProperty="Opacity" To="1" />

     

     

     

     

    </Storyboard>

     

     

     

     

    </VisualState>

     

     

     

     

    </VisualStateGroup>

     

     

     

     

    <VisualStateGroup x:Name="CheckStates">

     

     

     

     

    <VisualState x:Name="Checked">

     

     

     

     

    <Storyboard>

     

     

     

     

    <DoubleAnimation Duration="0:0:0.05"

     

     

     

    Storyboard.TargetName="CollapsedVisual"

     

     

     

    Storyboard.TargetProperty="Opacity" To="0" />

     

     

     

     

    <DoubleAnimation Duration="0:0:0.05"

     

     

     

    Storyboard.TargetName="CollapsedVisualOver"

     

     

     

    Storyboard.TargetProperty="Opacity" To="0" />

     

     

     

     

    </Storyboard>

     

     

     

     

    </VisualState>

     

     

     

     

    <VisualState x:Name="Unchecked">

     

     

     

     

    <Storyboard>

     

     

     

     

    <DoubleAnimation Duration="0:0:0.05"

     

     

     

    Storyboard.TargetName="CollapsedVisual"

     

     

     

    Storyboard.TargetProperty="Opacity" To="1" />

     

     

     

     

    <DoubleAnimation Duration="0:0:0.05"

     

     

     

    Storyboard.TargetName="CollapsedVisualOver"

     

     

     

    Storyboard.TargetProperty="Opacity" To="1" />

     

     

     

     

    </Storyboard>

     

     

     

     

    </VisualState>

     

     

     

     

    </VisualStateGroup>

     

     

     

     

    </VisualStateManager.VisualStateGroups>

     

     

     

     

    <Grid x:Name="Button" Margin="0,7,4,0" HorizontalAlignment="Right"

     

     

     

    VerticalAlignment="Top" Width="11" Height="11">

     

     

     

     

    <Grid.Background>

     

     

     

     

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     

     

     

     

    <GradientStop Color="#3F047BA5" Offset="0.996" />

     

     

     

     

    <GradientStop Color="#00000000" Offset="0" />

     

     

     

     

    </LinearGradientBrush>

     

     

     

     

    </Grid.Background>

     

     

     

     

    <Rectangle Stroke="#FF000000" HorizontalAlignment="Left"

     

     

     

    VerticalAlignment="Top" Width="11" Height="11" />

     

     

     

     

    <Rectangle x:Name="CollapsedVisual" Fill="#FF000000"

     

     

     

    HorizontalAlignment="Left" VerticalAlignment="Top" Width="1"

     

     

     

    Height="5" Margin="5,3,0,0" />

     

     

     

     

    <Rectangle Fill="#FF000000" VerticalAlignment="Top"

     

     

     

    HorizontalAlignment="Left" Height="1" Width="5"

     

     

     

    Margin="3,5,0,0" />

     

     

     

     

    </Grid>

     

     

     

     

    <Grid x:Name="ButtonOver" Margin="0,7,4,0" HorizontalAlignment="Right"

     

     

     

    VerticalAlignment="Top" Width="11" Height="11">

     

     

     

     

    <Rectangle Stroke="#FF167497" HorizontalAlignment="Left"

     

     

     

    VerticalAlignment="Top" Width="11" Height="11">

     

     

     

     

    <Rectangle.Fill>

     

     

     

     

    <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0">

     

     

     

     

    <GradientStop Color="#26167497" Offset="1" />

     

     

     

     

    <GradientStop Color="#00167497" Offset="0" />

     

     

     

     

    </LinearGradientBrush>

     

     

     

     

    </Rectangle.Fill>

     

     

     

     

    </Rectangle>

     

     

     

     

    <Rectangle x:Name="CollapsedVisualOver" Fill="#FF167497"

     

     

     

    HorizontalAlignment="Left" VerticalAlignment="Top" Width="1"

     

     

     

    Height="5" Margin="5,3,0,0" />

     

     

     

     

    <Rectangle Fill="#FF167497" VerticalAlignment="Top"

     

     

     

    HorizontalAlignment="Left" Height="1" Width="5"

     

     

     

    Margin="3,5,0,0" />

     

     

     

     

    </Grid>

     

     

     

     

    </Grid>

     

     

     

     

    </ControlTemplate>

     

     

     

     

    </Setter.Value>

     

     

     

     

    </Setter>

     

     

     

     

    </Style>

     


    <

     

     

    telerik:RadTreeListView x:Name="ConceptBankTreeView" telerik:StyleManager.Theme="Office_Blue" RowLoaded="RadTreeListView_RowLoaded" RowIsExpandedChanging="RadTreeListView_RowIsExpandedChanging"

     

     

     

    Background="White"

     

     

     

    RowIndicatorVisibility="Collapsed"

     

     

     

    HierarchyExpandButtonStyle="{StaticResource PlusExpanderStyle}"

     


    No visual change occured and yet when I do this XAML change with a TreeView the expanders are changed
  13. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 25 Jan 2011 Link to this post

    Hi,

    It seems it is a bug and the HierarchyExpandButtonStyle is not working in RadTreeListView for Silverlight.
    We have fix it in the default theme - Office_Blank and it will be available in the next internal build.
    We will fix the other themes soon as well.

    Please excuse us for the inconvenience

    Best wishes,
    Veselin Vasilev
    the Telerik team
    Let us know about your Windows Phone 7 application built with RadControls and we will help you promote it. Learn more>>
  14. Prakash
    Prakash avatar
    9 posts
    Member since:
    Jul 2009

    Posted 25 Feb 2011 Link to this post

    Hi,

    Has the TreeListView.HierarchyExpandButtonStyle property been fixed yet? We're using the Q3 2010 SP1 version of the TreeListView with the Windows 7 theme and it does not appear to pick up the GridViewToggleButton style that we've defined for it.

    Thanks,
    Prakash
  15. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 28 Feb 2011 Link to this post

    Hi Prakash,

    As a kind of workaround I may suggest you to manually set the style with TargetType GridViewToggleButton in the following manner:

    <UserControl.Resources>
        <Style x:Key="st"  TargetType="telerik:GridViewToggleButton" telerik:StyleManager.BasedOn="Windows7">
            <Setter Property="PresentationMode" Value="PlusMinus"/>
            </Style>
        </UserControl.Resources>
        <Grid x:Name="LayoutRoot" Background="White" DataContext="{Binding Source={StaticResource SampleDataSource}}">
            <telerik:RadTreeListView telerik:StyleManager.Theme="Windows7" HierarchyExpandButtonStyle="{StaticResource st}" ItemsSource="{Binding Collection}">
                <telerik:RadTreeListView.ChildTableDefinitions>
                    <telerik:TreeListViewTableDefinition ItemsSource="{Binding Collection}"/>
                    </telerik:RadTreeListView.ChildTableDefinitions>
                </telerik:RadTreeListView>
        </Grid>
    </UserControl>


    Also you may check the attached project for further reference.


    Kind regards,
    Vanya Pavlova
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
  16. Prakash
    Prakash avatar
    9 posts
    Member since:
    Jul 2009

    Posted 28 Feb 2011 Link to this post

    Hi Vanya,

    Thank you for the prompt response. While the sample that you sent me displays the '+/-' expanders correctly, this appears to work only with the newer v 2011.1.223.1040 version of the Telerik SL assemblies that you have used for it. Identical code that I've used in our application but going against the 2010 Q3 SP 1 version - v 2010.3.1314.1040 that we currently use shows the TreeGridView with the default expander buttons. I confirmed this by recompiling the sample to go against the 2010.3.1314 version and sure enough it reverted to the default buttons. Is 2011.1.223.1040 the 2011 beta build that is currently available for download? Do you know when this version is scheduled for official production release?

    Thank you,
    Prakash 
  17. Prakash
    Prakash avatar
    9 posts
    Member since:
    Jul 2009

    Posted 01 Mar 2011 Link to this post

    Hi Vanya,

    I've downloaded the 2011 beta build and can now see the plus/minus expander buttons displayed correctly in our application.

    More importantly it looks like the 2011 beta fixes a large memory leak that is present in the 2010 SP1 version of the TreeGridView. We noticed recently that the 2010 TreeGridView was consuming something of the order of 7-10 MB for each expanded row in a virtualized treegrid bound to 27K rows. This was unscalable and IE's memory consumption was racking up to 0.5 GB in very short order making it unstable. The 2011 beta is a significant improvement and while memory usage still creeps up it is nowhere close to what it was -  closer to 1 to 2 MB per expanded node and the control now appears to be a bit more diligent about releasing it. Is this beta the definitive version of the TreeGrid or does the Telerik development team intend to clean up the memory leak some more prior to the official 2011 Q1 release?

    Thank you for addressing these two issues in the newer version. This is very much appreciated.

    Thanks,
    Prakash
  18. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 04 Mar 2011 Link to this post

    Hello Prakash,

    Thank you for taking the time to try to our Q1 2011 Beta release!

    We are constantly working on improving the performance across all controls and we are doing our best to ship as much as possible improvements with our Q1 2011 official release.
     
    All the best,
    Vanya Pavlova
    the Telerik team
    Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!
Back to Top
DevCraft banner