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.
Unfortunately, activation email could not send to your email. Please try again.

Display checkbox in row header and bind it to the selected row

Thread ID:

Created:

Updated:

Platform:

Replies:

130169 Apr 26,2017 03:04 AM May 3,2017 07:39 AM WPF 3
loading
Tags: SfDataGrid
MsExclusive
Asked On April 26, 2017 03:04 AM

Hi,
I want to display checkbox in row header and bind it to the selected row.
what is the solution to implement this?

Muthukumar Kalyanasundaram [Syncfusion]
Replied On April 27, 2017 09:47 AM

Hi MsExclusive, 

Thank you for contacting Syncfusion support. 

We have checked your query. You can achieve your requirement by customizing the style of “GridRowHeaderCell” as shown like below code, 

Code Example: Xaml 

<local:ViewModel x:Key="viewmodel"/> 
 
<Style TargetType="Syncfusion:GridRowHeaderCell"> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="Syncfusion:GridRowHeaderCell"> 
                <Border x:Name="PART_RowHeaderCellBorder" 
            Background="{TemplateBinding Background}" 
            BorderBrush="{TemplateBinding BorderBrush}" 
            BorderThickness="{TemplateBinding BorderThickness}"> 
                    <Grid> 
                        <CheckBox IsChecked="{Binding IsChecked, Mode=TwoWay, 
                    UpdateSourceTrigger=PropertyChanged}" Command="local:Commands.CheckAndUnCheck" CommandParameter="{Binding ElementName=datagrid}" /> 
                    </Grid> 
                </Border> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 


Code Snippet: C# (Based on the selection of row header, the checkbox will be selected/deselected). 

public static class Commands 
{ 
    static Commands() 
    { 
        CommandManager.RegisterClassCommandBinding(typeof(CheckBox), new CommandBinding(CheckAndUnCheck, OnCheckUnCheckCommand, OnCanExecuteCheckAndUnCheck)); 
    } 
 
    public static RoutedCommand CheckAndUnCheck = new RoutedCommand("CheckAndUnCheck", typeof(CheckBox)); 
    private static void OnCheckUnCheckCommand(object sender, ExecutedRoutedEventArgs args) 
    { 
        var orderinfo = (sender as CheckBox).DataContext as OrderInfo; 
        var sfdatagrid = (args.Parameter as SfDataGrid); 
 
        if (orderinfo.IsChecked) 
        { 
            orderinfo.IsChecked = true; 
            sfdatagrid.SelectedItem = orderinfo; 
        } 
        else 
        { 
            orderinfo.IsChecked = false; 
        } 
             
    } 
    private static void OnCanExecuteCheckAndUnCheck(object sender, CanExecuteRoutedEventArgs args) 
    { 
        args.CanExecute = true; 
    } 
} 
 


Please let us know if you have any query. 

Regards, 
Muthukumar K

MsExclusive
Replied On April 30, 2017 04:37 AM

Tank you Muthukumar,
But I do not want to use it.
I want to bind it to the selected row without "IsChecked" property in my ViewModel.
please read this article below.


Muthukumar Kalyanasundaram [Syncfusion]
Replied On May 3, 2017 07:39 AM

Hi MsExclusive, 

Thanks for the update. 

We have checked your query. Based on your requirement, we have suggested you to use SfTreeGrid. It’s similar to SfDataGrid. For your reference, we have attached the sample in the below location. In sample, we have enabled the ShowCheckBox and CheckBoxSelectionMode property as shown like below code. In SfTreeGrid provides support for loading CheckBox in the expander cell of each node, which allows the user to check/uncheck the corresponding node. You can show the checkbox in expander cell by enabling ShowCheckBox property as “true”. For more details about NodeCheckBox and CheckBoxSelectionMode.  
 
Code snippet: 
 
<Style TargetType="syncfusion:TreeGridExpanderCell"> 
    <Setter Property="Template"> 
        <Setter.Value> 
            <ControlTemplate TargetType="syncfusion:TreeGridExpanderCell"> 
                <Grid x:Name="Root"> 
                    <Border x:Name="PART_GridCellBorder" 
                    Background="{TemplateBinding Background}" 
                    BorderBrush="{TemplateBinding BorderBrush}" 
                    BorderThickness="{TemplateBinding BorderThickness}" 
                    SnapsToDevicePixels="True"> 
                        <Grid Margin="{TemplateBinding IndentMargin}"> 
                            <Grid.ColumnDefinitions> 
                                <ColumnDefinition Width="0" /> 
                                <ColumnDefinition Width="*" /> 
                                <ColumnDefinition Width="0" /> 
                            </Grid.ColumnDefinitions> 
                            <syncfusion:TreeGridExpander x:Name="PART_ExpanderCell" 
                                            Grid.Column="0" 
                                           Width="12" 
                                            Height="12" 
                           . . . . . 
                           . . . . . 
 
                 Converter={StaticResource boolToVisiblityConverter},Mode=TwoWay}" /> 
                            <CheckBox Name="PART_SelectCheckBox" 
                                Grid.Column="1" 
                                Width="16" 
                           . . . . . 
                           . . . . . 
                                Visibility="{Binding Path=ColumnBase.Renderer.TreeGrid.ShowCheckBox, RelativeSource={RelativeSource Mode=TemplatedParent},Converter={StaticResource boolToVisiblityConverter}, 
Mode=TwoWay}" /><Grid Grid.Column="2" 
                           Margin="3,0,0,0"  
                            Background="{TemplateBinding Background}"> 
                           . . . . . 
                           . . . . . 
                </Grid> 
            </ControlTemplate> 
        </Setter.Value> 
    </Setter> 
</Style> 
 
<syncfusion:SfTreeGrid Name="treeGrid" 
                    AllowEditing="True" SelectionMode="Multiple" 
                    AutoGenerateColumns="False"  
                    AutoExpandMode="RootNodesExpanded"                              
                    ChildPropertyName="Children"  
                    ShowCheckBox="True"    
                    CheckBoxSelectionMode="SelectOnCheck" 
                    ItemsSource="{Binding EmployeeDetails}"> 
    <syncfusion:SfTreeGrid.Columns> 
        <syncfusion:TreeGridTextColumn MappingName="TestCheck" AllowEditing="False" 
                                    DisplayBinding="{Binding Converter={StaticResource checkBoxSelectionExt} }" HeaderText="" Width="0"/> 
        <syncfusion:TreeGridNumericColumn MappingName="Id" /> 
        <syncfusion:TreeGridTextColumn MappingName="FirstName" /> 
    </syncfusion:SfTreeGrid.Columns> 
</syncfusion:SfTreeGrid> 
 
 

For more details about SfTreeGrid, you can refer the below link 

Please let us know if you have any query. 

Regards, 
Muthukumar K 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;