Obtain the same behavior as SelectionBoxTemplate (RadComboBox) in a GridViewComboBoxColumn

[Yolanda]

Hello,

I have a GridViewComboBoxColumn with a CellEditTemplate inside defined as you show in this exemple
http://www.telerik.com/help/silverlight/radgridview-columns-column-types-combobox-column.html

Defined like this

<telerikGridView:GridViewComboBoxColumn Header="Client" UniqueName="CodeClientId" TextAlignment="Center" HeaderTextAlignment="Center" SelectedValueMemberPath="CodeClient" DisplayMemberPath="Nom" DataMemberBinding="{Binding CodeClientId}">
   <telerikGridView:GridViewComboBoxColumn.ItemTemplate>
     <DataTemplate>
          <Grid>
           <Grid.ColumnDefinitions>
              <ColumnDefinition/>
               <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
              <TextBlock Text="{Binding CodeClient}" Grid.Column="0" Visibility="{Binding IsEditing, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <TextBlock Text=" " Grid.Column="1" Visibility="Collapsed"/>
             <TextBlock Text="{Binding Nom}" Grid.Column="2"/>
               <TextBlock Text=" " Grid.Column="3" Visibility="Collapsed"/>
               <TextBlock Text="{Binding Groupe}" Grid.Column="4" Visibility="Collapsed"/>
              </Grid>
             </DataTemplate>
          </telerikGridView:GridViewComboBoxColumn.ItemTemplate>
 </telerikGridView:GridViewComboBoxColumn>

The selection works fine, however I would like to show only the Nom field instead of the Three Fields shown in the ItemTemplate

I've tried CellTemplateSelector = "{StaticRessource SelectionComboBoxTemplate}" with a data template like this

<DataTemplate x:Name="SelectionComboBoxTemplate">
            <TextBlock Text="{Binding Nom}"/>
</DataTemplate>

But this doesn't work

For a RadComboBox, I know I can use a SelectionBoxTemplate with this template (I've tried and it works).

Is there any similar property for the ComboBoxColumns?

Thanks for your help!!! :-)

[Pavel Pavlov]

Hello Yolanda,

In case I understand you correctly , you need just the "Nom " property displayed in the combo.

Then all you need to do is to remove the setting of the itemtemplate.
Just delete the following portion of the code :

<telerikGridView:GridViewComboBoxColumn.ItemTemplate>
     <DataTemplate>
          <Grid>
           <Grid.ColumnDefinitions>
              <ColumnDefinition/>
               <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
                <ColumnDefinition Width="*"/>
               </Grid.ColumnDefinitions>
              <TextBlock Text="{Binding CodeClient}" Grid.Column="0" Visibility="{Binding IsEditing, Converter={StaticResource BooleanToVisibilityConverter}}"/>
            <TextBlock Text=" " Grid.Column="1" Visibility="Collapsed"/>
             <TextBlock Text="{Binding Nom}" Grid.Column="2"/>
               <TextBlock Text=" " Grid.Column="3" Visibility="Collapsed"/>
               <TextBlock Text="{Binding Groupe}" Grid.Column="4" Visibility="Collapsed"/>
              </Grid>
             </DataTemplate>
          </telerikGridView:GridViewComboBoxColumn.ItemTemplate>

This should give you a combo with only the "NOM" property displayed .

Kind regards,
Pavel Pavlov
the Telerik team

[Yolanda]

Thanks for your fast answer.
Maybe I didn't explain my problem ...   When the grid is in visualisation mode I must only show the field Nom, however, in edition mode, I have to show the three fields in the combobox

Nowadays the column is defined like this

<telerikGridView:GridViewComboBoxColumn Header="Client" UniqueName="CodeClientId" TextAlignment="Center" HeaderTextAlignment="Center"
                                                                        SelectedValueMemberPath="CodeClient" DisplayMemberPath="Nom" DataMemberBinding="{Binding CodeClientId}"
                                                                        >
                                    <telerikGridView:GridViewComboBoxColumn.ItemTemplate>
                                        <DataTemplate>
                                            <Grid>
                                                <Grid.ColumnDefinitions>
                                                    <ColumnDefinition/>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="*"/>
                                                    <ColumnDefinition Width="*"/>
                                                </Grid.ColumnDefinitions>
                                                <TextBlock Text="{Binding CodeClient}" Grid.Column="0"/>
                                                <TextBlock Text=" " Grid.Column="1"/>
                                                <!-- To separate both fields-->
                                                <TextBlock Text="{Binding Nom}" Grid.Column="2"/>
                                                <TextBlock Text=" " Grid.Column="3"/><!-- To separate both fields-->
                                                <TextBlock Text="{Binding Groupe}" Grid.Column="4"/>
                                            </Grid>
                                        </DataTemplate>
                                    </telerikGridView:GridViewComboBoxColumn.ItemTemplate>
                                </telerikGridView:GridViewComboBoxColumn>

Thanks

[Maya]

Hello Yolanda,

I am sending you a sample project illustrating a possible way for achieving the desired result. Let us know if you need any further assistance.
 

Greetings,
Maya
the Telerik team

[Yolanda]

Very good job!

I write here the fast answer for future users . This is the magical code , Editor Style was the solution to all of my problems :-)

<UserControl.Resources>
    <Style x:Key="MyStyle" TargetType="telerikInput:RadComboBox">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition />
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <TextBlock Text="{Binding ID}"></TextBlock>
                        <TextBlock Text="{Binding Name}"  Grid.Column="1"></TextBlock>
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
<Grid x:Name="LayoutRoot" Background="White">
    <telerikGridView:RadGridView x:Name="RadGridView1"
                         AutoGenerateColumns="False">
        <telerikGridView:RadGridView.Columns>
            <telerikGridView:GridViewDataColumn Header="Name" DataMemberBinding="{Binding Name}">
            </telerikGridView:GridViewDataColumn>
            <telerikGridView:GridViewComboBoxColumn Header="Nationality"
                                            UniqueName="Nationality"
                                            EditorStyle="{StaticResource MyStyle}"
                                            DataMemberBinding="{Binding CountryID, Mode=TwoWay}"
                                            DisplayMemberPath="Name"
                                            SelectedValueMemberPath="ID">
            </telerikGridView:GridViewComboBoxColumn>


        </telerikGridView:RadGridView.Columns>
    </telerikGridView:RadGridView>

[Ksenia]

Hello. This did not work for me. When I followed your example exactly, it would not build. I would get a xaml error saying that RadComboBox cannot be found. When I tried to replace telerik:RadComboBox with telerik:GridViewComboBoxColumn, it did build, but it crashed when I ran my window. It showed combo's selected value for each row in the gridview, but as soon as I tried to use the drop-down, I got the following error: "GridViewComboBoxColumn TargetType does not match type of element RadComboBox". Please help.

Here's what I tried at first (following example attached in this thread), but was not able to build.....

<UserControl x:Class="Entrack.UserControls.GridPipelineFuelRatesEntry"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView" 
    xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"
    xmlns:telerikData="clr-namespace:Telerik.Windows.Data;assembly=Telerik.Windows.Data"
    xmlns:entrackConverters="clr-namespace:Entrack.UserControls.Converters"
    xmlns:dataTemplates="clr-namespace:Entrack.UserControls.DataTemplates"
    MinHeight="100" MinWidth="100">

<UserControl.Resources>
    <Style x:Key="ZonesGridComboBoxColumnStyle" TargetType="telerik:RadComboBox">
       <Setter Property="ItemTemplate">
            <Setter.Value>
                 <DataTemplate>
                      <Grid>
                           <Grid.ColumnDefinitions>
                                <ColumnDefinition />
                                <ColumnDefinition Width="*"></ColumnDefinition>
                           </Grid.ColumnDefinitions>
                           <TextBlock Text="{Binding ZoneId}"></TextBlock>
                           <TextBlock Text="{Binding ZoneDescription}"  Grid.Column="1"></TextBlock>
                      </Grid>
                 </DataTemplate>     
            </Setter.Value>
       </Setter>
  </Style>
</UserControl.Resources>
<Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="1"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
       
        <telerik:RadGridView Grid.Row="1"
                             Name="RadGridViewGridPipelineFuelRatesList"
                             AutoGenerateColumns="False"
                             AlternationCount="2"
                             AlternateRowBackground="#FFFCFD7B"                                                                                  
                             IsFilteringAllowed="False"
                             IsSynchronizedWithCurrentItem="False"                               
                             ShowColumnFooters="True"
                             ShowGroupPanel="False"                                
                             HeaderRowStyle="{DynamicResource GridViewHeaderRowStyleEntrack}"
                             ScrollViewer.VerticalScrollBarVisibility="Visible"
                             RowEditEnded="RadGridViewGridPipelineFuelRatesList_RowEditEnded"                           
                             ItemsSource="{Binding PipelineFuelRates}"         
                             SelectedItem="{Binding Path=SelectedItemPipelineFuelRate, Mode=TwoWay}">           
            <telerik:RadGridView.Columns>              
                <telerik:GridViewDataColumn x:Name="GridViewColumnIsActive"
                                            Width="100"
                                            Header="Is Active"
                                            HeaderTextAlignment="Center"                                               
                                            TextAlignment="Center">                                                                                                                                   
                    <telerik:GridViewColumn.CellTemplate>
                        <DataTemplate>
                            <Grid>
                                <CheckBox HorizontalAlignment="Center" IsHitTestVisible="{Binding IsInputControlReadOnly}" IsChecked="{Binding IsActive}"/>                                                                                 
                            </Grid>                                                                     
                        </DataTemplate>
                    </telerik:GridViewColumn.CellTemplate>
                    <telerik:GridViewColumn.AggregateFunctions>
                        <telerikData:CountFunction Caption="Count: "/>
                    </telerik:GridViewColumn.AggregateFunctions>
                </telerik:GridViewDataColumn>
                <telerik:GridViewComboBoxColumn x:Name="ReceiptZone" Header="Receipt Zone"
                                                Width="Auto"
                                                DataMemberBinding="{Binding PipelineZoneIdRec}"
                                                UniqueName="PipelineSegmentRec"
                                                EditorStyle="{StaticResource ZonesGridComboBoxColumnStyle}"
                                                ItemsSource="{Binding FilterPipelineZonesRec}"
                                                SelectedValueMemberPath="PipelineZoneId"
                                                DisplayMemberPath="{Binding ZoneId}">
                </telerik:GridViewComboBoxColumn>
                <telerik:GridViewComboBoxColumn x:Name="DeliveryZone" Header="Delivery Zone"
                                                Width="Auto"
                                                DataMemberBinding="{Binding PipelineZoneIdDel}"
                                                UniqueName="PipelineSegmentRec"
                                                EditorStyle="{StaticResource ZonesGridComboBoxColumnStyle}"
                                                ItemsSource="{Binding FilterPipelineZonesDel}"
                                                SelectedValueMemberPath="PipelineZoneId"
                                                DisplayMemberPath="ZoneId">
                </telerik:GridViewComboBoxColumn>
            </telerik:RadGridView.Columns>
        </telerik:RadGridView>
    </Grid>
</UserControl>

[Ksenia]

sorry, it would not format my code block properly, so I had to post it in that format :(

[Maya]

Hello Ksenia,

Would you clarify how do you define your telerik uri namespace, do you have reference for Telerik.Windows.Controls assembly ? Do you get this behavior on the project I previously attached ? 
Nevertheless, you can not use GridViewComboBoxColumn as it is not an ui element, so you need to set the target type as RadComboBox.
 

All the best,
Maya
the Telerik team

[Ksenia]

Would you clarify how do you define your telerik uri namespace, do you have reference for Telerik.Windows.Controls assembly ? 

- Here's what I have as far as telerik goes:

    xmlns:telerik="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.GridView"  
    xmlns:telerikControls="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls"
    xmlns:telerikGridView="clr-namespace:Telerik.Windows.Controls.GridView;assembly=Telerik.Windows.Controls.GridView"

Do you get this behavior on the project I previously attached?

- Not sure as I am not able to open the project you attached. I get all kinds of warning messages and then it does not open. So I had to go by what is in MainPage.xaml.

[Jerry T.]

The code that Yolanda posted on Jan 20, 2011 works fine for me but how does one do AutoComplete when using a DataTemplate for a GridViewComboBoxColumn?

If I don't use the DataTemplate, I can get the AutoComplete to work just fine by setting IsComboBoxEditable="True". But, with the DataTemplate in use, nothing happens. Added the TextSearch.TextPath setting, too, but that didn't help at all.

Jerry

Style:

<Style x:Key="CostCatStyle" TargetType="telerik:RadComboBox">
    <Setter Property="ItemTemplate">
        <Setter.Value>
            <DataTemplate x:Name="CostCatList">
                <Grid>
                    <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="50" />
                        <ColumnDefinition Width="250" />
                    </Grid.ColumnDefinitions>
                    <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding CostCatAbv}" />
                    <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Category}" />
                </Grid>
            </DataTemplate>
        </Setter.Value>
    </Setter>
</Style>

GridViewComboBoxColumn:

<telerik:GridViewComboBoxColumn ItemsSource="{Binding CostCategories, Mode=OneTime}" DataMemberBinding="{Binding CostCatAbv, Mode=TwoWay}" EditorStyle="{StaticResource CostCatStyle}"
                                DisplayMemberPath="CostCatList" SelectedValueMemberPath="CostCatAbv" Header="Cat" Width="45" IsComboBoxEditable="True" TextSearch.TextPath="CostCatList">
    <telerik:GridViewComboBoxColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding CostCatAbv}" />
        </DataTemplate>
    </telerik:GridViewComboBoxColumn.CellTemplate>
</telerik:GridViewComboBoxColumn>

[Maya]

Hello,

@ Ksenia:
The reason you get an error saying that RadComboBox cannot be found should be that the corresponding assembly is not added in the References.
Nevertheless, I would recommend you to work with the uri namespace:

xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"

Thus by using the "telerik" uri, you will be able to reference all controls in the assemblies in your project.
What are the errors that you get from the sample attached >

@Jerry:
 You can try to make the combo box editable by its IsEditable property in the Style targeting RadComboBox. 

Kind regards,
Maya
the Telerik team

[Jerry T.]

Maya,

I tried this and it still doesn't work. All I get is a textbox that I can type in and nothing drops down and nothing gets selected.  If I click on it, I get the dropdown but if I type, nothing gets highlighted nor selected.

If I take off the DataTemplate then it works but then I lose my ability to display custom text in the dropdown.

    <Style x:Key="CostCatStyle" TargetType="telerik:RadComboBox">
        <Setter Property="ItemTemplate">
            <Setter.Value>
                <DataTemplate>
                    <Grid>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="50" />
                            <ColumnDefinition Width="250" />
                        </Grid.ColumnDefinitions>
                        <TextBlock Grid.Row="0" Grid.Column="0" Text="{Binding CostCatAbv}" />
                        <TextBlock Grid.Row="0" Grid.Column="1" Text="{Binding Category}" />
                    </Grid>
                </DataTemplate>
            </Setter.Value>
        </Setter>
        <Setter Property="IsEditable" Value="True" />
    </Style>
</Grid.Resources>

Jerry

[Maya]

Hello Jerry T.,

Could you take a look at the sample attached and try to reproduce the behavior you described on it ? Could you try to remove the CellTemplate - are you still incapable of editing the combo box ? 
 

Kind regards,
Maya
the Telerik team

[Jerry T.]

Maya,

That sample project works but changing mine to match that exactly still doesn't work.  Perhaps it's something in how we bind vs. how it's done in the sample?

This is how I have it now and I don't even get the description displayed in the GridViewComboBoxColumn when not in edit mode:

<telerik:RadGridView x:Name="rgServiceTemplate" AutoGenerateColumns="False"
                     IsFilteringAllowed="True" GridLinesVisibility="None"
                     SelectionMode="Extended" AllowDrop="False" EditTriggers="CellClick"
                     ShowInsertRow="True" ShowGroupPanel="False" ShowColumnFooters="False" RowDetailsVisibilityMode="Visible"
                     AutoExpandGroups="True" CanUserFreezeColumns="False" FrozenColumnCount="3"
                     ItemsSource="{Binding ServiceTemplateCostingItems}"
                     SelectedItem="{Binding SelectedServiceTemplateCostingItem, Mode=TwoWay}"
                     Style="{StaticResource RadGridView_NewRow_OnBottom_Style}"
                     RowEditEnded="RadGridView_RowEditEnded">
    <telerik:RadGridView.SortDescriptors>
        <telerik:SortDescriptor Member="GroupType" SortDirection="Ascending" />
        <telerik:SortDescriptor Member="BillType" SortDirection="Ascending" />
        <telerik:SortDescriptor Member="SortOrder" SortDirection="Ascending" />
        <telerik:SortDescriptor Member="CostingItemId" SortDirection="Ascending" />
        <telerik:SortDescriptor Member="Category" SortDirection="Descending" />
        <telerik:SortDescriptor Member="CostingItem" SortDirection="Ascending" />
    </telerik:RadGridView.SortDescriptors>
    <i:Interaction.Triggers>
    <i:EventTrigger EventName="AddingNewDataItem">
        <mvvmLight:EventToCommand Command="{Binding Path=ServiceTemplateCostingItemNewDefaultCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
    <i:EventTrigger EventName="CellEditEnded">
        <mvvmLight:EventToCommand Command="{Binding Path=ServiceTemplateCostingItemCellEditEndedCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
    <i:EventTrigger EventName="RowEditEnded">
        <mvvmLight:EventToCommand Command="{Binding Path=ServiceTemplateCostingItemRowEditEndedCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
    <i:EventTrigger EventName="Deleting">
        <mvvmLight:EventToCommand Command="{Binding Path=ServiceTemplateCostingItemDeletingCommand}" PassEventArgsToCommand="True" />
    </i:EventTrigger>
    </i:Interaction.Triggers>
    <i:Interaction.Behaviors>
        <mvvmBehavior:RadGridViewMultiSelectBehavior SelectedItems="{Binding SelectedServiceTemplateCostingItems, Mode=TwoWay}" />
    </i:Interaction.Behaviors>
    <telerik:RadGridView.Columns>
        <telerik:GridViewComboBoxColumn ItemsSource="{Binding CostCategories}" DataMemberBinding="{Binding CostCatAbv}"
                                        DisplayMemberPath="CostDescription" SelectedValueMemberPath="CostCat" Header="Cat" Width="48" IsComboBoxEditable="True">
            <!--<telerik:GridViewComboBoxColumn.CellTemplate>
                <DataTemplate>
                    <TextBlock Text="{Binding CostCatAbv}" />
                </DataTemplate>
            </telerik:GridViewComboBoxColumn.CellTemplate>-->
            <telerik:GridViewComboBoxColumn.ItemTemplate>
                <DataTemplate>
                    <StackPanel Orientation="Horizontal">
                        <TextBlock Text="{Binding CostCat}" />
                        <TextBlock Text="{Binding Category}" />
                    </StackPanel>
                </DataTemplate>
            </telerik:GridViewComboBoxColumn.ItemTemplate>
        </telerik:GridViewComboBoxColumn>

I have to uncomment out the CellTemplate in order to see the data for that column when the grid first loads.

I've tried other variations on the ItemTemplate and I just cannot get it work as in the example.

Something is weird.

Oh, by the way, we *are* using the the Q3 Beta Silverlight controls....



Jerry

[Maya]

Hello Jerry,

The only difference I see is the way the ItemsSource of the column is bound. Do you see the values when you click on the column ? Can you try to set the Source property of the binding just as it is illustrated in the sample I previously attached ?

Kind regards,
Maya
the Telerik team

[Jerry T.]

Maya,

I've tried it exactly as it was in the sample (and about a dozen different other ways)

No matter what I do, if there's a DataTemplate defined, the autocomplete for the dropdown does not work.

[Maya]

Hello Jerry,

Unfortunately, we are out of any ideas what might be causing this behavior. It would be great if you could send us a project reproducing this issue. Thus we will be able to debug it locally and suggest a proper solution.

Best wishes,
Maya
the Telerik team

[Jerry T.]

I submitted a ticket (477496)

[Maya]

Hi Jerry T.,

Could you please take a look at the output of the application and verify whether there are any binding errors ? Generally, the behavior you experience is probably caused by some incorrect bindings.
 

Greetings,
Maya
the Telerik team