How to show dropdown arrow in synfusion datagrid

Question

I made a combobox column in syncfusion Datagrid, but comboBox is only active when using trigger
I wanna see ComboBoxColumn intuitively like second picutre

Now

i want like this

score 0 · Answer 1 · answered Aug 25 '22 at 15:06

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.

<Style x:Key="dropDownStyle" TargetType="syncfusion:GridCell">
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Gray" />
            <Setter Property="BorderThickness" Value="0,0,1,1" />
            <Setter Property="Padding" Value="0,0,0,0" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="syncfusion:GridCell">
                        <Grid>
                            <VisualStateManager.VisualStateGroups>
                                <VisualStateGroup x:Name="IndicationStates">
                                    <VisualState x:Name="NoError">                                        
                                    </VisualState>
                                    <VisualState x:Name="HasError">
                                        <Storyboard>
                                            <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PART_InValidCellBorder" Storyboard.TargetProperty="(UIElement.Visibility)">
                                                <DiscreteObjectKeyFrame KeyTime="0">
                                                    <DiscreteObjectKeyFrame.Value>
                                                        <Visibility>Visible</Visibility>
                                                    </DiscreteObjectKeyFrame.Value>
                                                </DiscreteObjectKeyFrame>
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                                <VisualStateGroup x:Name="BorderStates">
                                    <VisualState x:Name="NormalCell" />
                                    <VisualState x:Name="FrozenColumnCell"/>
                                    <VisualState x:Name="FooterColumnCell">
                                        <Storyboard BeginTime="0">
                                            <ObjectAnimationUsingKeyFrames BeginTime="0"
                                                                       Duration="1"
                                                                       Storyboard.TargetName="PART_GridCellBorder"
                                                                       Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="1,0,1,1" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                    <VisualState x:Name="BeforeFooterColumnCell">
                                        <Storyboard BeginTime="0">
                                            <ObjectAnimationUsingKeyFrames BeginTime="0"
                                                                       Duration="1"
                                                                       Storyboard.TargetName="PART_GridCellBorder"
                                                                       Storyboard.TargetProperty="BorderThickness">
                                                <DiscreteObjectKeyFrame KeyTime="0" Value="0,0,0,1" />
                                            </ObjectAnimationUsingKeyFrames>
                                        </Storyboard>
                                    </VisualState>
                                </VisualStateGroup>
                            </VisualStateManager.VisualStateGroups>
                            <Border Background="{TemplateBinding CellSelectionBrush}" Visibility="{TemplateBinding SelectionBorderVisibility}" />
                            <Border x:Name="PART_GridCellBorder"
                                Background="{TemplateBinding Background}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>

                                <ContentPresenter Margin="{TemplateBinding Padding}"
                                              FontFamily="{TemplateBinding FontFamily}"
                                              FontSize="{TemplateBinding FontSize}" />
                                <!--Sets the Arrow Path-->
                                <Path Width="14.3"
                                          Height="9.2"
                                          Margin="0,0,11,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 Margin="0,0,1,1"
                                Background="Transparent"
                                BorderBrush="{TemplateBinding CurrentCellBorderBrush}"
                                BorderThickness="{TemplateBinding CurrentCellBorderThickness}"
                                IsHitTestVisible="False"
                                Visibility="{TemplateBinding CurrentCellBorderVisibility}" />
                            <Border x:Name="PART_InValidCellBorder"
                                Width="10"
                                Height="10"
                                HorizontalAlignment="Right"
                                VerticalAlignment="Top"
                                Visibility="Collapsed">
                                <ToolTipService.ToolTip>

                                    <ToolTip Background="#FFDB000C"
                                         Placement="Right"
                                         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"
                                  Stretch="Fill" />
                            </Border>
                        </Grid>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
 </Style>

Define the DropDown style into GridComboBoxColumn

<!--Apply dropDownStyle style into GridComboBoxColumn-->
    <syncfusion:GridComboBoxColumn  HeaderText="Ship City"
                                                    CellStyle="{StaticResource dropDownStyle}"
                                                    ItemsSource="{Binding Shipcities, Source={StaticResource viewModel}}"
                                                    MappingName="ShipCity" />

Sample Link: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SfDataGridDemo-1189499934

How to show dropdown arrow in synfusion datagrid

1 Answers1