This is a migrated thread and some comments may be shown as answers.

GridViewComboBoxColumn DataTemplate

8 Answers 667 Views
GridView
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Craig Mellon
Top achievements
Rank 1
Craig Mellon asked on 29 May 2009, 07:19 PM
Hi All,

I've created a datatemplate for a GridViewComboBoxColumn where I am trying to Display a Border around the text.

How do I set the TextBlock text to the selected combo value (Not the underlying data value)
In the XAML below I want the TextBlock Text to be equal to the combobox display value

                <telerikGridView:GridViewComboBoxColumn  
                    UniqueName="StatusId" HeaderText="Status"   
                    DisplayMemberPath="Value" SelectedValueMemberPath="Key" DataMemberPath="StatusId"   
                    Width="120" 
                    TextAlignment="Center">  
                    <telerikGridView:GridViewComboBoxColumn.CellTemplate> 
                        <DataTemplate> 
                        <Grid Margin="1">  
                        <Border Background="Blue" Opacity="0.4" CornerRadius="2"/>  
                            <TextBlock  Text="Appt Booked" Foreground="White" TextAlignment="Center" HorizontalAlignment="Center" Margin="1"></TextBlock> 
                        </Grid> 
                        </DataTemplate> 
                    </telerikGridView:GridViewComboBoxColumn.CellTemplate> 
                </telerikGridView:GridViewComboBoxColumn> 


Thanks

Craig

8 Answers, 1 is accepted

Sort by
0
Pavel Pavlov
Telerik team
answered on 02 Jun 2009, 08:44 AM
Hello Craig ,
Please excuse me for the late answer. I was trying to find a descent workaround for the problem .

What happens here is that redefining the datatemplate of the cell causes the ComboBox column  to bypass the internal logic which translates DataMember value to display value.

The best solution I can think of with this version of RadGridView is to  implement your own ValueConvertrer and use it in the binding  of the TextBlock. something like :
 <telerikGridView:GridViewComboBoxColumn.CellTemplate>    
                        <DataTemplate>    
                        <Grid Margin="1">     
                        <Border Background="Blue" Opacity="0.4" CornerRadius="2"/>     
                            <TextBlock  Text="{Binding Converter={StaticResource MyValueConverter}}" Foreground="White" TextAlignment="Center" HorizontalAlignment="Center" Margin="1"></TextBlock>    
                        </Grid>    
                        </DataTemplate>    
                    </telerikGridView:GridViewComboBoxColumn.CellTemplate>    
 
Where in the convert method of MyValueConverter you place the logic to translate the value to display value.

Since this is not quite easy  and intuitive way , I will personally take care for this one to be fixed and improved for our very next version of RadGridView.

Let me know if you have any troubles adapting this approach to your project.

Kind regards,
Pavel Pavlov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Manny
Top achievements
Rank 1
answered on 29 Jun 2010, 04:26 PM
Hi, is there a solution to this yet? I'm using 2010.03.09 release of silverlight controls. Here's my xaml; I suspect that my DataTemplate is just wrong because the binding is probably that of the object being bound to the grid, while my field names below (ApcBinCode, ApcBinToolTip) refer to the field names for the combo box.

              <telerikGridView:GridViewComboBoxColumn UniqueName="ApcBins" Header="APC Bin" 
                                                      DataMemberBinding="{Binding ApcBinID}" 
                                                      DisplayMemberPath="ApcBinCode" 
                                                      SelectedValueMemberPath="ApcBinID"
                <telerikGridView:GridViewComboBoxColumn.CellTemplate> 
                  <DataTemplate> 
                    <TextBlock Text="{Binding ApcBinCode}" 
                               ToolTipService.ToolTip="{Binding ApcBinToolTip}" 
                               VerticalAlignment="Center" /> 
                  </DataTemplate> 
                </telerikGridView:GridViewComboBoxColumn.CellTemplate> 
              </telerikGridView:GridViewComboBoxColumn> 
 

Here is the object and observable collection being bound to the grid. Per the XAML above, they are tied together by ApcBinID:
  /// <summary> 
  /// Wrapper class for set of total scores for all APCs 
  /// </summary> 
  public class swm_sp_GetAllScores 
  { 
    public int SystemID { get; set; } 
    public string SystemName { get; set; } 
    public string SystemDesc { get; set; } 
    public double Score { get; set; } 
    public int MappingStatus { get; set; } 
    public int ApcBinID { get; set; } 
  } 
 
  /// <summary> 
  /// Typesafe list of total scores for all APCs 
  /// </summary> 
  public class swm_sp_GetAllScoresList : ArchG2ObservableCollection<swm_sp_GetAllScores> { } 
 



Here's my databind to the column (the databind to the grid occurs in separate call). The threading is my own class library, of course.
    private void dataLoadApcBins(ref string flag, bool manageSpinner) 
    { 
      flag = flagValue("dataLoadApcBins"); 
      if (manageSpinner) 
      { 
        apcsLoading.Visibility = System.Windows.Visibility.Visible; 
      } //if 
      new ThreadRunner(L.I, new StrongObjectRef<swm_sp_ApcBin_DataList>()).Run( 
        (ThreadRunner self, ref string flag_inner) => 
        { 
          L.I.Status.Info("Loading list of APC Bins..."); 
          using (var dal = L.I.DAL) 
          { 
            flag_inner = flagValue("dataLoadApcBins_load"); 
            var param = self.Parameter as StrongObjectRef<swm_sp_ApcBin_DataList>
            param.Value = dal.swm_sp_ApcBin_All(); 
          } 
        }, 
        (ThreadRunner self, ref string flag_inner, Exception lastException) => 
        { 
          flag_inner = flagValue("dataLoadApcBins_update"); 
 
          if (lastException == null) 
          { 
            // data load the combobox associated with column
            var param = self.Parameter as StrongObjectRef<swm_sp_ApcBin_DataList>
            var col = apcsGrid.Columns["ApcBins"] as Telerik.Windows.Controls.GridViewComboBoxColumn; 
            if (col != null) 
            { 
              col.ItemsSource = param.Value; 
            } //if 
          } //if 
 
          // update the spinner and flags if we are in UI thread
          dataLoadUpdateSpinner(manageSpinner, lastException); 
        } 
      ); 
    } 
 

Here are items being databound from above (swm_sp_ApcBin_DataList collection):
  #region APC Bin Support 
  public class swm_sp_ApcBin_Data 
  { 
    public int ApcBinID { get; set; } 
    public string ApcBinCode { get; set; } 
    public string ApcBinName { get; set; } 
    public string ApcBinDesc { get; set; } 
 
    /// <summary> 
    /// Read-only field for tooltip support 
    /// </summary> 
    public string ApcBinTooltip 
    { 
      get 
      { 
        if (string.IsNullOrEmpty(ApcBinName) && string.IsNullOrEmpty(ApcBinDesc)) 
        { 
          return ""; 
        } 
        if (!string.IsNullOrEmpty(ApcBinName) && !string.IsNullOrEmpty(ApcBinDesc)) 
        { 
          return ApcBinName + " (" + ApcBinDesc + ")"; 
        } 
        if (!string.IsNullOrEmpty(ApcBinName)) 
        { 
          return ApcBinName; 
        } 
        return ApcBinDesc; 
      } 
    } 
  } 
  public class swm_sp_ApcBin_DataList : ArchG2ObservableCollection<swm_sp_ApcBin_Data> { } 
  #endregion 
 






0
Pavel Pavlov
Telerik team
answered on 02 Jul 2010, 12:18 PM
Hello Manny,

With the later versions of RadGridView we have introduced the ItemTemplate property. It is a DataTemplate  which tells how any item in the combo box column should appear - both in display and edit mode of the cell.  Within this template , you can bind to the fields of your combo box items , rather than those of the grid. So these bindings inside the item template should be valid.

All the best,
Pavel Pavlov
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
Juliana
Top achievements
Rank 1
answered on 16 Jan 2012, 03:11 PM
Hi there,
I need drop down items to look one way and selected item  the other. I tried to define column this way

 <telerikGrid:GridViewComboBoxColumn
                    DataMemberBinding="{Binding LocalStaffPositionDepartmentId}"
                    ItemsSource="{Binding PositionDepartmentList, Source={StaticResource detailsViewModel}}"
                    DisplayMemberPath="Department" SelectedValueMemberPath="RecordId"
                    Header="Department" IsReadOnly="False" Width="SizeToCells"
                    >
                    <telerik:GridViewComboBoxColumn.CellTemplate>
                        <DataTemplate>
                            <TextBlock Text="{Binding Department}"/>
                        </DataTemplate>
                    </telerik:GridViewComboBoxColumn.CellTemplate>
                    <telerik:GridViewComboBoxColumn.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal">
                                <TextBlock Text="{Binding Department}"/>
                                <TextBlock Text="{Binding Position}"/>
                            </StackPanel>
                        </DataTemplate>
                    </telerik:GridViewComboBoxColumn.ItemTemplate>
                </telerikGrid:GridViewComboBoxColumn>

A part with ItemTemplate works fine, but CellTemplate is not binded.

So is there any solution apart from converter? Or converter for CellTemplate is the only option here? Does anything like SelectedItemTemplate exist?

Juliana
0
Pavel Pavlov
Telerik team
answered on 19 Jan 2012, 10:40 AM
Hello Juliana,

The cell has two modes - display and edit. In display mode it shows a Telerik.Windows.Controls.LookupElement
and in edit mode it displays a Combo Box.  The LookupElement has the power to translate the selected value to display value., so you can replace the TextBox with a LookupElement thus avoiding the need of converter.

However If you share what exactly is the final goal you are trying to achieve I may find a better way for you .
From your XAML I believe you just need two columns in Edit mode and a single Column in Display mode. Is that right ?

Kind regards,
Pavel Pavlov
the Telerik team

Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

0
Juliana
Top achievements
Rank 1
answered on 24 Jan 2012, 07:35 AM
Hi Pavel,

You are absolutely right, I need one column in display mode and two columns when combobox is opened.
I replaced TextBox with Telerik.Windows.Controls.LookupElement in the xaml above, but it didn't help. Still there is no data in display mode.
What did I do wrong?

Thanks,
Juliana
0
Christophe
Top achievements
Rank 2
answered on 20 Jan 2014, 10:14 PM

Hi,



I have the same need.



I need one column in display mode and two columns when combobox is opened.



In display mode, I just need Code (I have a tips for display Libelle)

In edit mode, I need a dropdown with 2 columns : Code and Libelle



How can I do this ?



this is my gridviewcomboboxcolumn XAML.

<telerik:GridViewComboBoxColumn     DataMemberBinding="{Binding Redevance, Mode=TwoWay}"
                                    DisplayMemberPath="Code"
                                    Header="Redevance"
                                    ItemsSource="{Binding AllRedevances, Mode=TwoWay}"
                                    UniqueName="Redevance"
                                    SortMemberPath="Code"
                                    FilterMemberPath="Code"
                                    EditTriggers="CellClick"
                                    ColumnGroupName="Redevance"
                                    >
<telerik:GridViewColumn.ToolTipTemplate>
    <DataTemplate>
        <StackPanel Orientation="Horizontal">
            <TextBlock Text="{Binding Redevance.Code}" Foreground="Red" />
            <TextBlock Text=" - " />
            <TextBlock Text="{Binding Redevance.Libelle}" Foreground="Blue" />
        </StackPanel>
    </DataTemplate>
</telerik:GridViewColumn.ToolTipTemplate>
<telerik:GridViewComboBoxColumn.EditorStyle>
    <Style TargetType="telerik:RadComboBox">
        <Setter Property="OpenDropDownOnFocus" Value="True"/>
    </Style>
</telerik:GridViewComboBoxColumn.EditorStyle>
<telerik:GridViewComboBoxColumn.ItemTemplate>
        <DataTemplate>
            <Grid>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="40"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Text="{Binding Code}"/>
                <TextBlock Grid.Column="1" Text="{Binding Libelle}"/>
            </Grid>
        </DataTemplate>
</telerik:GridViewComboBoxColumn.ItemTemplate>
    <telerik:GridViewComboBoxColumn.FilteringControl>
        <telerik:FilteringControl />
    </telerik:GridViewComboBoxColumn.FilteringControl>
</telerik:GridViewComboBoxColumn>


BR

Christophe




0
Dimitrina
Telerik team
answered on 24 Jan 2014, 09:48 AM
Hello,

The editor of GridViewComboBoxColumn is RadComboBox. As you would like to change its default template,  you should set the one you would like to have through the EditorStyle you have defined.
Basically you need to set a Value for RadComboBox's ItemTemplate property.

Regards,
Didie
Telerik
TRY TELERIK'S NEWEST PRODUCT - EQATEC APPLICATION ANALYTICS for SILVERLIGHT.
Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
Sign up for Free application insights >>
Tags
GridView
Asked by
Craig Mellon
Top achievements
Rank 1
Answers by
Pavel Pavlov
Telerik team
Manny
Top achievements
Rank 1
Juliana
Top achievements
Rank 1
Christophe
Top achievements
Rank 2
Dimitrina
Telerik team
Share this question
or