comboboxcolumn with multiple values

[ManniAT]

Hi,

is it possible to have a comboboxcolumn with checked entries.

I have a grid with products which can belong to multiple categories.

In the model I have a property CategoryIDs int[].

What I want is a comboboxcolumn which show in the "selected row" the first bound category.

And if I open it it should have checked (checkmark/checkable) entries for all bound categoeries.

Is this possible in a MVVM scenario (no code behind / event handling)?

[Mohanram Anbukkarasu]

Hi ManniAT, 

Thanks for contacting Syncfusion support.  

You can achieve your requirement to select multi values from the dropdown for the collection in the underlying  data object by using GridTemplateColumn with ComboBoxAdv as CellTemplate as shown in the following code example.  

Code example :  

<syncfusion:GridTemplateColumn MappingName="ShipCities"> 

     <syncfusion:GridTemplateColumn.CellTemplate> 

         <DataTemplate> 

             <syncfusion:ComboBoxAdv ItemsSource="{Binding Cities, Source={StaticResource viewModel},UpdateSourceTrigger=PropertyChanged}"  

                                     DisplayMemberPath="ShipCityName"  

                                     SelectedValuePath="ShipCityName" 

                                     AllowMultiSelect="True"  

                                     SelectedItems="{Binding ShipCities, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 

         </DataTemplate> 

     </syncfusion:GridTemplateColumn.CellTemplate> 

</syncfusion:GridTemplateColumn> 

 

Sample link : https://www.syncfusion.com/downloads/support/forum/165954/ze/SfDataGrid_MultiSelectionDropDown-13068680411976182882  

Please let us know if you require any other assistance from us. 

Regards, 

Mohanram A. 

[ManniAT]

Thank you for the answer.

It "almost" works for me but I have a problem, that the user can select (check) items no matter what I set.

I tried:

<syncfusion:GridTemplateColumn MappingName="Categories" AllowEditing="False" IsReadOnly="True">

<syncfusion:GridTemplateColumn.CellTemplate>

<DataTemplate>

<syncfusion:ComboBoxAdv ItemsSource="{Binding Path=DataContext.Items.Categories, RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=local:MyGrid,AncestorLevel=1},UpdateSourceTrigger=PropertyChanged}"  

IsReadOnly="True"

                                     DisplayMemberPath="Name"  

                                     SelectedValuePath="ID"

                                     AllowMultiSelect="True"

                                     SelectedItems="{Binding Categories, Mode=OneWay}"/>

</DataTemplate>

</syncfusion:GridTemplateColumn.CellTemplate>

Althoug both elements (column and ComboBox) are set to readonly the user can check / uncheck columns.

And further - although I set the binding to OneWay the collection gets changed.

The approach is to let the combox open (else IsEnabled would work) but disallow checking items.

And finally this should change when I'm in edit mode.

A last question - is there a way to set the text of the combobox (sel1 - sel4 - sel9) as tooltip of it.
Because space (width) of the column is limited so I can see the most important categories. But to see all I have to open the combobox which is 2 clicks (whith a nasty "open blink" of the dropdown. I guess this comes from selecting the cell (although mode is row and row is already selected).

With a tooltip showing the full text of the combobox this would be much easier.

[Mohanram Anbukkarasu]

Hi ManniAT, 

Thanks for the update.  

We are currently validating this. We will check and update with further details on June 7, 2021. We appreciate your patience until then.  

Regards, 

Mohanram A. 

[Mohanram Anbukkarasu]

Hi ManniAT, 

We regret for the inconvenience.  

We have checked the provided details. We are little unclear with the problems you are facing in the provided solution. If possible please revert to us with image illustration of the problems you are facing and the requirement which needs to be achieved in the ComboBox column. It will be more helpful for us to check and provide a prompt solution.  

Regards, 

Mohanram A. 

[ManniAT]

Thank you for you answer.

The problem that the user can edit (check) the boxes no matter if the grid is in edit mode or not. It is visible on your screenshot:

This is wanted for EDIT mode - but in readonly mode - or when not editingt the row the CheckBoxes mujst be disabled.

I tried with several combination of "IsReadonly" (on the grid, on the column, on the template) but nothing works.

[Mohanram Anbukkarasu]

H ManniAT, 

Thanks for the update.  

You can achieve this by setting ComboBoxAdv as GridTemplateColumn.EditTemplate instead of using GridTemplateColum.CellTemplate as shown in the following code example.  

Code example :  

<syncfusion:GridTemplateColumn MappingName="ShipCities"> 

    <syncfusion:GridTemplateColumn.CellTemplate> 

        <DataTemplate> 

            <TextBlock Text="{Binding ShipCitiesString}"/> 

        </DataTemplate> 

    </syncfusion:GridTemplateColumn.CellTemplate> 

    <syncfusion:GridTemplateColumn.EditTemplate> 

       <DataTemplate> 

            <syncfusion:ComboBoxAdv ItemsSource="{Binding Cities, Source={StaticResource viewModel},UpdateSourceTrigger=PropertyChanged}"  

                                    DisplayMemberPath="ShipCityName"  

                                    AllowMultiSelect="True"  

                                    SelectedItems="{Binding ShipCities, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 

        </DataTemplate> 

    </syncfusion:GridTemplateColumn.EditTemplate> 

</syncfusion:GridTemplateColumn> 

Sample link : https://www.syncfusion.com/downloads/support/forum/165954/ze/SfDataGrid_MultiSelectionDropDown_Modified2099578967  

Please let us know ow if you require any other assistance.  

Regards, 

Mohanram A. 

[ManniAT]

Hi,

that sounds finde - but now I dont's have the Combobox in "ReadOnlyMode".
So no "prebuild string" (Opt1 - Opt2....) and much more problematic - no list with the elements.

I need this dropdown to show the user what's selected - but it should be disabled.

That was by the way what I was trying - make the thing readonly and than copy this to ItemTemplate while leaving the editable version in EditTemplate.

BUT - I found no way to make it readonly - it just seems to ignore this setting(s).

Last not least - if that "IsReadonly" would work I could bind it to (I hope there is something like this) TheGrid.IsInEditMode or so.

Why does "IsReadonly" from the ComboBoxAdv not working?

[Mohanram Anbukkarasu]

Hi ManniAT, 

Thanks for the update. 

We suspect that your requirement is to make the items in the dropdown of the ComboBoxAdv readonly. You achieve this by using ComboBoxAdv.ItemContainerStyle  property for the ComboBoxAdv used inside the EditTemplate as shown in the following code example.  

Code example :  

<Window.Resources> 

    <ResourceDictionary> 

        <ResourceDictionary.MergedDictionaries> 

            <ResourceDictionary Source="/Syncfusion.Shared.WPF.Classic;component/Controls/ComboBoxAdv/Themes/MetroStyle.xaml"/> 

        </ResourceDictionary.MergedDictionaries> 

        <local:ViewModel x:Key="viewModel"/> 

        <Style x:Key="Comboboboxitem" 

       TargetType="{x:Type syncfusion:ComboBoxItemAdv}" BasedOn="{StaticResource MetroComboBoxItemAdvStyle}"> 

            <Setter Property="FocusVisualStyle" Value="{StaticResource ComboBoxItemFocusVisual}" /> 

            <Setter Property="HorizontalContentAlignment" 

            Value="{Binding Path=HorizontalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /> 

            <Setter Property="VerticalContentAlignment" 

            Value="{Binding Path=VerticalContentAlignment,RelativeSource={RelativeSource AncestorType={x:Type ItemsControl}}}" /> 

            <Setter Property="Padding" 

            Value="3,0,3,0" /> 

            <Setter Property="BorderThickness" Value="1" /> 

            <Setter Property="Background" Value="{StaticResource MetroComboBoxItemBackground}" /> 

            <Setter Property="BorderBrush" Value="{StaticResource MetroComboBoxItemBorderBrush}" /> 

            <Setter Property="Foreground" Value="{DynamicResource   MetroForegroundBrush}" /> 

            <Setter Property="FontFamily" Value="{DynamicResource MetroFontFamily}" /> 

            <Setter Property="Template"> 

                <Setter.Value> 

                    <ControlTemplate TargetType="{x:Type syncfusion:ComboBoxItemAdv}"> 

                        <Border x:Name="Bd" IsEnabled="False" IsHitTestVisible="False" CornerRadius="0" Margin="2" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" Padding="{TemplateBinding Padding}" SnapsToDevicePixels="true"> 

                            <Grid Margin="1"> 

                                <Grid.ColumnDefinitions> 

                                    <ColumnDefinition Width="Auto" /> 

                                    <ColumnDefinition Width="*" /> 

                                </Grid.ColumnDefinitions> 

                                <CheckBox Margin="2" Visibility="{Binding Path=AllowMultiSelect, Converter={StaticResource VisiblityConverter}, RelativeSource={RelativeSource AncestorType={x:Type syncfusion:ComboBoxAdv}}}" x:Name="PART_CheckBox" IsChecked="{Binding Path=IsSelected, RelativeSource={RelativeSource TemplatedParent}, Mode=TwoWay}" /> 

                                <ContentPresenter Name="content" Margin="2,1,2,2" Grid.Column="1"  HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" /> 

                            </Grid> 

                        </Border> 

                    </ControlTemplate> 

                </Setter.Value> 

            </Setter> 

        </Style> 

    </ResourceDictionary> 

</Window.Resources> 

<Grid> 

    <syncfusion:SfDataGrid x:Name="sfdatagrid" 

                            AllowEditing="True" 

                            AutoGenerateColumns="False" 

                           AllowFiltering="False" 

                            ItemsSource="{Binding OrderDetails}" 

                            ColumnSizer="Star" 

                           Margin="20"> 

        <syncfusion:SfDataGrid.Columns> 

            <syncfusion:GridTemplateColumn MappingName="ShipCities"> 

                <syncfusion:GridTemplateColumn.CellTemplate> 

                    <DataTemplate> 

                        <TextBlock Text="{Binding ShipCitiesString}"/> 

                    </DataTemplate> 

                </syncfusion:GridTemplateColumn.CellTemplate> 

                <syncfusion:GridTemplateColumn.EditTemplate> 

                    <DataTemplate> 

                        <syncfusion:ComboBoxAdv ItemsSource="{Binding Cities, Source={StaticResource viewModel},UpdateSourceTrigger=PropertyChanged}"  

                                                ItemContainerStyle="{StaticResource Comboboboxitem}" 

                                                DisplayMemberPath="ShipCityName"  

                                                AllowMultiSelect="True"  

                                                IsEditable="True" 

                                                SelectedItems="{Binding ShipCities, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}"/> 

                    </DataTemplate> 

                </syncfusion:GridTemplateColumn.EditTemplate> 

            </syncfusion:GridTemplateColumn> 

        </syncfusion:SfDataGrid.Columns> 

     </syncfusion:SfDataGrid> 

</Grid> 

Sample link : https://www.syncfusion.com/downloads/support/forum/165954/ze/SfDataGrid_MultiSelectionDropDown187913077  

Please revert to us with details if we have misunderstood your requirement.  

Regards, 

Mohanram A. 

[ManniAT]

Thank you for the information.

So there is no propert (DP) which makes this possible.

To have my own control template just to disable it is hard.

Especiall when I want to use themeing (user can select theme). 

In this case have to proivide a template for every theme.

I guess it is easier to build my own control doing this.

Anyhow - thank you for your efforts.

[Mohanram Anbukkarasu]

Hi ManniAT, 

Thanks for the update.  

Please let us know if you require any other assistance from us. 

Regards, 

Mohanram A.