GridTemplateColumn and ComboBoxAdv Style

[Aksel Nielsen]

Hello!

I have GridTemplateColumn with ComboBoxAdv (code below). So when I select or click on GridTemplateColumn, font, style and behavior is different than a standard  GridComboBoxColumn. Also I use MaterialLight theme.

How can I style a GridTemplateColumn as a GridComboBoxColumn so that they will be the same?  

Thanks

<syncfusion:GridTextColumn HeaderText="Name" MappingName="Name"/>

<syncfusion:GridComboBoxColumn HeaderText="Type" MappingName="SimpleTrainType" ItemsSource="{x:Static trains:SimpleTrainType.All}" DisplayMemberPath="Name"/>

<syncfusion:GridComboBoxColumn HeaderText="Type TP" MappingName="TechnologProcType" ItemsSource="{x:Static technology:TechnologProcType.All}" DisplayMemberPath="Name"/>

<syncfusion:GridTemplateColumn HeaderText="Operation Type" MappingName="StationOperationType" >

    <syncfusion:GridTemplateColumn.CellTemplate>

        <DataTemplate>

            <syncfusion:ComboBoxAdv ItemsSource="{Binding Source={StaticResource MyEnumValues}}"

                                    SelectedValuePath ="StationOperationType"

                                    SelectedValue="{Binding Source, Converter={StaticResource EnumToCheckedConverter}, ConverterParameter=Value}"

                                    AllowMultiSelect="True" syncfusion:FocusManagerHelper.FocusedElement="True" >

[Chidanand Murugaiah]

Hi Aksel Nielsen,

Based on the provided information, we have analyzed the reported scenario. In the GridComboBoxColumn, we have the edit element as a Combo Box framework control. In the GridTemplateColumn, you are using the Combo Box Adv Syncfusion control. Therefore, it has some behavioral, style, and font differences. If you provide a detailed explanation of your requirement, we can explore possible ways to offer a better solution.

Regards,

Chidanand M.

[Aksel Nielsen]

Ok, I created similar project with that problem and attached it to the message.  Last column has another font color when I select a row. Also when I click on that templated ComvoBoxAdv, it has another opening behavior and appearance too.  So i want that these columns have one font and behaviors .  So I've tried different approaches, but nothing worked.  Maybe You can help me. And from the beginning, I used GridTemplateColumn for binding enum flags. But It doesnt work completely. If enum has two flags or more (bitwise AND), the combobox's checkboxes don't work properly. With one flag everything works. 

So I think if I can't solve this problem, I'll have to find another way or approach. Thanks

Attachment: SyncfusionTestApp_5b3be68c.zip

[Chidanand Murugaiah]

Hi Aksel Nielsen,

I created similar project with that problem and attached it to the message.  Last column has another font color when I select a row. Also when I click on that templated ComvoBoxAdv, it has another opening behavior and appearance too.  So i want that these columns have one font and behaviors

We are unable to run the sample you have sent in this response. We prepared a simple sample with both GridComboBoxColumn and GridTemplateColumn with edit element as ComboBoxAdv. We need some information to proceed further. Could you provide the following details. If possible can you please replicate the issue in the sample which we have provided. Could you please provide the image of the differences between the GridComboBoxColumn and GridTemplateColumn with ComboBoxAdv. Providing these details will help us better understand the issue and work towards finding a solution promptly.

I used GridTemplateColumn for binding enum flags. But It doesnt work completely. If enum has two flags or more (bitwise AND), the combobox's checkboxes don't work properly. With one flag everything works.

We have analyzed the reported scenario. If you want to bind more than one enum flag, then you have to use the SelectedItems property of the ComboBoxAdv. With the provided details we have implement the enum in the simple sample and modified it to achieve your requirement. You can also refer our online user guide documentation regarding the SelectedItems by the following link and also we have attached the sample for your reference. UG link: https://help.syncfusion.com/wpf/combobox/multiselection-support#properties

We hope this helps. Please let us know, if need any further assistance.

Regards,

Chidanand M.

Attachment: SfDataGrid_Demo_e20b411.zip

[Aksel Nielsen]

I used your demo. I added reference to SfSkinManager and used the MaterialLight theme. When mouse is over a row, background color of GridComboBoxColumn turns grey, but  GridTemplateColumn background color doesn't change. Also opening behaviors differentiate among themselves ( GridComboBoxColumn  opens smoothly,  GridTemplateColumn opens immediately). So is it possible to style them uniformly?

Thank you!

Attachment: SfDataGrid_Demo_e20b411_6ca2a86c.zip

[Santhosh Govindasamy]

Aksel Nielsen,

Query1:
When mouse is over a row, background color of GridComboBoxColumn turns grey, but  GridTemplateColumn background color doesn't change.

In Celltemplate, by default, the style will be applied to the gridcell. Suppose when we load the textblock instead of CellTemplate, the hovercolor will be properly applied. However, in this case, when we load the ComboBoxAdv control to our CellTemplate in the GridTemplateColumn, the color doesn't apply.

To overcome this problem, override the SyncfusionComboBoxAdvStyle style and apply the background of ComboBoxAdv based on the mouseover action.

Please refer the code snippet:

<Application.Resources>

     <ResourceDictionary>

         <ResourceDictionary.MergedDictionaries>

 

             <ResourceDictionary Source="/Syncfusion.Themes.MaterialLight.WPF;component/ComboBoxAdv/ComboBoxAdv.xaml"/>

         </ResourceDictionary.MergedDictionaries>

 

 

        

     </ResourceDictionary>

</Application.Resources>

<syncfusion:GridTemplateColumn.CellTemplate>

     <DataTemplate>

         <syncfusion:ComboBoxAdv x:Name="comboBoxAdv" AllowMultiSelect="True" syncfusion:FocusManagerHelper.FocusedElement="True"

                                 SelectedItems="{Binding OperationType}"

                                 ItemsSource="{Binding Source={StaticResource EnumValues}}">

 

             <syncfusion:ComboBoxAdv.Style>

                 <Style TargetType="syncfusion:ComboBoxAdv" BasedOn="{StaticResource SyncfusionComboBoxAdvStyle}">

                     <Setter Property="Background" Value="White" />

                     <Style.Triggers>

                         <Trigger Property="IsMouseOver" Value="True">

                             <Setter Property="Background" Value="LightGray" />

                         </Trigger>

                     </Style.Triggers>

                 </Style>

             </syncfusion:ComboBoxAdv.Style>

 

         </syncfusion:ComboBoxAdv>

        

       

     </DataTemplate>

   

 </syncfusion:GridTemplateColumn.CellTemplate>

 

Query2:
Opening behaviors differentiate among themselves ( GridComboBoxColumn  opens smoothly,  GridTemplateColumn opens immediately). So is it possible to style them uniformly?

Due to a focus problem, the GridTemplateColumn’s  combobox opening will be slightly changed. To overcome this problem, set the FocusManagerHelper’s FocusedElement to true. For your reference, I have attached the UG link for handling "Setting Focus to a particular element inside the template."

UG link-> https://help.syncfusion.com/wpf/datagrid/column-types#setting-focus-to-particular-element-inside-template-when-cell-gets-activated-or-edited

Please refer the code snippet:

<syncfusion:GridTemplateColumn HeaderText="Operation Type" MappingName="OperationType">

   

     <syncfusion:GridTemplateColumn.CellTemplate>

         <DataTemplate>

             <syncfusion:ComboBoxAdv x:Name="comboBoxAdv" AllowMultiSelect="True" syncfusion:FocusManagerHelper.FocusedElement="True"

                                     SelectedItems="{Binding OperationType}"

                                     ItemsSource="{Binding Source={StaticResource EnumValues}}">

 

                 <syncfusion:ComboBoxAdv.Style>

                     <Style TargetType="syncfusion:ComboBoxAdv" BasedOn="{StaticResource SyncfusionComboBoxAdvStyle}">

                         <Setter Property="Background" Value="White" />

                         <Style.Triggers>

                             <Trigger Property="IsMouseOver" Value="True">

                                 <Setter Property="Background" Value="LightGray" />

                             </Trigger>

                         </Style.Triggers>

                     </Style>

                 </syncfusion:ComboBoxAdv.Style>

 

             </syncfusion:ComboBoxAdv>

            

           

         </DataTemplate>

       

     </syncfusion:GridTemplateColumn.CellTemplate>

   

 </syncfusion:GridTemplateColumn>

 
Please refer the output:

Here we have attached the tested sample. Please have a look at this.

Regards,
Santhosh.G

Attachment: SfDataGrid_Demo4_8_8445a102.zip