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

GridViewComboBoxColumn dropdown arrow always visible

9 Answers 656 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Greg
Top achievements
Rank 2
Greg asked on 26 Jul 2011, 07:57 PM
Hello,

I have added a GridViewComboBoxColumn to my RadGridView but it takes three clicks to expose the actual dropdown to make a selection. I've looked at this thread but my bindings are not showing any data. Is there anything new or updated that allows a combo box to be embedded in a RadGridView column, the thread was from 2009. The other problem I had was that there was no SelectionChanged event on the GridViewComboBoxColumn. I found a work around for that issue but the selection changed would fire before the combo box had even dropped down it's selections and the user made a physical change. With this approach is it possible to use the RadComboBox SelectionChanged event?

What I'm looking for is a combo box inside the grid that is immediately available for change and that raises an event if it is changed. I don't like having to click three times to expose and change a combo box value.

Binding is as follows:
ctrlStatus.ItemsSource = _statusList;  Where _statusList is a List<string>

<telerik:GridViewComboBoxColumn Header="Status" x:Name="ctrlStatus" ItemsSource="{Binding Port}"   DataMemberBinding="{Binding Status,Mode=TwoWay}" DisplayMemberPath="Status" Width="auto" IsFilterable="False" SelectedValueMemberPath="Status">
  <telerik:GridViewComboBoxColumn.CellTemplate>
    <DataTemplate>
      <StackPanel>
        <telerik:RadComboBox x:Name="ctrlStatus" ItemsSource="{Binding Port}" DisplayMemberPath="Status" Width="auto" IsFilteringEnabled="False" SelectedValuePath="Status" SelectedValue="{Binding Status}"/>
      </StackPanel>
    </DataTemplate>
  </telerik:GridViewComboBoxColumn.CellTemplate>
</telerik:GridViewComboBoxColumn>


G

9 Answers, 1 is accepted

Sort by
0
Maya
Telerik team
answered on 27 Jul 2011, 07:37 AM
Hello Greg,

If you want to open the RadComboBox of the GridViewComboBoxColumn with one click, you may define a style targeting RadComboBox and set the OpenDropDownOnFocus property and set the EditTriggersProperty of the GridViewComboBoxColumn to "CellClick":

<StyleTargetType="telerik:RadComboBox">
        <SetterProperty="OpenDropDownOnFocus"Value="True"/>
</Style>

If you want to handle the SelectionChanged event only when an item is selected, you may do the following:
this.AddHandler(RadComboBox.SelectionChangedEvent, new SelectionChangedEventHandler(comboSelectionChanged));
  
private void comboSelectionChanged(object sender, SelectionChangedEventArgs e)
{
    if (e.RemovedItems.Count != 0)
    {
        //this ensures a selection from the drop down is performed.
    }
  
}

Let me know in case you need any further assistance. 

Regards,
Maya
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Greg
Top achievements
Rank 2
answered on 27 Jul 2011, 04:14 PM
Maya,

Thank you for the response.

The binding is a bit unusual here. I've followed the example in this thread but can't seem to get it to work. When I define the combo box as a GridViewComboBoxColumn my binding works correctly.

This works
<telerik:GridViewComboBoxColumn Header="Status" x:Name="ctrlStatus" ItemsSource="{Binding Port}" DataMemberBinding="{Binding Status}" Width="auto" IsFilterable="False" SelectedValueMemberPath="Status"/>

This doesn't work
<telerik:GridViewComboBoxColumn Header="Status" x:Name="ctrlStatus" ItemsSource="{Binding Port}" DataMemberBinding="{Binding Status}"
                                DisplayMemberPath="Status" Width="auto" IsFilterable="False" SelectedValueMemberPath="Status"
                                EditTriggers="CellClick">
  <telerik:GridViewComboBoxColumn.CellTemplate>
    <DataTemplate>
      <StackPanel>
        <telerik:RadComboBox ItemsSource="{Binding Port}" DisplayMemberPath="Status" Width="auto" IsFilteringEnabled="False" SelectedValuePath="Status" SelectedValue="{Binding Status}"/>
      </StackPanel>
    </DataTemplate>
  </telerik:GridViewComboBoxColumn.CellTemplate>
</telerik:GridViewComboBoxColumn>

What is the correct way to setup binding when using a RadComboBox inside a GridViewComboBoxColumn? I've tried limiting binding to either the GridViewComboBoxColumn or the RadComboBox and that doesn't work. It appears I must bind both items but clearly I'm missing something.
0
Maya
Telerik team
answered on 28 Jul 2011, 07:25 AM
Hi Greg,

I am sending you a sample project illustrating how you may define a RadComboBox as a CellTemplate. Please take a look at it and let me know whether it corresponds to your requirements.
 

Greetings,
Maya
the Telerik team

Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

0
Greg
Top achievements
Rank 2
answered on 28 Jul 2011, 03:49 PM
Greetings Maya,

Your example does accomplish what I'm looking for in ClubID where the combo box is visible and responsive without multiple clicks. However, your binding approach uses MVVM which I don't use. The GridViewDataColumn doesn't allow an ItemsSource binding which is required for me. I've included my entire RadGridView design and my Port object definition. Status should have the following possible values: Used, Available, Dead. I understand that you aren't required to present an example using my exact setup. However, my problem is the binding isn't working correctly with the combo box changes you present. So, I've included my approach in an effort to resolve this issue.

Is it possible to accomplish your results with the way the ClubID combo box behaves without using MVVM? I don't use observable collections in my code behind. My RadGridView(gridPorts) has it's ItemsSource set via gridPorts.ItemsSource = List<Port>.

Sincerely, Greg

RadGridView
<telerik:RadGridView x:Name="gridPorts" Height="200" Width="525" Margin="12,42,0,0" HorizontalAlignment="Left"
                     VerticalAlignment="Top"  CanUserResizeColumns="True" CanUserSortColumns="True"
                     AutoGenerateColumns="False" SelectionMode="Multiple" ShowGroupPanel="False"
                     RowStyleSelector="{StaticResource gridStrandStyle}" ItemsSource="{Binding Port}" >
  <telerik:RadGridView.Columns>
    <telerik:GridViewDataColumn Header=" # " DataMemberBinding="{Binding DisplayRowNumber}" Width="auto" Background="#FFFFFFCE" IsReadOnly="True" IsFilterable="False" />
    <telerik:GridViewDataColumn Header="Side" DataMemberBinding="{Binding Side}" Width="auto" IsFilterable="False" TextInput="GridViewDataColumn_TextInput"/>
    <telerik:GridViewDataColumn Header="Label" DataMemberBinding="{Binding Label}" Width="auto" IsFilterable="False"  TextInput="GridViewDataColumn_TextInput"/>
    <telerik:GridViewComboBoxColumn Header="Term. Type" x:Name="ctrlTermType" ItemsSource="{Binding Port}" DataMemberBinding="{Binding TermType}" Width="auto" IsFilterable="False" SelectedValueMemberPath="TermType"/>
    <telerik:GridViewComboBoxColumn x:Name="ctrlStatus" Header="Status" DataMemberBinding="{Binding Status}" ItemsSource="{Binding Port}" 
                                    DisplayMemberPath="Status" SelectedValueMemberPath="Status" Width="auto" IsFilterable="False">
      <telerik:GridViewComboBoxColumn.CellTemplate>
        <DataTemplate>
            <telerik:RadComboBox ItemsSource="{Binding Status}" DisplayMemberPath="Status" Width="auto" IsFilteringEnabled="False"
                                 SelectedValuePath="Status" SelectedValue="{Binding Status}"/>
        </DataTemplate>
      </telerik:GridViewComboBoxColumn.CellTemplate>
    </telerik:GridViewComboBoxColumn>
    <!--<telerik:GridViewComboBoxColumn Header="Status" x:Name="ctrlStatus" ItemsSource="{Binding Port}" DataMemberBinding="{Binding Status}" Width="auto" IsFilterable="False" SelectedValueMemberPath="Status"/>-->
    <telerik:GridViewComboBoxColumn Header="Priority" x:Name="ctrlPriority" ItemsSource="{Binding Port}" DataMemberBinding="{Binding Priority}" Width="auto" IsFilterable="False" SelectedValueMemberPath="Priority"/>
    <telerik:GridViewDataColumn Header="Users" DataMemberBinding="{Binding Users}" Width="auto" IsFilterable="False" TextInput="GridViewDataColumn_TextInput"/>
    <telerik:GridViewComboBoxColumn Header="Units" ItemsSource="{Binding Port}" DataMemberBinding="{Binding Units}" Width="auto" IsFilterable="False" TextInput="GridViewDataColumn_TextInput"/>
    <telerik:GridViewComboBoxColumn Header="Type" ItemsSource="{Binding Port}" DataMemberBinding="{Binding PortType}" Width="auto" IsFilterable="False" TextInput="GridViewDataColumn_TextInput"/>
    <telerik:GridViewDataColumn Header="Level" DataMemberBinding="{Binding Level}" Width="auto" IsFilterable="False" TextInput="GridViewDataColumn_TextInput"/>
    <telerik:GridViewDataColumn Header="Freq." DataMemberBinding="{Binding Frequency}" Width="auto" IsFilterable="False" TextInput="GridViewDataColumn_TextInput"/>
  </telerik:RadGridView.Columns>
</telerik:RadGridView>

Port Object Definition
public partial class Port
{
  public int PortID { get; set; }
  public string xTable { get; set; }
  public int xID { get; set; }
  public int SpanID { get; set; }
  public int FiberID { get; set; }
  public int Num { get; set; }
  public int EndFiber { get; set; }
  public int PatchPortID { get; set; }
  public string Side { get; set; }
  public string Grp { get; set; }
  public string Label { get; set; }
  public string TermType { get; set; }
  public string Comments { get; set; }
  public string PortType { get; set; }
  public string Level_ { get; set; }
  public string Units { get; set; }
  public string Frequency { get; set; }
  public string Status { get; set; }
  public string Users { get; set; }
  public string Priority { get; set; }
  public DateTime UpdateTime { get; set; }
  public string UpdateUser { get; set; }
  public Patch Patch { get; set; }
  public Equipment equipment { get; set; }
  public int fibermngrid { get; set; }
 
  public Port()
  {
    Patch = new Patch();
    equipment = new Equipment();
  }
}

    public List<string> StatusList
    {
      get { return _statusList; }
      set
      {
        _statusList = value;
        ctrlStatus.ItemsSource = _statusList;
      }
    }
0
Maya
Telerik team
answered on 02 Aug 2011, 12:07 PM
Hello Greg,

If you do not follow the MVVM Pattern, it would be better to use directly the GridViewComboBoxColumn, without setting its CellTemplate as a RadComboBox. The hurdle in such a case is that it will be more difficult to set the ItemsSource of the RadComboBox. 
Using the GridViewComboBoxColumn will enable you to set its source directly in the code-behind:

this.RadGridView1.ItemsSource = myList1;
((GridViewComboBoxColumn)this.RadGridView1.Columns[1]).ItemsSource = myList2;

As you have only three values for the source of the column, you may benefit from the EnumDataSource. Please take a look at this demo for a reference.
Yet another possible scenario is to set the ItemsSourceBinding of the GridViewComboBoxColumn. In this case you need to expose a new property in your business object (of Collection type). You may refer to our online documentation for further reference.


All the best,
Maya
the Telerik team

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

0
Greg
Top achievements
Rank 2
answered on 08 Aug 2011, 06:20 PM
Hi Maya,

Thanks for the follow up. It appears that you don't have a solution for presenting a combo box for editing without having to click on it three times and no way to determine the selection changed event unless I use the MVVM pattern is that correct? If this is correct is it possible to submit an enhancement request?

Greg
0
Pavel Pavlov
Telerik team
answered on 11 Aug 2011, 12:50 PM
Hi Greg,

The solution without using MVVM should be as follows:

1. In order to have instantly opened  combo with a single click - place the combo in a template as discussed bellow.

2. In order to sense selection changes - within the template where you define your combo  you can directly subscribe to the SelectionChanged event.

*An alternative to point 2  would be :
SelectionChanged is a routed event  and may be handled as a routed event as described in point 3 of one of my blogposts.

All the best,
Pavel Pavlov
the Telerik team

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

0
Greg
Top achievements
Rank 2
answered on 11 Aug 2011, 03:02 PM
Hello,

This was my solution and I was still able to use the RadComboBox:

<telerik:GridViewComboBoxColumn Header="Status" Width="Auto">
  <telerik:GridViewComboBoxColumn.CellTemplate>
    <DataTemplate>
      <telerik:RadComboBox ItemsSource="{Binding StatusList,RelativeSource={RelativeSource Mode=FindAncestor,AncestorType=UserControl}}"
                            SelectedValue="{Binding Port}" SelectedValuePath="Status" SelectionChanged="SelectionChanged"/>
    </DataTemplate>
  </telerik:GridViewComboBoxColumn.CellTemplate>
</telerik:GridViewComboBoxColumn>
0
Pavel Pavlov
Telerik team
answered on 11 Aug 2011, 04:16 PM
Hello Greg,

Glad to hear that it is ok now. Actually that is what I meant in point 2 .
In case you need further assistance , do not hesitate to contact us.

Regards,
Pavel Pavlov
the Telerik team

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

Tags
GridView
Asked by
Greg
Top achievements
Rank 2
Answers by
Maya
Telerik team
Greg
Top achievements
Rank 2
Pavel Pavlov
Telerik team
Share this question
or