We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to differentiate the GridCombobox column from other columns in non-editable display mode?

Platform: WPF |
Control: SfDataGrid

You can differentiate the GridComboBoxColumn from other columns by showing the drop down arrow in the display mode. Normally, it is shown only in the edit mode. For this, you need to write the custom style for the GridCell and assign that style to the GridComboBoxColumn.CellStyle property, as follows.

 XAML 

<Style x:Key="style1" TargetType="syncfusion:GridCell">
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="syncfusion:GridCell">
                        <Grid SnapsToDevicePixels="True">
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="IndicationStates">
 
                                    <VisualState x:Name="HasError">
                                        <Storyboard>
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                                <EasingDoubleKeyFrame KeyTime="0" Value="10" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="NoError">
                                        <Storyboard BeginTime="0">
                                            <DoubleAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="Width">
                                                <EasingDoubleKeyFrame KeyTime="0" Value="1" />
                                                <EasingDoubleKeyFrame KeyTime="0" Value="0" />
                                            </DoubleAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}"
                                    SnapsToDevicePixels="True">
                                <Grid>
                                    <ContentPresenter Margin="{TemplateBinding Padding}" />
                      <!--Sets the Arrow Path-->.
                                    <Path Width="5.3"
                                          Height="4.2"
                                          Margin="0,0,7,0"
                                          HorizontalAlignment="Right"
                                          VerticalAlignment="Center"
                                          Data="F1M0,0L2.667,2.66665 5.3334,0 5.3334,-1.78168 2.6667,0.88501 0,-1.78168 0,0z"
                                          Fill="Gray"
                                          Stretch="Uniform" />
                                </Grid>
                            </Border>
                            <Border Background="Transparent"
                                    BorderBrush="{TemplateBinding CurrentCellBorderBrush}"
                                    BorderThickness="{TemplateBinding CurrentCellBorderThickness}"
                                    IsHitTestVisible="False"
                                    SnapsToDevicePixels="True"
                                    Visibility="{TemplateBinding CurrentCellBorderVisibility}" />
                            <Border x:Name="PART_InValidCellBorder"
                                    Width="10"
                                    Height="10"
                                    HorizontalAlignment="Right"
                                    VerticalAlignment="Top"
                                    SnapsToDevicePixels="True">
                                <ToolTipService.ToolTip>
                                    <ToolTip Background="#FFDB000C"
                                             Placement="Right"
                                             PlacementRectangle="20,0,0,0"
                                             Tag="{TemplateBinding ErrorMessage}"
                                           Template="{StaticResource ValidationToolTipTemplate}" />
                                </ToolTipService.ToolTip>
                                <Path Data="M0.5,0.5 L12.652698,0.5 12.652698,12.068006 z"
                                      Fill="Red"
                                      SnapsToDevicePixels="True"
                                      Stretch="Fill" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

 

 

Note:

The above custom style is only applicable for the WPF platform. For WinRT and Windows Phone, UWP refer to the following sample links.

 

The following screenshot shows to differentiate the GridComboBoxColumn from other columns,

GridColumn display mode

Figure 1: Shows drop down arrow for GridComboBoxColumn in display mode

 

Sample Links:

WinRT

2X faster development

The ultimate WPF UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile