Articles in this section
Category / Section

How to change the WinRT Grid Cell style at runtime?

2 mins read

In the SfDataGrid, it is possible to change the GridCell style at run time. You can refer here to know more about the GridCell style customization in the SfDataGrid. Normally, the GridCell can be customized based on the data present in the GridCell by using the CellStyleSelector. You can refer here to know about the StyleSelectors in the SfDataGrid and refer here to customize the GridCell based on the GridCell value.

To change the GridCell style on clicking a cell and also maintain that cell style when you click other cells, use the CurrentCellActivatedEvent along with the CellStyleSelector. In the following code example, on clicking the cell the foreground is changed by using the CellStyleSelector.

As mentioned earlier, the GridCell is customized based on the data. To change the style at runtime, you need two properties, the DataIndex and ColoredRows that are maintained in the model class, DataContext of the GridCell, here OrderInfo.

  • DataIndex - Denotes the column index of the clicked GridCell.
  • ColoredRows - Collection of DataIndex that is used to retain the GridCell style.

The CurrentCellActivated event is fired when you click the cell. By using this event, you can change the style of the GridCell that is clicked. Refer to the following code example.

C#

this.dataGrid.CurrentCellActivated += dataGrid_CurrentCellActivated;
void dataGrid_CurrentCellActivated(object sender, CurrentCellActivatedEventArgs args)
{
    var grid = sender as SfDataGrid;
    //Gets the GridCell.
    var cell = (grid.SelectionController.CurrentCellManager.CurrentCell.Renderer as GridCellRendererBase).CurrentCellElement;
    if (cell != null)
    {
        var vm = cell.DataContext as OrderInfo;                
        //Assigns columnindex to the DataIndex property in OrderInfo.
        vm.DataIndex = args.CurrentRowColumnIndex.ColumnIndex;
        //Updates the current row index.
        grid.UpdateDataRow(args.CurrentRowColumnIndex.RowIndex);
    }
}

In the CurrentCellActivated event, the GridCell is accessed with the help of the CurrentCellElement. From that cell, you can get the datacontext. Here, the datacontext is the underlying Business Object. Then column index of the clicked cell is assigned to the DataIndex. By default, DataIndex is considered as -1 for all the records.

Finally, you need to call the UpdateDataRow method to refresh the specified row and update the style. Refer to the following code example to define the style for the GridCell.

XAML

<Style TargetType="syncfusion:GridCell" x:Key="cellStyle" >
            <Setter Property="Foreground" Value="Red"/>
</Style>

Refer to the following code example to change the GridCell style by using the CellStyleSelector class.

C#

public class CellStyleSelector : StyleSelector
{
    protected override Style SelectStyleCore(object item, DependencyObject container)
    {
        var record = item as OrderInfo;
        var gridCell = container as GridCell;
        var columnIndex = gridCell.ColumnBase.ColumnIndex;
        if (columnIndex == record.DataIndex)
        {
//When the cell is clicked the first time, DataIndex is stored in the ColoredRows collection.
            if (!record.ColoredRows.Contains(record.DataIndex))
                record.ColoredRows.Add(record.DataIndex);
           }
//Checks whether the style is already applied to the GridCell or not.
            if (record.ColoredRows.Contains(columnIndex))
                return App.Current.Resources["cellStyle"] as Style;
        return base.SelectStyleCore(item, container);
    }
}

Here, the CellStyleSelector class is derived from the StyleSelector and overrides the SelectStyleCore method. In the SelectStyleCore method, record is accessed from the argument item and the columnindex of a GridCell is accessed from the argument container. The style returns based on the given conditions. As mentioned above, the DataIndex of the GridCell is changed based on its column index when the cell is clicked. Here, when the columnindex of a GridCell and the DataIndex are the same, then the DataIndex is added to the ColoredRows collection and the customized style is returned to change the foreground of the GridCell. When the columnindex is already present in the ColoredRows collection, then the customized style is returned to retain the foreground of the GridCell. Refer to the following code example to apply the customized style to the GridCell by using the CellStyleSelector.

XAML

<Page.Resources>
        <local:CellStyleSelector x:Key="cellStyleSelector"/>
</Page.Resources>
<syncfusion:SfDataGrid x:Name="dataGrid"
                               ShowRowHeader="True"
                               AutoGenerateColumns="False"
                               CellStyleSelector="{StaticResource cellStyleSelector}"
                               ItemsSource="{Binding Path=OrdersDetails}">

The GridCell foreground has been changed on clicking the GridCell as displayed in the following screenshot.

Figure 1: GridCell Foreground changed to Red on clicking the cell

 

Sample Link:


WRT

WPF

UWP

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied