Header Checkbox set to null

13 posts, 0 answers
  1. Dongzhi
    Dongzhi avatar
    25 posts
    Member since:
    Jan 2014

    Posted 25 Aug 2014 Link to this post

    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?
  2. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 26 Aug 2014 Link to this post

    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.
     
  3. Dongzhi
    Dongzhi avatar
    25 posts
    Member since:
    Jan 2014

    Posted 26 Aug 2014 in reply to Vanya Pavlova Link to this post

    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:





  4. Dongzhi
    Dongzhi avatar
    25 posts
    Member since:
    Jan 2014

    Posted 26 Aug 2014 in reply to Dongzhi Link to this post

    Sorry forgot to add attachments. First image shows what the grid currently does and the second image shows what I want it to do.
  5. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 26 Aug 2014 Link to this post

    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.
     
  6. Dongzhi
    Dongzhi avatar
    25 posts
    Member since:
    Jan 2014

    Posted 09 Sep 2014 in reply to Vanya Pavlova Link to this post

    Can you please provide an example because I was unable to do that.
  7. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 10 Sep 2014 Link to this post

    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.
     
  8. Dongzhi
    Dongzhi avatar
    25 posts
    Member since:
    Jan 2014

    Posted 18 Sep 2014 in reply to Vanya Pavlova Link to this post

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

  9. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 22 Sep 2014 Link to this post

    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.
     
  10. Dongzhi
    Dongzhi avatar
    25 posts
    Member since:
    Jan 2014

    Posted 30 Sep 2014 in reply to Vanya Pavlova Link to this post

    That approached worked well for me. Is it possible to bind the checkboxes to the records IsSelected property?
  11. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 01 Oct 2014 Link to this post

    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.
     
  12. Dongzhi
    Dongzhi avatar
    25 posts
    Member since:
    Jan 2014

    Posted 02 Oct 2014 in reply to Vanya Pavlova Link to this post

    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);
                }
            }
  13. Vanya Pavlova
    Admin
    Vanya Pavlova avatar
    2019 posts

    Posted 06 Oct 2014 Link to this post

    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.
     
Back to Top