We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to do Checkbox in SfDataGrid header or Group header?

Hi,

I want to checkbox in the SfDataGrid Header to enable selecting all items. this should be a three state checkbox to be able to also reflect a non-complete selection of items.
I would like to have that on a group level as well to select the corresponing child items.

I found no way to specifiy a CellTemplate for just one specific header column.

Any hints?

Moreover the question is wether selecting with the Standard Extended Selection pattern makes sense here or if one should better use checkboxex on item level. In the latter the checkboxed should be synced with the Extended Selection done with mouse or keyboard.

Regards
Bernd



7 Replies

JG Jai Ganesh S Syncfusion Team July 22, 2016 01:16 PM UTC

Hi Bernd, 
 
You can achieve your requirement for select the records by clicking the Checkbox in column header. We have prepared the sample for this and this can be downloaded from the below location, 
 
 
Screen Shot: 
 
 
 
Also, currently we are checking the possibility to load the checkbox in Group level and show the selection in the group elements. We will let you know the details on July 26, 2016. 
 
Regards, 
Jai Ganesh S 



BE Bernd July 22, 2016 10:18 PM UTC

Jai,

thank you for the sample. Getting the checkbox in the header was easier than I thought.

The behaviour was not exactly what I wanted to achieve. I wanted to sync the Checkboxes with the selection an vice versa, so if you click in the checkbox column you add/remove one entry from the selection and when you click any other column the checkboxes are automatically turned on/off corresponding to the selection.

I managed to change the code to almost behave as I want it to. See here:

        protected override void ProcessSelectedItemsChanged(NotifyCollectionChangedEventArgs e)
        {
            base.ProcessSelectedItemsChanged(e);

            if (e.Action == NotifyCollectionChangedAction.Reset)
            {
                foreach (OrderInfo o in (this.DataGrid.DataContext as ViewModel).OrderInfoCollection)
                    o.IsChecked = false;
            }
            else if (e.Action == NotifyCollectionChangedAction.Add)
            {
                foreach (OrderInfo o in e.NewItems)
                    o.IsChecked = true;
            }
            else if (e.Action == NotifyCollectionChangedAction.Remove)
            {
                foreach (OrderInfo o in e.OldItems)
                    o.IsChecked = false;
            }
            else
            {
                if (e.NewItems != null)
                    foreach (OrderInfo o in e.NewItems)
                        o.IsChecked = true;

                if (e.OldItems != null)
                    foreach (OrderInfo o in e.OldItems)
                        o.IsChecked = false;
            }
        }

        protected override void ProcessPointerReleased(MouseButtonEventArgs args, RowColumnIndex rowColumnIndex)
        {
            if (rowColumnIndex.ColumnIndex == 0)
            {
                List<object> Selection = new List<object>();

                foreach (GridRowInfo gri in this.SelectedRows)
                    Selection.Add(gri);

                base.ProcessPointerReleased(args, rowColumnIndex);

                // Was the current row in the selection before?
                object griCurrent = Selection.SingleOrDefault(item => ((GridRowInfo)item).RowIndex == rowColumnIndex.RowIndex);

                if (griCurrent != null)
                {
                    Selection.Remove(griCurrent);
                }
                else
                {
                    griCurrent = this.SelectedRows.SingleOrDefault(item => item.RowIndex == rowColumnIndex.RowIndex);

                    if (griCurrent != null)
                        Selection.Add(griCurrent);
                }

                this.ClearSelections(false);

                if (Selection.Count > 0)
                    this.AddSelection(Selection, SelectionReason.SelectedItemsChanged);
            }
            else
            {
                base.ProcessPointerReleased(args, rowColumnIndex);

                var SelectedRows = this.SelectedRows.FindAll(item => item.RowIndex == rowColumnIndex.RowIndex);
                if (SelectedRows.Count == 0)
                {
                    var row = this.DataGrid.GetRecordAtRowIndex(rowColumnIndex.RowIndex);
                    (row as OrderInfo).IsChecked = false;
                }
                else
                    (SelectedRows[0].RowData as OrderInfo).IsChecked = true;
            }

            var collectioncount = (DataGrid.DataContext as ViewModel).OrderInfoCollection.Count;
            var selecteditemcount = DataGrid.SelectedItems.Count;

            if (selecteditemcount == collectioncount)
                (this.DataGrid.DataContext as ViewModel).IsHeaderChecked = true;
            else if (selecteditemcount == 0)
                (this.DataGrid.DataContext as ViewModel).IsHeaderChecked = false;
            else
                (this.DataGrid.DataContext as ViewModel).IsHeaderChecked = null;

            args.Handled = true;

            DataGrid.Focus();
        }


There Is no just one thing I am missing but it looks like it is a limitation of your Grid control.

I use Extended selection mode and select a couple of items by dragging the mouse and holding the Ctrl key. If I now try to select an second buch of items while still holding the Ctrl key the previous selection is clear.
Is this a limitation or can I realize multiple block selection?

Regards
Bernd


JG Jai Ganesh S Syncfusion Team July 26, 2016 04:14 PM UTC

Hi Bernd, 
 
You can achieve your requirement to maintain a previous selected items by wiring the SelectionChanging event like below, 
 
this.SfdataGrid.SelectionChanging += SfdataGrid_SelectionChanging; 
 
private void SfdataGrid_SelectionChanging(object sender, GridSelectionChangingEventArgs e) 
 { 
   e.RemovedItems.Clear(); 
 } 
  
Sample: 
 
Regards, 
Jai Ganesh S 



BE Bernd July 27, 2016 08:29 PM UTC

Jai,

thank you for the update. It is a step in the right direction but there are two problems:

1) I loose the ability to unselect a single line within the selection then.
2) The selection also remains even if I do not hold the Ctrl key.

I will leave for holiday on saturday so I will not be able to dig depper into this within the next two weeks but maybe you have another Idea. I attached my current version of your demo application.

Regards
Bernd

Attachment: CheckBoxSelectAllRowSample_18e10e6c.zip


JG Jai Ganesh S Syncfusion Team July 28, 2016 02:34 PM UTC

Hi Bernd, 
 
Your both requirements can be achieved by adding the following condition check in SelctionChanging event, 
 
private void datagrid_SelectionChanging(object sender, GridSelectionChangingEventArgs e) 
  { 
       if (SelectionHelper.CheckControlKeyPressed() && e.AddedItems!=null) 
          e.RemovedItems.Clear(); 
  } 
 
Regards, 
Jai Ganesh S 



BE Bernd July 28, 2016 03:02 PM UTC

Jai,

that's been it. I appreciate your support very much.

Regards
Bernd


JG Jai Ganesh S Syncfusion Team July 29, 2016 02:05 AM UTC

Hi Bernd,  
 
Thank you for th update. 
 
Please let us know if you need further assistance on this. 
 
Regards, 
Jai Ganesh S 


Loader.
Live Chat Icon For mobile
Up arrow icon