Change style of a specific cell in code

[The ZipGenius Team]

Hello.

I have the following DataGrid

It is divided in three sections, where only cells with the white background are focusable.

I would like to change programmatically the style of cells in the gray are when I click cells in the white area, so that I could mark what characters are the translation of the bytes selected in the central area.

How could I do this? Can you give some tip, please?

[Vijayarasan Sivanandham]

Hi The ZipGenius Team,

Your requirement to change style of a specific cell in code while selecting data at runtime in SfDataGrid can be achieved by using CellStyleSelector and calling the UpdateDataRow method in SelectionChanged event in SfDataGrid. Please refer to the below code snippet,

XAML Code Snippet:

<Application.Resources>

        <ResourceDictionary>

            <ResourceDictionary.MergedDictionaries>

                <XamlControlsResources xmlns="using:Microsoft.UI.Xaml.Controls" />

                <!-- Other merged dictionaries here -->

            </ResourceDictionary.MergedDictionaries>

            <!-- Other app resources here -->

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

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

                <Setter Property="Background" Value="Red" />               

            </Style>           

        </ResourceDictionary>

</Application.Resources>

 

<syncfusion:SfDataGrid x:Name="dataGrid"

                               AutoGenerateColumns="False"

                               CurrentCellEndEdit="OnCurrentCellEndEdit"

                               Loaded="OnLoaded"

                               SelectionUnit="Cell"                              

                               SelectionChanged="OnSelectionChanged"

                               CellStyleSelector="{StaticResource styleSelector}"

                               AllowFiltering="True"

                               AllowEditing="True"

                               ColumnWidthMode="Star"         

                               LiveDataUpdateMode="AllowDataShaping"

                               ItemsSource="{Binding ProductInfo}">

C# Code Snippet of UpdateDataRow:

//method used to reflect the CellStyle at runtime

public void UpdateDataRow(int index)

{

            var visualcontainer = this.dataGrid.GetType().GetProperty("VisualContainer", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(this.dataGrid) as VisualContainer;

            if (visualcontainer == null)

                return;

 

            var datarow = this.dataGrid.RowGenerator.Items.FirstOrDefault(row => row.RowIndex == index);

            if (datarow != null)

            {

                var rowIndex = datarow.GetType().GetProperty("RowIndex", BindingFlags.Instance | BindingFlags.Public);

                rowIndex.SetValue(datarow, -1);

 

                visualcontainer.InvalidateMeasureInfo();

                visualcontainer.InvalidateArrange();

            }

}

C# Code Snippet customization in SelectionChanged event:

private void OnSelectionChanged(object sender, Syncfusion.UI.Xaml.Grids.GridSelectionChangedEventArgs e)

{

            var dataGrid = sender as SfDataGrid;

            if(e.AddedItems.Count > 0)

            {

                foreach(var gridCellInfo in e.AddedItems)

                {

                    var rowdata = (gridCellInfo as GridCellInfo).RowData;

 

                    var rowIndex = dataGrid.ResolveToRowIndex(rowdata);

                    //Change the CellStyleSelector at runtime by selected cell in SfDataGrid

                    UpdateDataRow(rowIndex);

                   

                }

            }

 

            if (e.RemovedItems.Count > 0)

            {

                foreach (var gridCellInfo in e.RemovedItems)

                {

                    var rowdata = (gridCellInfo as GridCellInfo).RowData;

 

                    var rowIndex = dataGrid.ResolveToRowIndex(rowdata);

                    //Change the CellStyleSelector at runtime by selected cell in SfDataGrid

                    UpdateDataRow(rowIndex);

 

                }

            }

}

C# Code Snippet of CellStyleSelector:

public class SelectorClass : StyleSelector

{

        protected override Style SelectStyleCore(object item, DependencyObject container)

        {

            //here customized  based on your sceanrio

 

            var data = item as ProductSalesDetails;

            var gridCell = container as GridCell;

 

            //custom condition is checked based on data.

            if (data != null && gridCell != null)

            {

                //get the SfDataGrid

                var dataGrid = (SfDataGrid)gridCell.ColumnBase.GridColumn.GetType().GetProperty("DataGrid", BindingFlags.Instance | BindingFlags.NonPublic).GetValue(gridCell.ColumnBase.GridColumn);

 

                //get the selected Cell details

                var getSelectedCellDetails = dataGrid.GetSelectedCells();

 

                if (getSelectedCellDetails.Count > 0)

                {

 

                    foreach (var cell in getSelectedCellDetails)

                    {

                        var provider = dataGrid.View.GetPropertyAccessProvider();

                        var getCell = cell as GridCellInfo;

                       

                        //get the selected cell value

                        var getCodeValue = provider.GetValue(getCell.RowData, getCell.Column.MappingName);

 

                        object convertedValue = string.Empty;

                        //here convert the CodeValue into ASIIC character

                        if (getCell.Column.MappingName == "Country")

                             convertedValue = Convert.ToChar(Convert.ToUInt32(getCodeValue.ToString(), 16));

 

                        //here get the char value

                        var getAsix = provider.GetValue(data, gridCell.ColumnBase.GridColumn.MappingName);                       

 

                        //apply style based on value

                        if (getAsix.ToString() == convertedValue.ToString())

                            return Application.Current.Resources["redCellStyle"] as Style;                      

                           

                    }

                }                  

 

            }

            return base.SelectStyleCore(item, container);

        }

}

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

Please find the sample in the attachment and let us know if you have any concerns in this.

Regards,

Vijayarasan S

Attachment: SfDataGridDemo_a946defa.zip