ComboBox in CellTemplateSelector not showing properly

[Pete]

I want to implement:

If ID ==0 , in the Region column, the control should be comboBox. So that I can select from a list.

if ID != 0, in the Region column, the control should be TextBlock.

 

I used templateSelector and DataTemplate. The TextBlock controls work fine. But for some reason, the ComboBox doesn't work.

 

<telerik:RadGridView.Columns>

    <telerik:GridViewColumn CellTemplateSelector="{StaticResource commandCellSelector}" Width="110"/>

    <telerik:GridViewDataColumn DataMemberBinding="{Binding RegionName, Mode=TwoWay}" Header="Region" Width="180" CellTemplateSelector="{StaticResource regionCellSelector}"/>

    <telerik:GridViewDataColumn DataMemberBinding="{Binding DivisionName, Mode=TwoWay}" Header="Division" Width="180"/>

    <telerik:GridViewDataColumn DataMemberBinding="{Binding SubDivisionName, Mode=TwoWay}" Header="SubDivision" Width="180"/>

</telerik:RadGridView.Columns>

 

<DataTemplate x:Key="RegionEditTemplate">

    <TextBlock Text="{Binding RegionName, Mode=TwoWay}" />

</DataTemplate>

<DataTemplate x:Key="RegionAddNewTemplate">

    <ComboBox ItemsSource="{Binding RegionSearchList, Source={StaticResource ViewModel}}"DisplayMemberPath="Name" SelectedValuePath="ID" SelectedValue="{Binding RegionID}"/>

</DataTemplate>

<templateSelector:ManageWorkAreaRegionSelector x:Name="regionCellSelector" RegionEditTemplate="{StaticResource RegionEditTemplate}" RegionAddNewTemplate="{StaticResource RegionAddNewTemplate}"/>

 

[Vlad]

Hi,

 Can you clarify what exactly is not working?

All the best,
Vlad
the Telerik team

[Pete]

Here is the problems:

1. There is no Edit Mode for this ComboBox.
     As usual, we need to click twice to go to the edit mode in the GridView, while when I implement DataTemplate, there is no edit mode.

2. There is a gap between Grid line and ComboBox. If I click the gap, the comboBox disappears and I enter a textBox. I can edit in this textBox. But I don't want this gap(You can see the blue box in the image attached).

[Maya]

Hello Pierre-Luc ,

Generally, RadComboBox is not editable. You could set its IsEditable property to "True" if you want to be able to be capable of typing in it. Please take a look at our online documentation for a reference. Is that the functionality you require ? 
If you want to remove the gap you are referring to, you could edit the style of the corresponding cell and predefine its Margin property. For example:

<UserControl.Resources>
        <Style x:Key="myStyle" TargetType="telerik:GridViewCell">
            <Setter Property="Margin" Value="-5,0,0,0" />
        </Style>
    </UserControl.Resources>

<telerik:GridViewDataColumn CellStyle="{StaticResource myStyle}">
                    <telerik:GridViewDataColumn.CellTemplate>
                        <DataTemplate>
                            <telerik:RadComboBox />
                        </DataTemplate>
                    </telerik:GridViewDataColumn.CellTemplate>
                </telerik:GridViewDataColumn>

You can play along with the values of the Margin so that it looks exactly as you want it.
Let me know whether those solutions will correspond to your requirements.
 

All the best,
Maya
the Telerik team

[Pete]

Hi,

Thank you for you reply. Edit mode I mentioned is not to set RadComboBox to editable. What I mean here is if I use GridViewComboBoxColumn, in order to select a value from comboBox, I need to click twice. I want it to be consistent, so if I use DataTemplate, how can I click twice to select value instead of click once.


Thanks

[Maya]

Hi Pierre-Luc ,

You could try to set the GridViewComboBoxColumn to be edited on one click instead. What you can do is:

<telerik:GridViewComboBoxColumn DataMemberBinding="{Binding ClubID}"
                                            SelectedValueMemberPath="ID"
                                            EditTriggers="CellClick"
                                            DisplayMemberPath="Name"
                                            ItemsSource="{Binding Clubs, Source={StaticResource MyViewModel}}">
                <telerik:GridViewComboBoxColumn.EditorStyle>
                    <Style TargetType="telerik:RadComboBox">
                        <Setter Property="OpenDropDownOnFocus" Value="True" />
                    </Style>
                </telerik:GridViewComboBoxColumn.EditorStyle>
            </telerik:GridViewComboBoxColumn>

Will that approach suit your needs ? 

Regards,
Maya
the Telerik team

[Pete]

There are other issues.

1. The gaps are not only on the left side. They are left, up, right, down sides. If I use margin like (-5,-5,-5,-5), the "Required" message icon on the right top corner is hidden by the ComboBox. I want "Required" message shows up if ComboBox is not selected. Please check the image.

If I use GridViewComboBoxColumn, there is "required message" showing on the GridViewComboBoxColumn . Can I have exactly same behaviour like GridViewComboBoxColumn here?

(The reason I don't use GridViewComboBoxColumn here is because I want to implement: if ID > 0, the cell will be TextBox. if ID == 0, the cell will be ComboBox. so I choose GridViewDataColumn.)

2. On this ComboBox, I want to click twice to enter the edit model exactly like before.

[Maya]

Hello Pierre-Luc ,

The error message will be displayed on validating the value after editing it. In your case the cell does not go into edit mode - you just edit the value through the combo box, which is used for the CellTemplate, not CellEditTemplate. What you can do is to handle the validation in the setter of the corresponding property or during the SelectionChanged event for example. 
Do you want to display the RadComboBox in view-mode or setting it on editing the value will be appropriate ? As in this case you can use CellEditTemplateSelector, you will not have problems with validating the values and the margins will be sized properly.
Please let me know what if using CellEditTempalteSelector will suit your needs or in case you need any further assistance.
 

Regards,
Maya
the Telerik team

[Pete]

Hi Maya,

Thank you for your carefulness and patience. CellEditTemplateSelector is exactly what I want.
Thanks a lot.