Sort icon padding

[Milos Kajtez]

Is it possible to add padding to sort icon?

Is there a way to customize icon position? Currently it's all the way right and it doesn't look good if I add custom style to datagrid

[Karthikraja Kalaimani]

Hi Milos,

Yes you can customise the sort icon by writing custom header cell renderer. Please refer to the below code snippets and attached sample.

Code snippets :

dataGrid.CellRenderers.Remove("HeaderView");
dataGrid.CellRenderers.Add("HeaderView", new HeaderCellRenderer());
....
public class HeaderCellRenderer : GridHeaderCellRenderer

{

public override void OnInitializeDisplayView(DataColumnBase dataColumn, ContentView view)

{

base.OnInitializeDisplayView(dataColumn, view);

if (this.DataGrid.SortColumnDescriptions.Count > 0 && this.DataGrid.SortColumnDescriptions.FirstOrDefault(x => x.ColumnName.Equals(dataColumn.GridColumn.MappingName)) != null)

{

((view as BorderView).Content as Grid).ColumnSpacing = 20;

}

}

}

Sample link : https://www.syncfusion.com/downloads/support/directtrac/general/ze/DataGridSample-270324501.zip

Regards,
Karthik Raja

[Josh Phan]

Hello, I tried the way you showed but it didn't work. The sort arrow is still far to the right. Look like the LayoutOptions is set to FillAndExpand. Could you please help? Thank you.

[Suja Venkatesan]

Hi Josh,

You can customize the sort icon position by setting LayoutOption with value CenterAndExpand and ColumnSpacing with value based on your requirements as like below code snippets.

Code snippets:

public MainPage()

{

   InitializeComponent();

   this.dataGrid.GridStyle = new Dark();

   dataGrid.CellRenderers.Remove("HeaderView");

   dataGrid.CellRenderers.Add("HeaderView", new HeaderCellRenderer());

}

 

public class HeaderCellRenderer : GridHeaderCellRenderer

{

  public override void OnInitializeDisplayView(DataColumnBase dataColumn, ContentView view)

  {

    base.OnInitializeDisplayView(dataColumn, view);

   ((view as BorderView).Content as Grid).ColumnSpacing = 20;

   ((view as BorderView).Content as Grid).HorizontalOptions = LayoutOptions.CenterAndExpand;

  }

}

Output:

We have attached a sample for your reference. If we misunderstood your requirements, please revert to us with exact requirement details. It will be more helpful for us to provide timely solutions.

Regards,

Suja

Attachment: DataGridSample_1d287e01.zip