Checkbox cell click behaviour in Telerik RadGridView is not intuitive and requires multiple clicks

Question

I have bound a Telerik RadGridView properly with the first column being a bound checkbox:

<telerik:GridViewCheckBoxColumn DataMemberBinding="{Binding Selected, Mode=TwoWay}"
                                Header="Generate" Width="95" IsReadOnly="False"/>

I can click and change the checkbox state no problem. The problem is that checking the checkbox is not intuitive. In order for a user to click a checkbox, they have to first click the checkbox cell, click again to activate, and then click again to check the check box. Three individual clicks to check the checkbox.

Is there a better or native way to make this seamless? I want the user to be able to click a checkbox and immidiately see it checked regardless if the row/cell is already selected. I want the user to be able to do a check in one click.

Infragistics controls could do this years ago.

Could someone please explain how to get more intuitive check box behaviour in the Telerik RadGridView for Silverlight?

Answer 1

I've had much the same issue as you recently. What I did to fix it was to put a CheckBox in the CellTemplate of the column:

    <telerik:GridViewDataColumn Header="Checkbox Column" IsReadOnly="True">
        <telerik:GridViewDataColumn.CellTemplate>
            <DataTemplate>
                <CheckBox IsChecked="{Binding Path=BooleanProperty, Mode=TwoWay}" />
            </DataTemplate>
        </telerik:GridViewDataColumn.CellTemplate>
    </telerik:GridViewDataColumn>

Note that I've added the property IsReadOnly="True" to the column. This doesn't make the column read-only; you should still be able to click on the checkbox and set your boolean property. What this property does is to prevent the cells in the column from using the CellEditTemplate when you click on them.

Normally, a RadGridView column uses the CellTemplate for viewing and the CellEditTemplate when the cell goes into edit mode. However, we don't need to use the CellEditTemplate here, because the CellTemplate is perfectly capable of changing the value of these boolean properties on its own.

Answer 2

The telerik documentation site now has some alternatives to the approach listed in the accepted answer:

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

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:

XAML

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

C#

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