Change the color and boldness of part of cell text

[Marcelo Camarate]

Hi,

I need to change the color and boldness of part of cell text, as shown below (initial red and bold):

I use model view to build the sfDataGrid content, as shown in the code snippet below:

XAML:

            <sfGrid:SfDataGrid x:Name="dataGrid" ItemsSource="{Binding RestoreSteps}"

                               SelectionMode="None" BackgroundColor="Transparent" AutoGenerateColumns="True" >
                <sfGrid:SfDataGrid.Columns>
                    <sfGrid:GridTemplateColumn MappingName="Description" Width="220">
                        <sfGrid:GridTemplateColumn.CellTemplate>
                            <DataTemplate>
                                <Label Text = "{Binding Description}" TextColor="#003399" FontSize="12"
                                       HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" />
                            </DataTemplate>
                        </sfGrid:GridTemplateColumn.CellTemplate>
                    </sfGrid:GridTemplateColumn>
                    <sfGrid:GridImageColumn MappingName="ImageStatus" Width="32" >
                    </sfGrid:GridImageColumn>
                    <sfGrid:GridTextColumn MappingName="ProgressPercentual" TextAlignment="End" Width="35" CellTextSize="12" />
                    <sfGrid:GridTextColumn MappingName="InitialDate" TextAlignment="Start" Width="1" IsHidden="True" />
                    <sfGrid:GridTextColumn MappingName="EndDate" TextAlignment="Start" Width="100" CellTextSize="12" />
                </sfGrid:SfDataGrid.Columns>
            </sfGrid:SfDataGrid>

C#

            Step = new RestoreStep();

            Step.Descricao = "First Step: Search checked Fields";
            Step.PercentualProgresso = null;
            Step.DataFim = null;
            RestoreSteps.Add(Step);


            Step = new RestorePasso();
            Step.Descricao = "Second Step: Change selected Fields";
            Step.PercentualProgresso = null;
            Step.DataFim = null;
            RestoreSteps.Add(Step);


​How can I do this?

Thanks in advance,

Marcelo Camarate

[Suja Venkatesan]

Hi Marcelo,

We would like to let you know that SfDataGrid does not have direct support to customize the part of cell value. Currently, we are checking the possibility to achieve your requirement in sample level. We will update you with further details on or before October 20, 2022. We appreciate your patience until then.

Regards,

Suja

[Suja Venkatesan]

Hi Marcelo,

Regarding your requirement “Change the color and boldness of part of cell text” ,

As we mentioned in our previous update SfDataGrid does not have direct support to customize the part of cell value. You achieve your requirement by setting customising the binded values of the label using FormattedString and binding it to the label FormattedText,  as like below code snippet.

Code Snippet:

[XAML]

    <ContentPage.Resources>

        <local:Customstyle x:Key="customstyle" />

        <local:CellStyleConverter x:Key="cellStyleConverter" />

    </ContentPage.Resources>

    <sfgrid:SfDataGrid x:Name="dataGrid"

                       GridStyle="{StaticResource customstyle}"

                       AutoGenerateColumns="False"

                       ItemsSource="{Binding OrdersInfo}">

        <sfgrid:SfDataGrid.Columns>

            <sfgrid:GridTemplateColumn MappingName="Description" Width="220">

                <sfgrid:GridTemplateColumn.CellTemplate>

                    <DataTemplate>

                        <Label FormattedText = "{Binding Description,Converter={StaticResource cellStyleConverter}}" FontSize="12"

                                       HorizontalOptions="StartAndExpand" VerticalOptions="StartAndExpand" />

                    </DataTemplate>

                </sfgrid:GridTemplateColumn.CellTemplate>

            </sfgrid:GridTemplateColumn>

            <sfgrid:GridTextColumn MappingName="OrderID" />

[C#]

    public class CellStyleConverter : IValueConverter

    {

        public object Convert(object value, Type targetType, object parameter, CultureInfo culture)

        {

            if (value != null)

            {

                var val = value as string;

                string[] words = val.Split(':');

                var formattedString = new FormattedString();

                formattedString.Spans.Add(new Span { Text = words[0] +" : ", ForegroundColor = Color.Red, FontAttributes = FontAttributes.Bold });

                var span = new Span { Text = words[1],ForegroundColor=Color.Blue };

                formattedString.Spans.Add(span);

                return formattedString as FormattedString;

            }

            return null;

        }

        public object ConvertBack(object value, Type targetType, object parameter, CultureInfo culture)

        {

            return null;

        }

    }

Please refer more about the formatted text of label in the below link.

Reference link: https://learn.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/text/label#formatted-text

We have attached a runnable sample based on your requirement for your reference. You can customize the sample as per your wish. Please let us know if you need any further assistance.

Regards,

Suja

Attachment: DataGridXamarin_58980aca.zip