How to change cell style after edited?

[Yang Jun]

Hi 

If I have a SfDataGrid, which binded to an ObservableCollection, is editable.

I want to change the single cell style (font color) after it's value was changed, in order to show which cells are changed.

And all the cells can be reset to default style by a button.

How to do that? Or,if there any better way to let user know which cells are changed?

Any help is appreciated, thanks!

[Jai Ganesh S]

Hi Yang,

Thank you for using Syncfusion products.

We have analyzed your queries and please find the responses for your queries as below,

Query 1: (Change the single cell style (font color) after its value was changed)

You can achieve this requirement by using CellStyleSelector and CurrentCellValueChanged event in SfDataGrid. In CurrentCellValueChanged you can get the current cell , Row and column index and call the UpdateDataRow method.

Code Snippet [C#]:

public class CellStyleSelector : StyleSelector

    {

        public override Style SelectStyle(object item, DependencyObject container)

        {

            var record = item as BusinessObjects;

            var gridCell = container as GridCell;

            var columnIndex = gridCell.ColumnBase.ColumnIndex;

            if (columnIndex == record.DataIndex)

            {

                //if the cell is clicked first time, DataIndex is stored in ColoredRows collection.

                if (!record.ColoredRows.Contains(record.DataIndex))

                    record.ColoredRows.Add(record.DataIndex);

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

            }

            else

            {

                //check if style already applied to GridCell or not.

                if (record.ColoredRows.Contains(columnIndex))

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

            }

            return base.SelectStyle(item, container);

        }

    }

Code Snippet [C#]:

void datagrid_CurrentCellValueChanged(object sender, CurrentCellValueChangedEventArgs args)

   {

            var grid = sender as SfDataGrid;

            //getting GridCell

            var cell =

                (grid.SelectionController.CurrentCellManager.CurrentCell.Renderer as GridCellRendererBase)

                    .CurrentCellElement;

           

            if (cell != null)

            {

                var vm = cell.DataContext as BusinessObjects;

                //assigned columnindex to the index property in OrderInfo

                vm.DataIndex = args.RowColumnIndex.ColumnIndex;

                //updates the current row index

                grid.UpdateDataRow(args.RowColumnIndex.RowIndex);

            }

    }

We already have a kb to change the selected cell foreground. The kb link as follows:

KB  Link:

http://www.syncfusion.com/kb/4186/how-to-change-the-gridcell-style-at-runtime

Query 2 : Can be reset to default style by a button.

You can reset the style by getting the GridCell and clear the GridCell style,

Code snippet[C#]:

private void Button_Click(object sender, RoutedEventArgs e)

        {

            DataRowBase dataRow = null;

            List<DataColumnBase> visibleColumns = null;

            foreach (var item in datagrid.GetRowGenerator().Items)

            {

                 //Get datarow

               dataRow = item as DataRowBase;

                //Get visible columns

                visibleColumns = dataRow.GetType().GetProperty("VisibleColumns", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(dataRow) as List<DataColumnBase>;

                foreach (var column1 in visibleColumns)

                {

                   FrameworkElement columnElement = column1.GetType().GetField("ColumnElement", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(column1) as FrameworkElement;

                   if (!(columnElement is GridRowHeaderCell))

                    {

                        //Get the GridCell

                        GridCell gridCell = columnElement as GridCell;

                         

                           //Clear the GridCellvalue 

                          if(gridCell!=null)

                            gridCell.ClearValue(GridCell.StyleProperty);

                    }

                }

                   

             }

         }

We have also prepared the sample based on this and please find the sample under the following location,

Sample: http://www.syncfusion.com/downloads/support/directtrac/137081/ze/WpfTestingSample-332175810

Please let us know if you need further assistance.

Thank you,

Jai Ganesh S

[Jai Ganesh S]

Hi Yang,

Please ignore the previous update.

We have analyzed your queries and please find the responses for your queries as below,

Query 1: (Change the single cell style (font color) after its value was changed)

You can achieve this requirement by using CellStyleSelector and CurrentCellValueChanged event in SfDataGrid. In CurrentCellValueChanged you can get the current cell , Row and column index and call the UpdateDataRow method.

Code Snippet [C#]:

public class CellStyleSelector : StyleSelector

    {

        public override Style SelectStyle(object item, DependencyObject container)

        {

            var record = item as BusinessObjects;

            var gridCell = container as GridCell;

            var columnIndex = gridCell.ColumnBase.ColumnIndex;

            if (columnIndex == record.DataIndex)

            {

                //if the cell is clicked first time, DataIndex is stored in ColoredRows collection.

                if (!record.ColoredRows.Contains(record.DataIndex))

                    record.ColoredRows.Add(record.DataIndex);

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

            }

            else

            {

                //check if style already applied to GridCell or not.

                if (record.ColoredRows.Contains(columnIndex))

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

            }

            return base.SelectStyle(item, container);

        }

    }

Code Snippet [C#]:

void datagrid_CurrentCellValueChanged(object sender, CurrentCellValueChangedEventArgs args)

   {

            var grid = sender as SfDataGrid;

            //getting GridCell

            var cell =

                (grid.SelectionController.CurrentCellManager.CurrentCell.Renderer as GridCellRendererBase)

                    .CurrentCellElement;

           

            if (cell != null)

            {

                var vm = cell.DataContext as BusinessObjects;

                //assigned columnindex to the index property in OrderInfo

                vm.DataIndex = args.RowColumnIndex.ColumnIndex;

                //updates the current row index

                grid.UpdateDataRow(args.RowColumnIndex.RowIndex);

            }

    }

We already have a kb to change the selected cell foreground. The kb link as follows:

KB  Link:

http://www.syncfusion.com/kb/4186/how-to-change-the-gridcell-style-at-runtime

Query 2 : Can be reset to default style by a button.

You can reset the style by getting the GridCell and clear the GridCell style,

Code snippet[C#]:

private void Button_Click(object sender, RoutedEventArgs e)

        {

            DataRowBase dataRow = null;

            List<DataColumnBase> visibleColumns = null;

            foreach (var item in datagrid.GetRowGenerator().Items)

            {

                 //Get datarow

               dataRow = item as DataRowBase;

                //Get visible columns

                visibleColumns = dataRow.GetType().GetProperty("VisibleColumns", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(dataRow) as List<DataColumnBase>;

                foreach (var column1 in visibleColumns)

                {

                   FrameworkElement columnElement = column1.GetType().GetField("ColumnElement", BindingFlags.NonPublic | BindingFlags.Instance).GetValue(column1) as FrameworkElement;

                   if (!(columnElement is GridRowHeaderCell))

                    {

                        //Get the GridCell

                        GridCell gridCell = columnElement as GridCell;

                         

                           //Clear the GridCellvalue 

                        if (gridCell != null)

                        {

                            var vm = gridCell.DataContext as BusinessObjects;

                            gridCell.ClearValue(GridCell.StyleProperty);

                            vm.ColoredRows.Clear();

                            vm.DataIndex = -1;

                        }                    }

                }

                   

             }

         }

We have also prepared the sample based on this and please find the sample under the following location,

Sample: http://www.syncfusion.com/downloads/support/directtrac/135742/ze/WpfTestingSample-2005012766

Please let us know if you need further assistance.

Thank you,

Jai Ganesh S