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

[MsExclusive]

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]

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; 

    } 

} 

 

Sample: https://www.syncfusion.com/downloads/support/forum/130169/ze/CheckBox_RowHeader1023186333 

Please let us know if you have any query. 

Regards, 

Muthukumar K

[MsExclusive]

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.

https://demos.devexpress.com/aspxgridviewdemos/Selection/Selection.aspx

[Muthukumar Kalyanasundaram]

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> 

 

 

Sample: https://www.syncfusion.com/downloads/support/forum/130169/ze/SfTreeGrid_Demo-1735244927 

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

https://help.syncfusion.com/wpf/sftreegrid/getting-started 

Please let us know if you have any query. 

Regards, 

Muthukumar K 

[Ondrej Svoboda]

Hi,

still no way how to do this in SfDataGrid without binding CheckBox to the model? That would be very useful for touch devices. 

Ondra

[Gowtham Gopalsamy]

Hi MsExclusive,

We have analyzed your query. We are currently checking the mentioned issue in the reported configuration and we will update you with more details on 18th July,2019.
We will appreciate your patience until then.

Regards,
Gowtham.

[Farjana Parveen Ayubb]

Hi Ondrej, 

 

Thank you for your patience. 

 

We have considered to provide support for “Support for Binding the row selection status to a GridCheckBoxColumn or provide special checkbox column to associate the row selection” in WPF and logged feature request for the same. We will implement this feature in any of our upcoming release.  

 

At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. We will let you know when this feature is implemented. We appreciate your patience until then. 

 

Thank you for requesting this feature and helping us define it. We are always trying to make our products better and feature requests like yours are a key part of our product growth efforts. 

 

You can also communicate with us regarding the open features any time using our Feature Report page.  

 

Link: https://www.syncfusion.com/feedback/3262/bind-the-row-selection-status-support-to-a-gridcheckboxcolumn 

 

If you have any more specification/suggestions to the feature request, you can add it as a comment in the portal and cast your vote to make it count. 

 

Regards, 

Farjana Parveen A 

[Farjana Parveen Ayubb]

Hi Ondrej,  

  

We are glad to announce that our Essential Studio 2019 Volume 3 Beta Release version 17.3.0.9 is rolled out with your requested feature “Support for Binding the row selection status to a GridCheckBoxColumn” or provide special checkbox column to associate the row selection” and is available for download under the following link.  

  

https://www.syncfusion.com/forums/147704/essential-studio-2019-volume-3-beta-release-v17-3-0-9-is-available-for-download 

 

Please find the code example and sample in the below location  

XAML 

<syncfusion:SfDataGrid    x:Name="dataGrid"                                                                                             AutoGenerateColumns="False"  

                       ItemsSource="{Binding Orders}"> 

      <syncfusion:SfDataGrid.Columns> 

            <syncfusion:GridCheckBoxSelectorColumn MappingName="SelectorColumn" /> 

      </syncfusion:SfDataGrid.Columns> 

</syncfusion:SfDataGrid> 

  

C# 

this.dataGrid.Columns.Add(new GridCheckBoxSelectorColumn()  

{  

       MappingName = "SelectorColumn" 

}); 

 

Sample Location: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CheckBoxSelectorColumn-842761409 

 

We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance.  

  

Regards,  

Farjana Parveen A