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!!! :-)
18 Answers, 1 is accepted
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
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
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.
Maya
the Telerik team
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
>
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>
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.
Maya
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
- 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.
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
>
@ 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
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
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
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 ?
Maya
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
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
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 ?
Maya
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
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.
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.
Maya
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>
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.
Maya
the Telerik team
Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>