RadGirdView with toggle button for detailed RadGridView with dynamically bind to database

6 posts, 0 answers
  1. Ng
    Ng avatar
    6 posts
    Member since:
    Oct 2014

    Posted 24 Oct 2014 Link to this post

    Hi all,

    I wish to use radgridview for my parent data and whenever the specific parent data row have details data inside and it will show up a toggle button beside my first column data name instead of the default column for toggle button while for the parent data row which is not containing details data will be not able to see the toggle button. I know there's something related with gridviewboundcolumnbase in a new class. Could anyone give some idea or provide some sample? It will be great for me to be done this. Thanks in advance.

    Best Regards,
    Ng
  2. Boris
    Admin
    Boris avatar
    276 posts

    Posted 28 Oct 2014 Link to this post

    Hello Ng,

    A possible way to hide the GridViewToggleButton, when there aren't any sub-items, is to use a hierarchical GridView. For a more practical example you can check the SelfReference WPF / Silverlight demo.


    I hope this helps.

    Regards,
    Boris Penev
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. Ng
    Ng avatar
    6 posts
    Member since:
    Oct 2014

    Posted 28 Oct 2014 in reply to Boris Link to this post

    Hello Boris Penev,

    That is close to what I want but can I use a customized toggle button instead of the default to expand the child?
    I'm currently using MVVM architecture and on the halfway to link to the view model page but still not able to expand the child with the customized toggle button.

    Thanks.
    Best Regards,
    Ng.
  4. Boris
    Admin
    Boris avatar
    276 posts

    Posted 31 Oct 2014 Link to this post

    Hello Ng,

    A possible way to customize the GridViewToggleButton is to edit its GridViewToggleButtonTemplate. For example you can change the value of the Width / Height properties of the Border element in the GridViewToggleButtonTemplate(the default PlusMinusTemplate), to make it wider and higher. 

    I attached a sample project that demonstrates how you can directly edit the GridViewToggleButtonTemplate, located in the Themes/Telerik.Windows.Controls.GridView.xamlfile (line 3337).

    For more information themes and how to edit a ControlTemplate, you can check the Setting a Theme (Using Implicit Styles) and Editing Control Templates documentation articles.

    On a side note, if you are worried about the RowLoaded event handler being defined in code-behind, you can consider using our EventToCommandBehavior. In addition there is one more possible approach for hiding the GridViewToggleButton, which is demonstrate in the CustomHierarchyUsingRowDetails sdk example. Although GitHub is a very well-known platform we saw a better and easier approach for reviewing our examples by developing our SDK Samples Browser.


    Regards,
    Boris
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Ng
    Ng avatar
    6 posts
    Member since:
    Oct 2014

    Posted 31 Oct 2014 in reply to Boris Link to this post

    Hi Boris,

    Okay thanks, but right now the problem I'm facing is can I achieve that expanding hierarchy child template by clicking on a customized GridViewToggleButton instead of click on the ChildTableDefination default toggle button to expand?
    What I want is when I click on the customized toggle button on random row then it can get the row details and manually expand the child template content. Is there any way to make it? I've tried to get a way to achieve it but seems like I'm luckless.

    Best Regards,
    Ng.
  6. Boris
    Admin
    Boris avatar
    276 posts

    Posted 03 Nov 2014 Link to this post

    Hi Ng,

    Without knowing how you customized the default GridViewToggleButton template, I can only guess what went wrong. It might be just a show in the dark but you can check if you have defined in the template the correct visual state groups. You can check the default GridViewToggleButton template and compare it your customized one for any differences: 

    <ControlTemplate x:Key="GridViewToggleButtonTemplate" TargetType="controls:GridViewToggleButton">
            <Border Background="Transparent" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Normal"/>
                        <VisualState x:Name="MouseOver"/>
                        <VisualState x:Name="Disabled"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="plus" Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="0"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetName="minus" Storyboard.TargetProperty="Opacity">
                                    <DiscreteDoubleKeyFrame KeyTime="0:0:0" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Focused"/>
                        <VisualState x:Name="Unfocused"/>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border
                        Width="9"
                        Height="9"
                        Background="{TemplateBinding Background}"
                        BorderBrush="{TemplateBinding BorderBrush}"
                        BorderThickness="{TemplateBinding BorderThickness}"
                        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}">
                    <Grid>
                        <Path x:Name="plus"
                                Fill="{StaticResource GridView_ToggleButtonStroke}"
                                Stretch="Fill"
                                Stroke="{x:Null}"
                                Margin="{TemplateBinding Padding}"
                                Data="M1.937,0 L2.937,0 2.937,2.0209999 5,2.0209999 5,3.0209999 2.937,3.0209999 2.937,5 1.937,5 1.937,3.0209999 0,3.0209999 0,2.0209999 1.937,2.0209999 z"
                                Width="5"
                                Height="5"/>
                        <Rectangle x:Name="minus"
                                Fill="{StaticResource GridView_ToggleButtonStroke}"
                                Stroke="{x:Null}"
                                RadiusX="0"
                                RadiusY="0"
                                Margin="{TemplateBinding Padding}"
                                VerticalAlignment="Center"
                                Height="1"
                                HorizontalAlignment="Center"
                                Width="5"
                                Opacity="0"/>
                    </Grid>
                </Border>
            </Border>
    </ControlTemplate>

    However, if you still have issues with expanding your customized GridViewToggleButton, could you please provide us with a small runnable project that demonstrates the issue?

    Regards,
    Boris
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top