This is a migrated thread and some comments may be shown as answers.

Adding checkboxes in RadMenu

1 Answer 92 Views
Menu
This is a migrated thread and some comments may be shown as answers.
santhosh
Top achievements
Rank 1
santhosh asked on 06 Oct 2011, 08:23 PM
We're using this radmenu to show static list of products to order.  To select multiple products, we enabled isCheckable property for products for multi-selection. But, there's a usability problem for the users. They're expecting a checkbox before the product name to think it allows multi-selection.

How can we render checkbox in the place of checkmark for RadMenuItem. 

Any code sample is appreciated!!

1 Answer, 1 is accepted

Sort by
0
Dani
Telerik team
answered on 07 Oct 2011, 09:51 AM
Hello Santhosh,

You can replace the tick mark by a checkbox if you edit the SubMenuItemTemplate. You can find the template by generating the ItemContainerStyle in Expression Blend. The SubMenuItemTemplate contains a Path named "Tick". Simply replace it with a CheckBox with the same name.

Consider the example:

<ControlTemplate x:Key="SubMenuItemTemplate" TargetType="telerik:RadMenuItem">
            <Grid x:Name="RootElement">
                <VisualStateManager.VisualStateGroups>
                    <VisualStateGroup x:Name="CommonStates">
                        <VisualState x:Name="Highlighted">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Storyboard.TargetProperty="Visibility" Storyboard.TargetName="HighlightVisual">
                                    <DiscreteObjectKeyFrame KeyTime="0:0:0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Disabled">
                            <Storyboard>
                                <DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="Opacity" Storyboard.TargetName="ContentGrid">
                                    <DiscreteDoubleKeyFrame KeyTime="0" Value="0.5"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Normal"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="FocusStates">
                        <VisualState x:Name="Unfocused"/>
                        <VisualState x:Name="Focused"/>
                    </VisualStateGroup>
                    <VisualStateGroup x:Name="CheckStates">
                        <VisualState x:Name="Checked">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Tick">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Collapsed"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                        <VisualState x:Name="Unchecked"/>
                        <VisualState x:Name="HideIcon">
                            <Storyboard>
                                <ObjectAnimationUsingKeyFrames Duration="0" Storyboard.TargetProperty="Visibility" Storyboard.TargetName="Icon">
                                    <DiscreteObjectKeyFrame KeyTime="0" Value="Visible"/>
                                </ObjectAnimationUsingKeyFrames>
                            </Storyboard>
                        </VisualState>
                    </VisualStateGroup>
                </VisualStateManager.VisualStateGroups>
                <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}"/>
                <Grid Margin="{StaticResource MenuSubItemMargin}">
                    <Border x:Name="HighlightVisual" BorderBrush="{StaticResource ControlOuterBorder_Highlighted}" BorderThickness="1" Background="{StaticResource ControlBackground_Highlighted}" CornerRadius="{StaticResource SplitButton_SpanCornerRadius}" Visibility="Collapsed">
                        <Border BorderBrush="{StaticResource ControlInnerBorder_Highlighted}" BorderThickness="1" CornerRadius="{StaticResource SplitButton_SpanInnerCornerRadius}"/>
                    </Border>
                    <Grid x:Name="ContentGrid">
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="Auto"/>
                            <ColumnDefinition Width="*"/>
                        </Grid.ColumnDefinitions>
                        <Grid Width="{Binding Menu.IconColumnWidth, RelativeSource={RelativeSource TemplatedParent}}">
                            <!--<Path x:Name="Tick" Grid.Column="0" Data="M 0,5.1 L 1.7,5.2 L 3.4,7.1 L 8,0.4 L 9.2,0 L 3.3,10.8 Z" Fill="{TemplateBinding Foreground}" 
                                  FlowDirection="LeftToRight" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>-->
  
                            <!-- NOTE: add a checkbox in the place of the tick path-->
                            <CheckBox x:Name="Tick" Grid.Column="0" Foreground="{TemplateBinding Foreground}" 
                                  FlowDirection="LeftToRight" HorizontalAlignment="Center" Visibility="Collapsed" VerticalAlignment="Center"/>
                              
                            <ContentPresenter x:Name="Icon" ContentTemplate="{TemplateBinding IconTemplate}" Content="{TemplateBinding Icon}" Grid.Column="0" Margin="2 2 10 2"/>
                        </Grid>
                        <ContentPresenter x:Name="Content" ContentTemplate="{TemplateBinding HeaderTemplate}" Content="{TemplateBinding Header}" Grid.Column="1" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" Margin="{TemplateBinding Padding}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                    </Grid>
                </Grid>
            </Grid>
        </ControlTemplate>

I hope this will be helpful.

Kind regards,
Dani
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
Tags
Menu
Asked by
santhosh
Top achievements
Rank 1
Answers by
Dani
Telerik team
Share this question
or