WPF GridView and CheckBox column

[MiroslavStantic]

Hi,

How do I define a checkbox column in WPF GridView control?

Thanks

Miroslav

[Dimitar Dobrev]

Hi Miroslav,

For a column that allows its cells to be edited using a check box, you may take a look at the example about "Editors" in our sample project. The "Boolean" column in the example displays a check box when one of its cells enters edit mode (double click).
However, if you want to use check boxes all the time instead of displaying text, you can find a sample in the attached archive. It demonstrates changing a Boolean property of a custom object by using check boxes in a column. You will also see, in the text blocks in the bottom, that the changes you make to a cell in this column is reflected in the underlying object.
We will be glad to answer any other questions that interest you.
 
Best wishes,

Dimitar Dobrev

the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott]

How do I set the checkbox to checked when I click on a row?

I want to be able to click anywhere on a row and check/uncheck the checkbox based on the selected property of the row.

[Atanas]

Hi Scott,

I am sending you a modified copy of the sample project you already have, which in my opinion solves your issue.

There is an issue with our routed events that are handled earlier than expected. This is fixed in our new release, but to overcome it now, I need to subscribe explicitly for these events. The code looks like this:

this.radGridViewCustomers.AddHandler(RadGridView.MouseLeftButtonDownEvent, new RoutedEventHandler(radGridViewCustomers_MouseLeftButtonDown), true);

The last Boolean parameter is very important - the 'True' value means that I am subscribed for already handled events.

After that, everything in the sample project is quite straightforward and in the event handler I am getting the underlying business object,

Record record = (e.Source as RadGridView).CurrentRecord;
            Customer cutomer = (Customer) (record as DataRecord).Data;
            cutomer.HasOrders = true;

and I am changing the value of HasOrders property.

If you have any further questions, please let me know.




Regards,
Atanas
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott]

I opened up this project and ran it.  Clicking on a row does not uncheck the checkbox, so I added:

cutomer.HasOrders = !cutomer.HasOrders;

 After a couple clicks on different rows, it throws an "Object reference not set to an instance....."  message on this line:

  Customer cutomer = (Customer) (record as DataRecord).Data;

I see this behavior on some of my other controls...It appears that if you click too fast, you get this.  Any solutions?

[Nedyalko Nikolov]

Hi Scott,

Thanks for the feedback, we have already fixed the "fast clicking" issue. Attached is a modified copy of the example you already have.

Modifications are:

 1. Changed references to point to the new Q3 assemblies.
 2. Removed subscription to the GridViewRow.MouseLeftButtonDownEvent (not needed any more).

If you have any further questions, please let me know.

Kind regards,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott]

Thank you, this works great.  One or two comments:

what does this mean?
2. Removed subscription to the GridViewRow.MouseLeftButtonDownEvent (not needed any more).

The MouseLeftButtonDownEvent is still there.

Another question is this.. This works great except that clicking directly on the checkbox doesn't fire the MouseLeftButtonDownEvent (which changes the business objects property, HasOrders).  Any strategy for clicking the checkbox and still changing the underlying property?    Basically I want the user to click anywhere on the row or the checkbox.

Thanks!

[Nedyalko Nikolov]

Hello Scott,

About "Removed subscription to the GridViewRow.MouseLeftButtonDownEvent (not needed any more)" I mean that the previous version of the example have this subscription. You can diff MainWindow.xaml.cs but it is not so important.

Now for the issue about check CheckBox directly there is a problem with CheckBox Binding.
Xaml for the whole custom cellTemplate should look like this:

<ControlTemplate x:Key="cellTemplate" TargetType="{x:Type telerik:GridViewCell}">
                <CheckBox IsChecked="{Binding Path=HasOrders, Mode=TwoWay}"
                          HorizontalAlignment="Center" VerticalAlignment="Center" />
            </ControlTemplate>

I'm also attaching a modified example.

Sincerely yours,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Scott]

This has been working great, however I just discovered an issue.  When clicking on a column to sort, it will fire the MouseLeftButtonDown event and check or uncheck whatever record happens to be selected.  So we need a way to avoid this code when not actually clicking on a row.

[Nedyalko Nikolov]

Hi Scott,

To fix the issue you can use the OriginalSource property of the RoutedEventArgs object and ensure that left mouse button is clicked on a "normal" GridViewRow.

I'm attaching the example you already have with small changes that fixes the issue.

Regards,
Nedyalko Nikolov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[nbahl]

I have a RadGridView that has two checkbox columns both binding to different fields.  Do I need to create a seperate ControlTemplate for each column?  Do you have an example of a GridView with multiple checkbox columns?

Thanks,
Nate

[Hristo Deshev]

Hello nbahl,

You can reuse your templates by specifying the same resource with the StaticResource extension. Say I want to add another column besides HasOrders. I can do it like that:

<telerik:GridViewDataColumn HeaderText="HasOrders" CellStyle="{StaticResource booleanCellStyle}" />
<telerik:GridViewDataColumn HeaderText="HasSomethingElse" CellStyle="{StaticResource booleanCellStyle}" />

I am attaching the modified project for your reference.

Best wishes,
Hristo Deshev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[nbahl]

Hristo,
I am able to display the second checkbox but now they are both binded to the same field (HasOrders) so when you check one column it checks the other column (HasSomethingelse).  I was thinking I would need to create another ControlTemplate that is binded to a different field but when I try this Visual Studio 2008 locks up on me.  Is that what I need to do?

Thanks,
Nate

[Stefan Dobrev]

Hi Nate,

This is exactly what you have to do. Just copy the control template and the style, change their keys and change the binding to point to the new property. Something like this:

<ControlTemplate x:Key="HasSomethingElseCellTemplate" TargetType="{x:Type telerik:GridViewCell}">

    <CheckBox IsChecked="{Binding Path=HasSomethingElse, Mode=TwoWay}"

            HorizontalAlignment="Center" VerticalAlignment="Center" />

</ControlTemplate>

<Style x:Key="HasSomethingElseCellStyle">

    <Setter Property="telerik:GridViewCell.Template" Value="{StaticResource HasSomethingElseCellTemplate}" />

</Style>

Note that you should also change the StaticResource in the new GridViewDataColumn's CellStyle to point to the new Style:

<telerik:RadGridView Name="radGridViewCustomers"

    AutoGenerateColumns="False" Grid.ColumnSpan="2" ItemsSource="{Binding}"

    MouseLeftButtonDown="radGridViewCustomers_MouseLeftButtonDown">

    <telerik:RadGridView.Columns>

        <telerik:GridViewDataColumn HeaderText="Name" UniqueName="Name" />

        <telerik:GridViewDataColumn HeaderText="Age" UniqueName="Age" />

        <telerik:GridViewDataColumn HeaderText="HasOrders" CellStyle="{StaticResource booleanCellStyle}" />

        <telerik:GridViewDataColumn HeaderText="HasSomethingElse" CellStyle="{StaticResource HasSomethingElseCellStyle}" />

    </telerik:RadGridView.Columns>

</telerik:RadGridView>

Hope this will help.

Greetings,
sdobrev
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Jonathan]

Hi,

The solutions described so far have me duplicating the ControlTemplate for each checkbox column in my application whenever the Path of the Binding is different. This is exactly what I'm trying to avoid. 

I'm looking to define one ControlTemplate so that all grid instances in my application can contain CheckBox columns without having to define a new ControlTemplate for each column (when the only thing that has changed is the path of the binding).

How should I go about defining such a solution?

Thanks,

Jonathan

[Stefan Dobrev]

Hello Jonathan,

You can use global check box style to achieve this:

<Grid>

<Grid.Resources>

<Style TargetType="CheckBox">

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="VerticalAlignment" Value="Center" />

</Style>

</Grid.Resources>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<telerik:RadGridView Name="playersGrid" Grid.Row="1" ColumnsWidthMode="Fill">

</telerik:RadGridView>

</Grid>

Hope this helps.

All the best,
Stefan Dobrev
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.

[Bhavin]

I m using WPF RadGridView, now i want to make 1st record default as selected. So when i click on that tab, first record should come selected in gridview in that tab.

 Please let me know abt this.

Bhavin

[Vlad]

Hi bhavin patel,

You can use SelectedItem to achieve your goal similar to our online demos.

Greetings,
Vlad
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Bhavin]

Hello,

 i have checkbox column in radgridview. I want to unhook that checkbox's event in some other event and again hook it back. Now my problem is how to get that checkbox control from grid ??

[Joel Palmer]

What are our chances of you just embedding a CheckBoxColumn type in an upcoming release?

[Vlad]

Hi,

We already have a column with checkboxes designed for rows selection. Is that what you are looking for?

Greetings,
Vlad
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Joel Palmer]

It is if I can bind the checkbox to a nullable boolean property on my List.  Do you have an example?

[Vlad]

Hello,

This is column is already bound to the row IsSelected property. Can you post more info about your scenario? Are you going to use the column for editing or selection?

Greetings,
Vlad
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Rikin]

i have one databse with 3 column,,,,fields= name password,.. now if i want to dispay these 2 field in the gridview in WPF then wht shuld i do for  tht ? please help..
and please tell me can we drag and drop all the fields from datasource into WPF .xaml form as we do in winforms.. if yes thn plz tell how ?    

[sarag]

Hi,

I am having the same issue, please update if you find any solution for the multiple check box in the grid view with one control template.


thanks.

The solutions described so far have me duplicating the ControlTemplate for each checkbox column in my application whenever the Path of the Binding is different. This is exactly what I'm trying to avoid. 

I'm looking to define one ControlTemplate so that all grid instances in my application can contain CheckBox columns without having to define a new ControlTemplate for each column (when the only thing that has changed is the path of the binding).

How should I go about defining such a solution?

<Grid>

<Grid.Resources>

<Style TargetType="CheckBox">

<Setter Property="HorizontalAlignment" Value="Center" />

<Setter Property="VerticalAlignment" Value="Center" />

</Style>

</Grid.Resources>

<Grid.RowDefinitions>

<RowDefinition Height="Auto"/>

<RowDefinition Height="Auto" />

</Grid.RowDefinitions>

<telerik:RadGridView Name="playersGrid" Grid.Row="1" ColumnsWidthMode="Fill">

</telerik:RadGridView>

</Grid>