DataGrid header and cell customisation

Question

There are a few features I'm looking to implement with SfDataGrid in UWP that I'm struggling to implement.

Embed the filter button in the header row in a custom header template, instead of having it floating in front of the header template
Embed the sort button in the header row in a custom header template, instead of having it floating in front of the header template
Turn off text wrapping in grid cells
Include an 'id' number (integer) for each entry in the datagrid in the row headers i.e. so these numbers also get filtered/sorted with the rest of the data.
Include a checkbox in the row header that sets a boolean property on each item in the datagrid.

Is it possible to achieve any of these?

Thanks in advance!

Mohanram Anbukkarasu · Accepted Answer

Hi Simon, 

Thanks for the update.  

You can resolve this problem by setting ColumnSizer as GridLengthUnitType.SizeToHeader and adjusting the header padding to avoid overlapping of the filter and sort icons with the text by creating custom GridColumnSizer as shown in the following code example.  

Code example :  





public class GridColumnSizerExt : GridColumnSizer 
 { 
     public GridColumnSizerExt(SfDataGrid dataGrid) : base(dataGrid) 
     { 
 
     } 
 
     //Calculate Width for the column when ColumnSizer is SizeToHeader 
     protected override double CalculateHeaderWidth(GridColumn column, bool setWidth = true) 
     { 
         var padding = 30; 
         return base.CalculateHeaderWidth(column, setWidth) + padding; 
     } 
 } 

We have prepared a simple sample with header template and it is available in the following link for your reference.  

Sample link : https://www.syncfusion.com/downloads/support/forum/160835/ze/UWP_-_DataGrid956006708  

Please let us know if you require further assistance from us.  

Regards, 
Mohanram A.

Mohanram Anbukkarasu · Answer

Hi Simon,

Thanks for contacting Syncfusion support.

Query

Response

Embed the filter button in the header row in a custom header template, instead of having it floating in front of the header template

Embed the sort button in the header row in a custom header template, instead of having it floating in front of the header template

We are little unclear with these queries. The appearance of sort and filter icons can be customized by editing the style of GridHeaderCellControl.

UG reference : https://help.syncfusion.com/uwp/datagrid/styles-and-templates#styling-sort-icon

Please revert to us with more details about your requirement with image illustration if we have misunderstood your requirement.

Turn off text wrapping in grid cells

You can achieve this by setting the TextWrapping property of the columns to NoWrap.

UG reference : https://help.syncfusion.com/uwp/datagrid/column-types#gridtextcolumnbase-properties

Include an 'id' number (integer) for each entry in the datagrid in the row headers i.e. so these numbers also get filtered/sorted with the rest of the data.

You can display the row index values in the row header cells by customizing the style for GridRowHeaderCell as given in the following help documentation.

UG reference : https://help.syncfusion.com/uwp/datagrid/styles-and-templates#displaying-row-index-in-row-header-cell

But it is not possible to consider filtering and sorting for the row headers. Data operations like filtering, sorting and grouping will be performed based on the mapping name of the columns. So that, it cannot be considered for row headers. There should be a property for the corresponding column in Model class to perform data operations.

Include a checkbox in the row header that sets a boolean property on each item in the datagrid.

You can achieve this by customizing the style for GridRowHeaderCell as shown in the following code example.

Code example :

<Page.Resources>

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

<Setter.Value>

<Border x:Name="PART_RowHeaderCellBorder"

BorderBrush="{TemplateBinding BorderBrush}"

BorderThickness="{TemplateBinding BorderThickness}">

<Grid>

<CheckBox

IsChecked="{Binding RowIndex, Mode=TwoWay,

RelativeSource={RelativeSource TemplatedParent},

Converter={StaticResource RowIndexToCheckStateConverter}}"/>

</Grid>

</Border>

</ControlTemplate>

</Setter.Value>

</Setter>

</Style>

</Page.Resources>

Sample link : https://www.syncfusion.com/downloads/support/forum/160835/ze/UWP_-_DataGrid179941603

Regards,

Mohanram A.

Simon · Answer

Hi Mohanram, thanks for your reply.Thanks for the link for the third query-this worked well.Based on your answer to the second last query, I've worked around the last two queries by creating new columns to act as header rows and turning off the 'normal' row header.For the first two queries, I'm not trying to change the filter and sort icon style, but where and how the icons appear.I've modified the column header data template to have other information, however the filter icon appears on top of this. This isn't a problem when the column is wide:But when the column is narrow the other content in the header is covered up:I'm looking to be able to place the filter and sort buttons where I want them in the header template (or in another header row beneath).Kind regards,Simon

Mohanram Anbukkarasu · Answer

Hi Simon,  

Thanks for the update.   

We are currently validating this. We will check and update with further details on December 29,  2020. We appreciate your patience until then.   

Regards,  
Mohanram A.

Simon · Answer

Thanks Mohanram.I'm also finding I can't left click anything in the header without triggering the column to sort-but perhaps the solution to the other issue will fix that too.

Dhanasekar Mohanraj · Answer

Hi Simons, 

Sorry for the inconvenience caused. 

We are still working on this we will check and update with further details on January 04, 2021. 

We appreciate your patience until then.  

Regards,Dhanasekar Mohanraj.

Simon · Answer

Hi Dhanasekar,any update on this please?Thanks,Simon

Mohanram Anbukkarasu · Answer

Hi Simon, 

Sorry for the inconvenience caused.  

From the provided details and screenshots, we suspect that you have used header template to add addition information to the header. If your requirement is to have additional information on the header cell of the columns, you can achieve this without using header template by directly using GridColumn.HeaderText property as shown in the following code example.  

Code example :  





// By using mapping name of the column. 
this.dataGrid.Columns["DepthNumeric"].HeaderText = "DataSet1 Depth Numeric"; 
 
//OR 
 
// By using index of the column. 
this.dataGrid.Columns[1].HeaderText = "DataSet1 Depth Numeric"; 

Please revert to us with details, if this doesn'r resolve the reported problem. 

Regards, 
Mohanram A.

Simon · Answer

Hi Mohanram,You're correct that I've modified the header template. However the other items I've added are comboboxes (but without borders), so unfortunately I cannot just add to the header text. This would also not prevent the sort and filter buttons from overlapping them.Is it possible to trigger the sorting and filter dialogues from custom buttons that I can add to my template? I could then just switch the built in ones off with a style setter.Kind regards,Simon

Simon · Answer

Hi Mohanram,Unfortunately editing the padding/margins used by the column or header template just moves things sideways or makes the columns wider.I have achieved something what I'm after by adding the comboboxes to an unbound row beneath the header, allowing me to use the full widths of the cells in this row.Kind regards,Simon

Mohanram Anbukkarasu · Answer

Hi Simon, 

Thanks for the update. 

We are glad to know that you have resolved the problem in your end. Please let us know if you require any other assistance from us.  

Regards, 
Mohanram A.