We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Change the color and boldness of part of cell text

Hi,

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

Grid.jpg

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


2 Replies

SV Suja Venkatesan Syncfusion Team October 19, 2022 10:33 AM

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



SV Suja Venkatesan Syncfusion Team October 21, 2022 08:12 AM

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

Loader.
Live Chat Icon For mobile
Up arrow icon