ketan patil
Reputation: 55
Using mytoolkit datagrid with multi-select checkboxes in uwp
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.
Upvotes: 0
Views: 690
Answers (2)
ketan patil
Reputation: 55
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)
{
}
Upvotes: 0
Barry Wang
Reputation: 1469
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.
Upvotes: 0
Related Questions
- WPF C# - multiple CheckBox controls in a DataGrid cell
- Datagrid Checkbox in UWP
- How to create a list view with checkbox item with select all check box in uwp
- Multiple selection with checkbox using Datagrid in WPF
- DataGrid Cell MultiSelect ComboBox with checkboxes
- wpf datagrid checkbox column
- Multicheck DataGridCheckBoxColumns
- WPF datagrid with checkListBox drop down
- How to set up the datagrid control from the Xceed\Extended WPF Toolkit with checkbox column and binding
- Datagrid-Checkbox select and unselect