GridViewComboBoxColumn DataTemplate

[Craig Mellon]

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

[Pavel Pavlov]

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.

[Manny]

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

[Pavel Pavlov]

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

[Juliana]

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

[Pavel Pavlov]

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

[Juliana]

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

[Christophe]

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

[Dimitrina]

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