Display Symbols in DataGrid Cells

[Sachith]

Hi Team,

I have implemented a syncfusion DataGrid.

Now I want to show symbols (ex:▲ ● ◼ ◭) in some Cells in my DataGrid.

Additionally, I have unicodes for these symbols.

How can I achieve this?

Best Regards,

Sachith Priyashantha.

[Tamilarasan Paranthaman]

Hi Sachith,

To display icons within the cells, you can create a custom DisplayBinding ​Converter specifically for the intended column. This converter will enable you to return the icon code to be displayed in the cells based on the cell value. Alternatively, you may utilize the DataGridTemplateColumn for the corresponding column to achieve the same effect.

For your convenience, we have provided a simple sample that demonstrates both approaches - the Display Binding Converter and the implementation using DataGridTemplateColumn. Please refer to the following code snippet and sample for a more detailed understanding.

xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:MauiApp1"

             xmlns:dataGrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"

             x:Class="MauiApp1.MainPage">

    <ContentPage.BindingContext>

        <local:OrderInfoRepository x:Name="viewModel"/>

    </ContentPage.BindingContext>

    <ContentPage.Resources>

        <local:CustomValueConverter x:Key="CustomValueConverter" />

        <Style TargetType="dataGrid:DataGridCell" x:Key="DataGridSelectedCellStyle">

            <Setter Property="BackgroundColor" Value="Honeydew"/>

            <Setter Property="TextAlignment" Value="Center"/>

            <Setter Property="FontSize" Value="15"/>

            <Setter Property="FontFamily" Value="FontAwesome"/>

        </Style>

    </ContentPage.Resources>

    <dataGrid:SfDataGrid x:Name="dataGrid"

                         SelectionMode="SingleDeselect"

                         ColumnWidthMode="Auto"

                         ItemsSource="{Binding OrderInfoCollection}">

        <dataGrid:SfDataGrid.Columns>

            <dataGrid:DataGridTemplateColumn HeaderText="Price"

                                             HeaderTextAlignment="Center"

                                             MappingName="Price">

                <dataGrid:DataGridTemplateColumn.CellTemplate>

                    <DataTemplate>

                        <Grid Margin="15,0,0,0">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*"/>

                                <ColumnDefinition Width="*"/>

                            </Grid.ColumnDefinitions>

                            <Label Text="{Binding Price}"

                                   HorizontalOptions="Center"

                                   Grid.Column="0"

                                   VerticalOptions="Center"/>

                            <Label Text="{Binding Symbol, Converter={x:StaticResource CustomValueConverter}}"

                                   HorizontalOptions="Start"

                                   VerticalOptions="Center"

                                   Grid.Column="1"/>

                            </Grid>

                    </DataTemplate>

                </dataGrid:DataGridTemplateColumn.CellTemplate>

            </dataGrid:DataGridTemplateColumn>

            <dataGrid:DataGridTextColumn HeaderText="Symbol"

                                         HeaderTextAlignment="Center"

                                         MappingName="Symbol"

                                         CellStyle="{StaticResource DataGridSelectedCellStyle}"

                                         DisplayBinding="{Binding Symbol, Converter={x:StaticResource CustomValueConverter}}"/>

        </dataGrid:SfDataGrid.Columns>

    </dataGrid:SfDataGrid>

</ContentPage>

Regards,

Tamilarasan

Attachment: Sample_6b328eb2.zip

[Sachith]

Hi Team,

This works!

I want to change the color of these icons and customize them.

Is it Possible?

Best Regards,

Sachith Priyashantha.

[Tamilarasan Paranthaman]

Sachith Priyashantha,

You can customize the icon color directly within the `DataGridTemplateColumn` property. When setting the icon within a `Label` in the `DataGridTemplateColumn.CellTemplate`, adjust the color by setting the desired value in the `Label.TextColor` property. For `DataGridTextColumn`, utilize the `TextColor` property within the `DataGridCell` to set the desired text color. Please refer to the code snippet below for detailed guidance on implementing these adjustments.

<?xml version="1.0" encoding="utf-8" ?>

<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"

             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

             xmlns:local="clr-namespace:MauiApp1"

             xmlns:dataGrid="clr-namespace:Syncfusion.Maui.DataGrid;assembly=Syncfusion.Maui.DataGrid"

             x:Class="MauiApp1.MainPage">

    <ContentPage.BindingContext>

        <local:OrderInfoRepository x:Name="viewModel"/>

    </ContentPage.BindingContext>

    <ContentPage.Resources>

        <local:CustomValueConverter x:Key="CustomValueConverter" />

        <Style TargetType="dataGrid:DataGridCell" x:Key="DataGridSelectedCellStyle">

            <Setter Property="BackgroundColor" Value="Honeydew"/>

            <Setter Property="TextAlignment" Value="Center"/>

            <Setter Property="FontSize" Value="15"/>

            <Setter Property="TextColor" Value="DeepSkyBlue"/>

            <Setter Property="FontFamily" Value="FontAwesome"/>

        </Style>

    </ContentPage.Resources>

 

    <dataGrid:SfDataGrid x:Name="dataGrid"

                         ColumnWidthMode="Auto"

                         ItemsSource="{Binding OrderInfoCollection}">

        <dataGrid:SfDataGrid.Columns>

            <dataGrid:DataGridTemplateColumn HeaderText="Price"

                                             HeaderTextAlignment="Center"

                                             MappingName="Price">

 

                <dataGrid:DataGridTemplateColumn.CellTemplate>

                    <DataTemplate>

                        <Grid Margin="15,0,0,0">

                            <Grid.ColumnDefinitions>

                                <ColumnDefinition Width="*"/>

                                <ColumnDefinition Width="*"/>

                            </Grid.ColumnDefinitions>

                            <Label Text="{Binding Price}"

                                   HorizontalOptions="Center"

                                   Grid.Column="0"

                                   VerticalOptions="Center"/>

                            <Label Text="{Binding Symbol, Converter={x:StaticResource CustomValueConverter}}"

                                   HorizontalOptions="Start"

                                   TextColor="Red"

                                   VerticalOptions="Center"

                                   Grid.Column="1"/>

                            </Grid>

                    </DataTemplate>

                </dataGrid:DataGridTemplateColumn.CellTemplate>

            </dataGrid:DataGridTemplateColumn>

            <dataGrid:DataGridTextColumn HeaderText="Symbol"

                                         HeaderTextAlignment="Center"

                                         MappingName="Symbol"

                                         CellStyle="{StaticResource DataGridSelectedCellStyle}"

                                         DisplayBinding="{Binding Symbol, Converter={x:StaticResource CustomValueConverter}}"/>

        </dataGrid:SfDataGrid.Columns>

    </dataGrid:SfDataGrid>

 

</ContentPage>