How to change the style of the entire row of a selected cell when SelectionUnit="Cell"?

[MATSUE Yusuke]

Hello.

Is there any way to change the background color of the entire row of a selected cell when SelectionUnit="Cell"?

[Mohanram Anbukkarasu]

Hi Matsue, 

We suspect that you are using our WPF SFDataGrid in which we have SelectionUnit property. But you have selected control as GridDataControl. We are little unclear with this. If you are using SfDataGrid, setting SelectionUnit as Cell will apply selection only for the cells. When you set SelectionUnit as Any, you can select the cells by clicking on the cell and you can also select the row by clicking on the row header.  

UG reference : https://help.syncfusion.com/wpf/datagrid/selection  

Please revert to us with more details about the exact scebario/requirement with illustration and the exact control. It will be more helpful for us to check for the possibilities to achieve your exact requirement and to provide a prompt solution.  

Regards, 

Mohanram A. 

[MATSUE Yusuke]

Thank you.

I made the wrong choice of controls. I am using SfDataGrid.

I have illustrated the requirements. I want to select cell by cell and I want to highlight the row that is being selected.

Attachment: sfdatagrid_59a658dc.zip

[Vijayarasan Sivanandham]

Hi Matsue,  

Currently we are checking possibilities to achieve your requirement via workaround. So, we need two more business days to validate this. We will update with further details on or before March 23, 2022. 

We appreciate your patience and understanding. 

Regards, 

Vijayarasan S 

[Vijayarasan Sivanandham]

Hi Matsue, 

Your requirement to change the background color of the entire row of a selected cell when SelectionUnit as Cell in SfDataGrid can be achieved by customizing the MouseUp, KeyUp events and CellStyleSelector in SfDataGrid. Please refer the below code snippet,

XAML Code Snippet: 

<Application.Resources> 

        <local:SelectorClass x:Key="styleSelector"/> 

        <Style x:Key="highlightCell" TargetType="syncfusion:GridCell"> 

            <Setter Property="Background"> 

                <Setter.Value> 

                    <SolidColorBrush Color="Yellow" Opacity="0.5" /> 

                </Setter.Value> 

            </Setter> 

        </Style>         

</Application.Resources> 

 

<syncfusion:SfDataGrid x:Name="sfDataGrid"  

                               SelectionUnit="Cell" 

                               SelectionMode="Extended"   

                               MouseUp="OnMouseUp"                               

                               KeyUp="OnKeyUp"                                

                               CellStyleSelector="{StaticResource styleSelector}" 

                               AllowEditing="True" 

                               ItemsSource="{Binding Orders}" 

                               AutoGenerateColumns="False"> 

            <syncfusion:SfDataGrid.Columns> 

                <syncfusion:GridTextColumn MappingName="OrderID" HeaderText="Order ID" /> 

                <syncfusion:GridTextColumn MappingName="CustomerID" HeaderText="Customer ID" /> 

                <syncfusion:GridTextColumn MappingName="CustomerName" HeaderText="Customer Name" /> 

                <syncfusion:GridTextColumn MappingName="Country" HeaderText="Country" /> 

                <syncfusion:GridTextColumn MappingName="UnitPrice" HeaderText="Unit Price" /> 

            </syncfusion:SfDataGrid.Columns> 

</syncfusion:SfDataGrid>    

C# Code Snippet: 

private void HighlightRow(SfDataGrid sfDataGrid) 

{ 

            foreach (var rowIndex in visibleRowIndex) 

            { 

                //Change the CellStyle at runtime by based on row index in SfDataGrid. 

                sfDataGrid.UpdateDataRow(rowIndex); 

            } 

            //previously maintained rowindex cleared 

            visibleRowIndex.Clear(); 

            foreach (var cell in sfDataGrid.GetSelectedCells()) 

            { 

                //get the selected cells RowIndex 

                var rowIndex = sfDataGrid.ResolveToRowIndex((cell as GridCellInfo).RowData); 

                //Update the CellStyle at runtime baaed on selected cells RowIndex in SfDataGrid. 

                sfDataGrid.UpdateDataRow(rowIndex); 

                //Maintain RowIndex for change the CellStyle while removing and adding selection in SfDataGrid 

                visibleRowIndex.Add(rowIndex); 

 

            } 

} 

 

List<int> visibleRowIndex = new List<int>(); 

private void OnMouseUp(object sender, System.Windows.Input.MouseButtonEventArgs e) 

{             

            //get the SfDataGrid 

            SfDataGrid sfDataGrid = sender as SfDataGrid; 

            HighlightRow(sfDataGrid); 

}       

 

private void OnKeyUp(object sender, System.Windows.Input.KeyEventArgs e) 

{ 

            //get the SfDataGrid 

            SfDataGrid sfDataGrid = sender as SfDataGrid; 

            HighlightRow(sfDataGrid); 

} 

C# Code Snippet of Style Selector: 

public class SelectorClass : StyleSelector 

{         

        public override Style SelectStyle(object item, DependencyObject container) 

        {             

            var column = (container as GridCell).ColumnBase.GridColumn; 

 

            var sfDataGrid = column.GetType().GetProperty("DataGrid", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic).GetValue(column) as SfDataGrid; 

            foreach (var cell in sfDataGrid.GetSelectedCells()) 

            { 

                if ((cell as GridCellInfo).RowData.Equals(item)) 

                    return App.Current.Resources["highlightCell"] as Style;                 

            } 

 

            return base.SelectStyle(item, container); 

        } 

} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/173524/ze/SfDataGridDemo-750375882

UG Link: https://help.syncfusion.com/wpf/datagrid/conditional-styling#conditional-styling-of-cells-using-style-selector

Here, we are applying the CellStyle for highlight the selected row in SfDataGrid. So, when you apply the background for GridCell, the selection is not displayed in UI.

However, You can overcome this problem by reducing the Opacity for the brush that you set to the GridCell background. For more information, please refer the below knowledge base documentation link, 

 

KB Link: https://www.syncfusion.com/kb/3182/how-to-show-the-selection-of-row-cell-when-setting-the-background-for-sfdatagrid-gridcell

Please let us know if you have any concerns in this.

Regards,
Vijayarasan S