Adding checkboxes in RadMenu

2 posts, 0 answers
  1. santhosh
    santhosh avatar
    1 posts
    Member since:
    Sep 2010

    Posted 06 Oct 2011 Link to this post

    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!!
  2. Dani
    Admin
    Dani avatar
    848 posts

    Posted 07 Oct 2011 Link to this post

    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 >>
  3. DevCraft banner
Back to Top