Header Checkbox set to null

[Dongzhi]

I am using the select all checkbox out of the box for selected items. I tried to change the header template using the following code:

<Style x:Key="MultiGridCheckbox" TargetType="telerik:GridViewCheckBoxColumn">
        <Setter Property="Header">
            <Setter.Value>
                <CheckBox IsChecked="{Binding Path=AllMembersAreChecked,                               
  RelativeSource={RelativeSource AncestorType=widgets:TelerikGrid}}"/>
            </Setter.Value>
        </Setter>
    </Style>

This works however the problem I'm having is if the user selects a row I want the header checkbox to be set to null to indicate to the user that there's a row(s) selected in the grid. Is that possible?

[Vanya Pavlova]

Hello Dongzhi,


Thank you for contacting us.

Can you please share with us what do you mean by " I want the header checkbox to be set to null to indicate to the user that there's a row(s) selected in the grid"?

When you mark the CheckBox as checked, all items or some part of them will be selected based on your custom logic. Respectively, once you uncheck it, this checked icon will disappear.

You may set IsThreeState property of the CheckBox to True and if you do not have any items to select, it should be null and AllMembersAreChecked is of Nullable type. 

Do you mean that you need to modify the check icon to look like CheckBox's indeterminate state?

I look forward to hearing from you. 

Regards,
Vanya Pavlova
Telerik

 

 

[Dongzhi]

Currently when the user selects the grid they get this state from the header:



However I want the "indeterminate" state to portray to the user that some items are selected in the grid:

[Dongzhi]

Sorry forgot to add attachments. First image shows what the grid currently does and the second image shows what I want it to do.

[Vanya Pavlova]

Hi Dongzhi,


Thank you for getting back to us. 

You may predefine the template of a CheckBox for the corresponding theme and visually manipulate normal, checked, indeterminate elements based on your needs. 

If you encounter any difficulties, please let me know. 


Regards,
Vanya Pavlova
Telerik

 

 

[Dongzhi]

Can you please provide an example because I was unable to do that.

[Vanya Pavlova]

Hello Dongzhi,


Thank you for getting back to us. 

I'm attaching you sample demo, which illustrates this approach. 
Hope this helps. 


Regards,
Vanya Pavlova
Telerik

 

 

[Dongzhi]

I modified your example to show the issue I'm currently having but I couldn't attach the zip file. In the selection changed event I bound the header checkbox IsChecked to a property. When selected items is 0 the header checkbox is false, when selected items is equal to total items the header checkbox is true, but I'm having trouble showing the checkbox to display null when selected items is greater than 0 but less than total items.

Xaml:
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation" x:Class="HeaderCheckBox.MainWindow"
        Title="MainWindow" Height="350" Width="525" x:Name="testPage">
<Grid DataContext="{Binding Source={StaticResource SampleDataSource}}">
<telerik:RadGridView Name="testGrid" ItemsSource="{Binding Collection}" SelectionChanged="RadGridView_SelectionChanged"
                             SelectionMode="Extended">
<telerik:RadGridView.Columns>
                <telerik:GridViewSelectColumn>
                    <telerik:GridViewSelectColumn.Header>
                        <CheckBox IsChecked="{Binding Path=AllChecked,ElementName=testPage}" IsThreeState="True"/>
                    </telerik:GridViewSelectColumn.Header>
                </telerik:GridViewSelectColumn>
</telerik:RadGridView.Columns>
</telerik:RadGridView>
</Grid>
</Window>

Code behind:
public partial class MainWindow : Window
    {
        public MainWindow()
        {
            InitializeComponent();
        }

        private bool? allChecked;

        public bool? AllChecked
        {
            get
            {
                return allChecked;
            }
            set
            {
                allChecked = value;
                OnPropertyChanged("AllChecked");
            }
        }

        private void RadGridView_SelectionChanged(object sender, Telerik.Windows.Controls.SelectionChangeEventArgs e)
        {
            if (testGrid.SelectedItems.Count == 0)
            {
                AllChecked = false;
            }
            else if (testGrid.SelectedItems.Count == testGrid.Items.Count)
            {
                AllChecked = true;
            }
            else
            {
                AllChecked = null;
            }
        }

        public event PropertyChangedEventHandler PropertyChanged;

        protected void OnPropertyChanged(string propertyName)
        {
            this.OnPropertyChanged(new PropertyChangedEventArgs(propertyName));
        }

        protected void OnPropertyChanged(PropertyChangedEventArgs e)
        {
            var handler = this.PropertyChanged;
            if (handler != null)
            {
                handler(this, e);
            }
        }
    }

[Vanya Pavlova]

Hi Dongzhi,


Thank you for getting back to us. 

Generally, GridViewSelectColumn is internally bound to the GridViewRow's IsSelected property. By that reason it is not recommended to be related to another custom property. 

I strongly recommend you to keep the default behavior of GridViewSelectColumn.

You may try to achieve the desired effect either with GridViewDataColumn or GridViewCheckBoxColumn. 


Regards,
Vanya Pavlova
Telerik

 

 

[Dongzhi]

That approached worked well for me. Is it possible to bind the checkboxes to the records IsSelected property?

[Vanya Pavlova]

Hi Dongzhi,


Thank you for getting back to us. 

You could take a look at the following forum thread for further reference. 
Hope this helps. 


Regards,
Vanya Pavlova
Telerik

 

 

[Dongzhi]

Is there a way of doing it without creating property in a class? The reason I ask is because I'm creating a custom control and calling a style to create the chechbox select column:

<Style x:Key="TelerikHeaderCheckboxStyle" TargetType="{x:Type telerik:GridViewHeaderCell}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center"
                              IsChecked="{Binding RelativeSource={RelativeSource AncestorType=my:TelerikGrid},
                                                  Path=AllItemsChecked,
                                                  Mode=TwoWay}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>

    <Style x:Key="TelerikCheckboxColumnStyle" TargetType="{x:Type telerik:GridViewCell}">
        <Setter Property="ContentTemplate">
            <Setter.Value>
                <DataTemplate>
                    <CheckBox HorizontalAlignment="Center" VerticalAlignment="Center" 
                              IsChecked="{Binding RelativeSource={RelativeSource TemplatedParent},
                                                  Path=Item.IsSelected,
                                                  Mode=TwoWay}"/>
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>


protected void TelerikGridInitialized(object sender, System.EventArgs e)
        {
            var myGrid = sender as TelerikGrid ?? new TelerikGrid();

            if (this.MultiGrid)
            {
                var checkboxColumn = new GridViewCheckBoxColumn
                {
                    UniqueName = "checkboxSelection",
                    IsFilterable = false, IsReorderable = false,
                    IsResizable = false, IsGroupable = false,
                    CellStyle = (Style)myGrid.TryFindResource("TelerikCheckboxColumnStyle"),
                    HeaderCellStyle = (Style)myGrid.TryFindResource("TelerikHeaderCheckboxStyle"),
                    FooterCellStyle = (Style)myGrid.TryFindResource("TelerikFooterTotalCellStyle")
                };
                
                myGrid.Columns.Insert(0, checkboxColumn);
            }
        }

[Vanya Pavlova]

Hi Dongzhi,


Thank you for getting back to us.

As it turns out, the recommended way to achieve the desired result is to define a property of your view model. 


Regards,
Vanya Pavlova
Telerik