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

Header Checkbox set to null

12 Answers 230 Views
GridView
This is a migrated thread and some comments may be shown as answers.
Dongzhi
Top achievements
Rank 1
Dongzhi asked on 25 Aug 2014, 02:21 PM
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?

12 Answers, 1 is accepted

Sort by
0
Vanya Pavlova
Telerik team
answered on 26 Aug 2014, 01:20 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Dongzhi
Top achievements
Rank 1
answered on 26 Aug 2014, 02:06 PM
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:





0
Dongzhi
Top achievements
Rank 1
answered on 26 Aug 2014, 02:11 PM
Sorry forgot to add attachments. First image shows what the grid currently does and the second image shows what I want it to do.
0
Vanya Pavlova
Telerik team
answered on 26 Aug 2014, 02:21 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Dongzhi
Top achievements
Rank 1
answered on 09 Sep 2014, 03:26 PM
Can you please provide an example because I was unable to do that.
0
Vanya Pavlova
Telerik team
answered on 10 Sep 2014, 11:57 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Dongzhi
Top achievements
Rank 1
answered on 18 Sep 2014, 08:37 PM
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);
            }
        }
    }

0
Vanya Pavlova
Telerik team
answered on 22 Sep 2014, 01:59 PM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Dongzhi
Top achievements
Rank 1
answered on 30 Sep 2014, 09:11 PM
That approached worked well for me. Is it possible to bind the checkboxes to the records IsSelected property?
0
Vanya Pavlova
Telerik team
answered on 01 Oct 2014, 07:29 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
0
Dongzhi
Top achievements
Rank 1
answered on 02 Oct 2014, 04:02 PM
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);
            }
        }
0
Vanya Pavlova
Telerik team
answered on 06 Oct 2014, 07:29 AM
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
 
Check out Telerik Analytics, the service which allows developers to discover app usage patterns, analyze user data, log exceptions, solve problems and profile application performance at run time. Watch the videos and start improving your app based on facts, not hunches.
 
Tags
GridView
Asked by
Dongzhi
Top achievements
Rank 1
Answers by
Vanya Pavlova
Telerik team
Dongzhi
Top achievements
Rank 1
Share this question
or