Using mytoolkit datagrid with multi-select checkboxes in uwp

Question

I want to display a data grid with check boxes.

In my code its add the check box to the header so how to bind the check box for all rows and after click on select all check box all check box should be selected.

i want to display output same as image.

<Toolkit:DataGrid ItemsSource="{Binding People}" x:Name="DeptListView" 
                  SelectionMode="Multiple" DefaultOrderIndex="1"
                  SelectedItem="{Binding SelectedPerson, Mode=TwoWay}" >
    <Toolkit:DataGrid.Columns>
        <Toolkit:DataGridTextColumn  >
            <Toolkit:DataGridTextColumn.Header>
                <CheckBox Content="Select All"  ></CheckBox>
            </Toolkit:DataGridTextColumn.Header>
        </Toolkit:DataGridTextColumn>

        <Toolkit:DataGridTextColumn Width="200" Header="CustID" 
          Binding="{Binding CustID}"/>

        <Toolkit:DataGridTextColumn Width="200" Header="company name" 
          Binding="{Binding name}"/>

        <Toolkit:DataGridTextColumn Width="200" Header="ContactName" 
          Binding="{Binding ContactName}"/>

        <Toolkit:DataGridTextColumn Width="200" Header="Country" 
          Binding="{Binding Country}"/>

    </Toolkit:DataGrid.Columns>
</Toolkit:DataGrid>  

In above code its add the check box to the header not for each row. so how to bind the check box for all rows.

Answer 1

first install package from NuGet 1.MyToolKit.Extended.

include headers to xaml xmlns:con="using:MyToolKit.Extended" xmlns:Converters="using:MyToolkit.Converters"

 <Page.Resources >

    <Style  TargetType="Toolkit:DataGrid" x:Name="GridBackground" >
        <Setter Property="BorderBrush"  Value="Black" ></Setter>
        <Setter Property="BorderThickness"   Value="0,5,5,5" ></Setter>
        <Setter Property="HeaderBackground"   Value="#E2E2E2" />
        <Setter Property="FontFamily"    Value="{StaticResource inventorySemiBoldFont}" />
        <Setter Property="RowBackgroundOddBrush" Value="White" />
        <Setter Property="RowBackgroundEvenBrush" Value="White" />
        <Setter Property="Foreground"  Value="#000000" />
        <Setter Property="FontWeight"  Value="SemiBold"   />
        <Setter Property="CellTemplate">
            <Setter.Value>
                <DataTemplate>
                    <ContentPresenter Margin="8" Content="{Binding Control}" />
                </DataTemplate>
            </Setter.Value>
        </Setter>
    </Style>
</Page.Resources>

 <Toolkit:DataGrid Style="{StaticResource GridBackground}"   BorderBrush="Transparent"  BorderThickness="5"   AllowFocusOnInteraction="False" x:Name="UserListView"  SelectionMode="Single"    FontFamily="{StaticResource inventorySemiBoldFont  }" FontSize="16" RelativePanel.AlignLeftWithPanel="True" Grid.ColumnSpan="8" Margin="10,21,103,414" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" Grid.RowSpan="2" VerticalAlignment="Stretch"  >
        <Toolkit:DataGrid.RowStyle  >
            <Style TargetType="ListBoxItem">
                <Setter Property="Background" Value="Transparent" />
                <Setter Property="TabNavigation" Value="Local" />
                <Setter Property="FontWeight" Value="ExtraBold"  />
                <Setter Property="FontFamily" Value="{StaticResource inventoryRegularFont }" />
                <Setter Property="Height" Value="40" />
                <Setter Property="MinHeight" Value="40" />
                <Setter Property="HorizontalContentAlignment" Value="Left" />
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="ListBoxItem">
                            <Grid
      x:Name="LayoutRoot"
      Background="{TemplateBinding Background}"
      BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid.Resources>
                                    <Style x:Key="BaseContentPresenterStyle" TargetType="ContentPresenter">
                                        <Setter Property="FontFamily" Value="{StaticResource inventoryRegularFont }" />
                                        <Setter Property="FontWeight" Value="Normal"  />
                                        <Setter Property="FontSize" Value="2" />
                                        <Setter Property="TextWrapping" Value="Wrap" />
                                        <Setter Property="LineStackingStrategy" Value="MaxHeight" />
                                        <Setter Property="TextLineBounds" Value="Full" />
                                    </Style>
                                    <Style x:Key="BodyContentPresenterStyle" TargetType="ContentPresenter" BasedOn="{StaticResource BaseContentPresenterStyle}">
                                        <Setter Property="FontFamily" Value="{StaticResource inventoryRegularFont }" />
                                        <Setter Property="FontWeight" Value="Normal"  />
                                        <Setter Property="FontSize" Value="2" />
                                    </Style>
                                </Grid.Resources>
                                <VisualStateManager.VisualStateGroups>
                                    <VisualStateGroup x:Name="CommonStates">
                                        <VisualState x:Name="Normal" />
                                        <VisualState x:Name="Disabled">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlDisabledBaseMediumLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="PointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Pressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="Selected">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedUnfocused">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentLowBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPointerOver">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentMediumBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                        <VisualState x:Name="SelectedPressed">
                                            <Storyboard>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="PressedBackground"
                                           Storyboard.TargetProperty="Fill">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightListAccentHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                                <ObjectAnimationUsingKeyFrames Storyboard.TargetName="ContentPresenter"
                                           Storyboard.TargetProperty="Foreground">
                                                    <DiscreteObjectKeyFrame KeyTime="0" Value="{ThemeResource SystemControlHighlightAltBaseHighBrush}" />
                                                </ObjectAnimationUsingKeyFrames>
                                            </Storyboard>
                                        </VisualState>
                                    </VisualStateGroup>
                                </VisualStateManager.VisualStateGroups>
                                <Rectangle
        x:Name="PressedBackground"
        Fill="Transparent"  
        Control.IsTemplateFocusTarget="True"/>
                                <ContentPresenter
        x:Name="ContentPresenter"
        Content="{TemplateBinding Content}"
        ContentTransitions="{TemplateBinding ContentTransitions}"
        ContentTemplate="{TemplateBinding ContentTemplate}"
        Style="{StaticResource BodyContentPresenterStyle}"
        TextWrapping="NoWrap"
                                    BorderBrush="#E1E1E1" 
                                    BorderThickness="0,0,0,1"
        HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
        VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    FontSize="5"
                                    FontFamily="{StaticResource inventoryRegularFont }"
      />
                            </Grid>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>
        </Toolkit:DataGrid.RowStyle>

        <Toolkit:DataGrid.Columns  >
            <Toolkit:DataGridTemplatedColumn  Width="100" CanSort="False"  >
                <Toolkit:DataGridTemplatedColumn.Header   >
                    <CheckBox x:Name="OptionsAllCheckBox" HorizontalAlignment="Left" Style="{StaticResource CheckBoxStyle1}" Content="" VerticalAlignment="Top"  VerticalContentAlignment="Top"  HorizontalContentAlignment="Left"  IsThreeState="True" Checked="SelectAll_Checked" Unchecked="SelectAll_Unchecked" Indeterminate="SelectAll_Indeterminate"/>
                </Toolkit:DataGridTemplatedColumn.Header>
                <Toolkit:DataGridTemplatedColumn.CellTemplate>
                    <DataTemplate >
                        <CheckBox  IsChecked="{Binding Checked, Mode=TwoWay}" Style="{StaticResource CheckBoxStyle1}"   Tag ="{Binding userId}" VerticalAlignment="Top"  VerticalContentAlignment="Top" HorizontalAlignment="Left" HorizontalContentAlignment="Left"   Checked="Option_Checked" Unchecked="Option_Unchecked" />
                    </DataTemplate>
                </Toolkit:DataGridTemplatedColumn.CellTemplate>
            </Toolkit:DataGridTemplatedColumn>
            <Toolkit:DataGridTextColumn   FontSize="14" Foreground="#333333"   Width="350" Header="Name" Binding="{Binding userfullName}" />
            <Toolkit:DataGridTextColumn  Foreground="#333333"   FontSize="14"  Width="350" Header="Email" Binding="{Binding userEmail}" />
            <Toolkit:DataGridTextColumn  Foreground="#333333"   FontSize="14"  Width="270" Header="Phone" Binding="{Binding userPhone}" />

            <Toolkit:DataGridTemplatedColumn  Header="Update" IsAscendingDefault="False" CanSort="False"   >
                <Toolkit:DataGridTemplatedColumn.CellTemplate>
                    <DataTemplate>
                        <Image Source="Images/Edit.png" ToolTipService.ToolTip="Update User" DataContext="{Binding userId}" Height="20" Width="20" Tapped="GridUpdateBtnClick"/>
                    </DataTemplate>
                </Toolkit:DataGridTemplatedColumn.CellTemplate>
            </Toolkit:DataGridTemplatedColumn>
        </Toolkit:DataGrid.Columns>
    </Toolkit:DataGrid>

declare a Class For User

public class UserData : INotifyPropertyChanged
{
    public string userFirstName { get; set; }
    public string userEmail { get; set; }
    public string userLastName { get; set; }
    public string userExt { get; set; }
    public string userPhone { get; set; }
    public int userId { get; set; }
    public string userPrefix { get; set; }
    public string userfullName { get; set; }

    public UserData(string userPrefix, string userFirstName, string userLastName, int userId, string userEmail, string userExt, string userPhone)
    {
        this.userPrefix = userPrefix;
        this.userFirstName = userFirstName;
        this.userLastName = userLastName;
        this.userId = userId;
        this.userEmail = userEmail;
        this.userExt = userExt;
        this.userPhone = userPhone;
        this.userfullName = userPrefix + " " + userFirstName + " " + userLastName;
    }

    private bool _Checked = false;
    public bool Checked { get { return _Checked; } set { _Checked = value; OnChanged("Checked"); } }

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;
    private void OnChanged(string prop)
    {
        if (PropertyChanged != null)
            PropertyChanged(this, new PropertyChangedEventArgs(prop));
    }


    #endregion
}

create a event for checkbox and update image

      private void SelectAll_Checked(object sender, RoutedEventArgs e )
    {

            foreach (var item in (dynamic)DoGrid.ItemsSource)
            {
                item.Checked = true;
                Option_Checked(sender, e);
            }

    }

    private void SelectAll_Indeterminate(object sender, RoutedEventArgs e)
    {

        foreach (var item in (dynamic)DoGrid.ItemsSource)
        {
            item.Checked = false ;
            Option_Unchecked(sender, e);
        }

    }

    private void SelectAll_Unchecked(object sender, RoutedEventArgs e)
    {

    }

    private void Option_Unchecked(object sender, RoutedEventArgs e)
    {

            CheckBox ch = (CheckBox)sender;
            ch.IsChecked = false;

    }

    private void Option_Checked(object sender, RoutedEventArgs e)
    {
        CheckBox ch = (CheckBox)sender;
        ch.IsChecked  = true;
    }

    private void Image_Tapped(object sender, TappedRoutedEventArgs e)
    {

    }

Answer 2

You will probably need to use DataGridTemplatedColumn and set checkbox in this column. And to set binding you need to have a bool value and a converter to binding to checkbox's ischecked property based on this doc. And to set select all, you need to set all the bool value to true in your collection when the checkbox in the header is checked.