Skip to content

SyncfusionExamples/How-to-show-font-icons-for-checked-and-unchecked-states-for-GridCheckBoxColumn-in-DataGrid

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 

Repository files navigation

How to show font icons for checked and unchecked states for GridCheckBoxColumn in WinUI DataGrid?

In WinUI DataGrid (SfDataGrid), the default GridCheckBoxColumn states can be replaced with a FontIcon by implementing a custom cell renderer (GridCellCustomCheckBoxRenderer). The OnInitializeEditElement method sets the font icon with a helper method (UpdateIcon) selecting a tick or cross glyph and applying green or red foreground colors based on the bounded underlying property value.

The FontIcon’s Tapped event is used in OnEditElementLoaded method to toggle the status value at runtime and immediately update the icon. To prevent event leaks, the handler is detached in both OnEditElementUnloaded and OnUnwireEditUIElement methods.

// Remove the existing Renderer
this.dataGrid.CellRenderers.Remove("CheckBox");

// Add the custom Renderer
this.dataGrid.CellRenderers.Add("CheckBox", new GridCellCheckBoxRendererExt());

//Renderer customization
public class GridCellCheckBoxRendererExt : GridCellCustomCheckBoxRenderer
{
    public GridCellCheckBoxRendererExt()
    {
        this.SupportsRenderOptimization = false;
        this.IsEditable = false;
    }

    public override void OnInitializeEditElement(DataColumnBase dataColumn, FontIcon uiElement, object dataContext)
    {
        var item = dataContext as OrderInfo;
        if (uiElement == null || item == null)
            return;
        UpdateIcon(uiElement, item.Status);
    }

    protected override void OnEditElementLoaded(object sender, RoutedEventArgs e)
    {
        var uiElement = sender as FontIcon;
        if (uiElement == null || uiElement.DataContext == null)
            return;
        uiElement.Tag = uiElement.DataContext;
        uiElement.Tapped += OnTapped;
    }

    private void OnTapped(object sender, TappedRoutedEventArgs e)
    {
        if (sender is FontIcon icon && icon.Tag is OrderInfo item)
        {
            item.Status = !item.Status;
            // Update the icon
            UpdateIcon(icon, item.Status);
        }
    }

    private void UpdateIcon(FontIcon icon, bool isChecked)
    {
        if (isChecked)
        {
            icon.Glyph = "\uE8FB"; // Tick
            icon.Foreground = new SolidColorBrush(Colors.Green);
        }
        else
        {
            icon.Glyph = "\uE711"; // Cross
            icon.Foreground = new SolidColorBrush(Colors.Red);
        }
    }

    protected override void OnEditElementUnloaded(object sender, RoutedEventArgs e)
    {
           var uiElement = sender as FontIcon;
           if (uiElement == null)
             return;
           uiElement.Tapped -= OnTapped;
    }

    protected override void OnUnwireEditUIElement(FontIcon uiElement)
    {
          if (uiElement != null)
             uiElement.Tapped -= OnTapped;
    }
} 

Fonticon for checkbox states

Take a moment to peruse the WinUI DataGrid - custom renderer documentation, to learn more about custom renderer with examples.

About

This demo shows how to show font icons for checked and unchecked states for GridCheckBoxColumn in DataGrid.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 3

  •  
  •  
  •  

Languages