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

[Ng]

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

[Boris]

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

 

 

[Ng]

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.

[Boris]

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

 

 

[Ng]

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.

[Boris]

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