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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to customize the header text of a grid column with different colors?

Platform: Xamarin.Forms |
Control: SfDataGrid |
Published Date: February 28, 2017 |
Last Revised Date: February 28, 2017

SfDataGrid allows you customize the header text of a grid column with different colors using the SfDataGrid.HeaderTemplate. You can load two labels inside a StackLayout with horizontal orientation and customize the text color of the Labels to achieve the requirement.

 

The below code example illustrates how to customize the header text of a grid column with different colors using the GridColumn.HeaderTemplate.

<sfGrid:SfDataGrid x:Name ="dataGrid"

                         ColumnSizer="Star"

                         AutoGenerateColumns="False"

                         ItemsSource="{Binding OrdersInfo}">

 <sfGrid:SfDataGrid.Columns>

     <sfGrid:GridTextColumn MappingName="OrderID">

       <sfGrid:GridTextColumn.HeaderTemplate>

           <DataTemplate>

             <StackLayout Orientation="Horizontal" HorizontalOptions="Center" VerticalOptions="Center">

                <Label Text="Order" TextColor="Purple" />

                <Label Text="ID" TextColor="Blue" />

             </StackLayout>

           </DataTemplate>

     </sfGrid:GridTextColumn.HeaderTemplate>

    </sfGrid:GridTextColumn>

   <sfGrid:GridTextColumn MappingName="CustomerID"/>

    <sfGrid:GridTextColumn MappingName="Freight"/>

    <sfGrid:GridTextColumn MappingName="Country"/>

  </sfGrid:SfDataGrid.Columns>

</sfGrid:SfDataGrid>

 

On executing the above code example, the below output is obtained.

C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCacheContent.Word\Screenshot_2017-02-28-16-52-58.png

Sample Link

How to customize the header text with different colors?
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon