GridSwitchColumn in SfDataGrid: Select all capability from header?

[Matthew Rauls]

I have an SfDataGrid and have created a column of checkboxes that bind correctly to the backing objects. My question is this: Is there a relatively easy way to customize the header of that column to:

1. Display the same type of checkbox as the row
2. When the header checkbox is checked, all rows are selected, or un-selected depending on conditions

I can accomplish #2 pretty easily using buttons somewhere else on the page, but my main question is how to essentially embed the button in the header (#1) as it appears you can only supply a text value for a header, and then I am not clear on how to capture a click on the header.

[Karthikraja Kalaimani]

Hi Matthew, 

The SfDataGrid supports to load a custom view on Header cell by using the HeaderTemplate property of the GridColumn. Please refer to the below UG document. 

UG link : https://help.syncfusion.com/xamarin/datagrid/column-types#headertemplate

By using the GridTappedEvent you can detect the touch on SfDataGrid cells. 

https://help.syncfusion.com/xamarin/datagrid/grid-events#gridtapped-event

Regards,
Karthik Raja

[Josh Phan]

Hello Syncfusion, could you please help me on how to implement the select all capability from 

datagrid GridSwitchColumn using mvvm way? Thank you.

[Lakshmi Natarajan]

Hi Josh,

To select the entire column at run time from Header, you can refer to the suggestion provided in this reply.

Also, we are not clear about your requirement. Could you please share your requirement in detail with a demo video? It will be helpful for us to check on it and provide you with the solution as soon as possible.

Regards,

Lakshmi Natarajan

[Josh Phan]

Hi Lakshmi,

In my SfDataGrid, I have created a column of checkboxes and managed to add a checkbox to the header of that column using GridSwitchColumn. If the header checkbox is checked/unchecked, other checkboxes in that column will be checked/unchecked. Could you please help me to implement that (mvvm pattern preferable)? 

Thank you.

[Lakshmi Natarajan]

Hi Josh,

You can achieve your requirement by binding the ViewModel property to the HeaderTemplate. In the set field of the property, update the items’ IsChecked property.

Please refer to the following code snippets for more reference,

ViewModel

public class ViewModel : INotifyPropertyChanged

{

    private bool isHeaderChecked;

 

    public bool IsHeaderChecked

    {

        get { return isHeaderChecked; }

        set

        {

            if(isHeaderChecked != value)

            {

                isHeaderChecked = value;

 

                foreach (var item in OrdersInfo)

                {

                    item.IsChecked = isHeaderChecked;

                }

            }

            this.RaisePropertyChanged("IsHeaderChecked");

        }

    }

 

    public ViewModel()

    {

        orderRepository = new OrderInfoRepository();

        GenerateRows();

    }

}

XAML: Bind the ViewModel.IsChecked property from the DataGrid reference.

<sfgrid:SfDataGrid x:Name="sfGrid"

            AutoGenerateColumns="False"

            ColumnSizer="Auto"

            SelectionMode="Single"

            AllowEditing="True"

            NavigationMode="Cell"

            ItemsSource="{Binding OrdersInfo}">

 

    <sfgrid:SfDataGrid.Columns>

        <sfgrid:GridSwitchColumn MappingName="IsChecked">

            <sfgrid:GridSwitchColumn.HeaderTemplate>

                <DataTemplate>

                    <buttons:SfCheckBox x:Name="OrderID" Text="Check"

                                IsChecked="{Binding Path=BindingContext.IsHeaderChecked, Source={x:Reference sfGrid}, Mode=TwoWay}"/>

                </DataTemplate>

            </sfgrid:GridSwitchColumn.HeaderTemplate>

        </sfgrid:GridSwitchColumn>

    </sfgrid:SfDataGrid.Columns>

</sfgrid:SfDataGrid>

We have attached the tested sample for your reference. Please let us know if you need further assistance.

Regards,

Lakshmi Natarajan

Attachment: GettingStarted_9084eaf5.zip

[vishnu]

@Lakshmi Natarajan

we saw latest replay and we observed the same in our development, but your fixes are not up to the mark, sorry for that. let say when we select all the child checkbox then header check box should check right but it's not happening in give same code in last reply can you check one more time. FYI. PFA.

[Suthi Yuvaraj]

Hi Vishnu,

You can extend the functionality of the GridSwitchColumn to achieve your desired result by overriding the OnInitializeDisplayView method in the GridCellSwitchRenderer and triggering the Toggled event for the SfSwitchColumn when the child switch column values are changed. For more information, please see the code snippet provided as a reference.

Code snippet:

XAML Page:

<sfgrid:SfDataGrid x:Name="sfGrid"

AutoGenerateColumns="False"

ColumnSizer="Auto"

SelectionMode="Single"

AllowEditing="True"

NavigationMode="Cell"

ItemsSource="{Binding OrdersInfo}">

 

<sfgrid:SfDataGrid.Columns>

<sfgrid:GridSwitchColumn MappingName="IsChecked">

<sfgrid:GridSwitchColumn.HeaderTemplate>

<DataTemplate>

<Grid>

    <Grid.GestureRecognizers>

        <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped"/>

    </Grid.GestureRecognizers>

    <buttons:SfCheckBox x:Name="OrderID" Text="Check" InputTransparent="True"

        IsChecked="{Binding Path=BindingContext.IsHeaderChecked, Source={x:Reference sfGrid}, Mode=TwoWay}"/>

</Grid>

</DataTemplate>

 

</sfgrid:GridSwitchColumn.HeaderTemplate>

</sfgrid:GridSwitchColumn>

<sfgrid:GridTextColumn MappingName="Customer"/>

<sfgrid:GridTextColumn MappingName="ShipCity"/>

<sfgrid:GridTextColumn MappingName="ShipCountry"/>

</sfgrid:SfDataGrid.Columns>

</sfgrid:SfDataGrid>

.cs Page:

MainPage.xaml.cs

 

public DataGridPage()

{

InitializeComponent();

sfGrid.CellRenderers.Remove("Switch");

sfGrid.CellRenderers.Add("Switch", new CustomSwitchColumn());

}

 

 

public class CustomSwitchColumn : GridCellSwitchRenderer

 {

        public ViewModel viewModel;

        public override void OnInitializeDisplayView(DataColumnBase dataColumn, SfSwitchControl view)

        {

            base.OnInitializeDisplayView(dataColumn, view);

            viewModel = dataColumn.GridColumn.BindingContext as ViewModel;

            if (dataColumn.GridColumn.MappingName == "IsChecked")

            {

                view.Toggled += View_Toggled;

            }

 

        }

 

        private void View_Toggled(object sender, ToggledEventArgs e)

        {

                if (viewModel.OrdersInfo.All(x => x.IsChecked))

                {

                    viewModel.IsHeaderChecked = true;

                }

                else

                {

                    viewModel.IsHeaderChecked = false;

                }

        }

}

Also we have attached the sample for your reference. Please have a look on it and let us know if you have any concern.

Regards,

Suthi Yuvaraj.

Attachment: GettingStarted_caeefeda.zip