Number of clicks in the ComboBox column

3 posts, 1 answers
  1. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 07 Feb 2012 Link to this post

    Hello!

    I follow the documentation and i manage to use the GridView ComboBox Column perfectly. The one issue is, I have to click three times
    in order to change its value.

    Since i already worked with CheckBoxColumn i follow that approach:
    http://www.telerik.com/help/wpf/gridview-checkbox-column-clicks.html

    I Set the "EditTriggers" property of the ComboBoxColumn to CellClick but I still need to click two times. The ComboBox Column doesn't have the AutoSelectOnEdit="True" as the CheckBoxColumn has. I realy like the ComboBoxColumn, is there a way to workaround this without creating a DataTemplate  with a Combobox?

    Thank you.

    PROBLEM

    If you have a GridViewCheckBox column to your gridview you need to click three times by default in order to change the value of the checkbox - the first two clicks will enter the edit mode and the last one will change the value.

    The following solutions will give you options to control the number of clicks needed to change the value of the checkbox column.

    SOLUTION

    Collapse image First approach

    2 clicks solution

    By setting the EditTriggers="CellClick" property of the GridViewCheckBoxColumn the cells will enter edit mode with a single click only. Now you will need one more click to change the value of the checkbox.

    1 clicks solution

    In addition to the EditTriggers="CellClick" property, you can set the AutoSelectOnEdit="True" property of the GridViewCheckBox column. This property will alter the checked state of the checkbox as soon as the cell enters edit mode, thus changing the value on a single click. Please note that the GridView has to be focused.

    This could be done in XAML or in code behind when the columns are AutoGenerated:

    CopyXAML
    <telerik:GridViewCheckBoxColumn Name="CheckBoxColumn"
                EditTriggers="CellClick"
                AutoSelectOnEdit="True"
                DataMemberBinding="{Binding IsChampion}" />

    CopyC#
    private void gridView_AutoGeneratingColumn(object sender, GridViewAutoGeneratingColumnEventArgs e)
    {
        var dataColumn = e.Column as GridViewDataColumn;
    
        if (dataColumn != null)
        {
            if (dataColumn.UniqueName.ToString() == "IsChampion")
            {
                // create GridViewCheckBoxColumn
                GridViewCheckBoxColumn newColumn = new GridViewCheckBoxColumn();
                newColumn.DataMemberBinding = dataColumn.DataMemberBinding;
                newColumn.Header = dataColumn.Header;
                newColumn.UniqueName = dataColumn.UniqueName;
                newColumn.EditTriggers = Telerik.Windows.Controls.GridView.GridViewEditTriggers.CellClick;
                newColumn.AutoSelectOnEdit = true;
                e.Column = newColumn;
            }
        }
    }
    CopyVB.NET
    Private Sub gridView_AutoGeneratingColumn(sender As Object, e As GridViewAutoGeneratingColumnEventArgs)
        Dim dataColumn = TryCast(e.Column, GridViewDataColumn)
        If dataColumn IsNot Nothing Then
            If dataColumn.UniqueName.ToString() = "IsChampion" Then
                ' create GridViewCheckBoxColumn
                Dim newColumn As New GridViewCheckBoxColumn()
                newColumn.DataMemberBinding = dataColumn.DataMemberBinding
                newColumn.Header = dataColumn.Header
                newColumn.UniqueName = dataColumn.UniqueName
                newColumn.EditTriggers = Telerik.Windows.Controls.GridView.GridViewEditTriggers.CellClick
                newColumn.AutoSelectOnEdit = True
                e.Column = newColumn
            End If
        End If
    End Sub

    Collapse image Second approach

    Another approach you can use is to leverage the CellTemplate of the GridViewDataColumn and put a checkbox in it:

    CopyXAML
    <telerik:GridViewDataColumn DataMemberBinding="{Binding IsActive}" 
                                IsReadOnly="True">
        <telerik:GridViewDataColumn.CellTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding IsActive, Mode=TwoWay}"
                          telerik:StyleManager.Theme="Office_Black"/>
            </DataTemplate>
        </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>

    The checkbox is two-way bound to the IsActive bool property so with single click you change it. The benefit here is that the checkbox looks enabled, because it is in the CellTemplate while in the first approach the checkbox looks disabled (because the cells are not in edit mode yet). Note that the column is read-only, since this is a checkbox with two-way binding and there is no need to enter the edit mode at all.

  2. Answer
    Maya
    Admin
    Maya avatar
    4062 posts

    Posted 08 Feb 2012 Link to this post

    Hi Joao,

    You can achieve the behavior with GridViewComboBoxColumn by setting EditTriggers to 'CellClick' and OpenDropDownOnFocus property of the editor (RadComboBox). 
    For example:

    <telerik:GridViewComboBoxColumn DataMemberBinding="{Binding ClubID}"
                                                SelectedValueMemberPath="ID"
                                                EditTriggers="CellClick"
                                                DisplayMemberPath="Name"
                                                ItemsSource="{Binding Clubs, Source={StaticResource MyViewModel}}">
                    <telerik:GridViewComboBoxColumn.EditorStyle>
                        <StyleTargetType="telerik:RadComboBox">
                            <SetterProperty="OpenDropDownOnFocus"Value="True"/>
                        </Style>
                    </telerik:GridViewComboBoxColumn.EditorStyle>
                </telerik:GridViewComboBoxColumn>

     Does this correspond to your requirements ? 

    Kind regards,
    Maya
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  3. UI for WPF is Visual Studio 2017 Ready
  4. Joao Paulo Grassi
    Joao Paulo Grassi avatar
    98 posts
    Member since:
    Feb 2011

    Posted 08 Feb 2012 Link to this post

    Hi Maya,

    Thank you, that is exactly what i needed.

Back to Top