GridViewComboBoxColumn DataTemplate

9 posts, 0 answers
  1. Craig Mellon
    Craig Mellon avatar
    53 posts
    Member since:
    May 2005

    Posted 29 May 2009 Link to this post

    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
  2. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 02 Jun 2009 Link to this post

    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.
  3. DevCraft banner
  4. Manny
    Manny avatar
    13 posts
    Member since:
    Jan 2009

    Posted 29 Jun 2010 Link to this post

    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 
     






  5. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 02 Jul 2010 Link to this post

    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
  6. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 16 Jan 2012 Link to this post

    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
  7. Pavel Pavlov
    Admin
    Pavel Pavlov avatar
    2039 posts

    Posted 19 Jan 2012 Link to this post

    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 >>

  8. Juliana
    Juliana avatar
    71 posts
    Member since:
    Feb 2008

    Posted 24 Jan 2012 Link to this post

    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
  9. Christophe
    Christophe avatar
    10 posts
    Member since:
    Feb 2011

    Posted 20 Jan 2014 Link to this post

    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




  10. Dimitrina
    Admin
    Dimitrina avatar
    3769 posts

    Posted 24 Jan 2014 Link to this post

    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 >>
Back to Top
DevCraft banner