1. Home
  2. Forum
  3. Xamarin.Forms
  4. Fixed header row

Fixed header row

Hi, I would like to fix the header row WITHOUT use Stacked Headers in SFDataGrid Xamarin.Forms control, because that row height is so high (2 rows height) and the HeaderRowHeight property has no effect.



I would like to show it like this, but with the fixed header row (single row):


How can I do that?

3 Replies
KK Karthikraja Kalaimani Syncfusion Team October 25, 2019 12:15 PM UTC

Hi Christian,

Thanks for contacting Syncfusion support.

By observing the provided screenshots by you, we have achieved your requirement without using the StackedHeader. We have prepared sample for the same. In that sample we have showcased how the HeaderRow behaves with StackedHeaderRow and without StackedHeaderRow. We have attached the sample for the same.

Please follow the below code example for Without StackedHeader 
 
[XAML] 
<sfGrid:SfDataGrid 
        x:Name="dataGrid"                                
        AutoGenerateColumns="False"            
        ColumnSizer="Star" 
        ItemsSource="{Binding OrderInfoCollection}" 
  <sfGrid:SfDataGrid.Columns> 
  <sfGrid:GridTextColumn MappingName="OrderID" HeaderText="Codigo"></sfGrid:GridTextColumn> 
  <sfGrid:GridTextColumn MappingName="CustomerID" HeaderText="Nombre"></sfGrid:GridTextColumn> 
  </sfGrid:SfDataGrid.Columns> 
</sfGrid:SfDataGrid> 
 
[.CS] 
….. 
dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; 
…... 
private void DataGrid_QueryRowHeight(object sender, Syncfusion.SfDataGrid.XForms.QueryRowHeightEventArgs e) 
{ 
  if (e.RowIndex == 0) 
  { 
     e.Height = 60; 
  } 
  e.Handled = true; 
} 
 
 
 
Please follow the below code example for with StackedHeader 
 
[XAML] 
<sfGrid:SfDataGrid 
 x:Name="dataGrid"                                                                   AutoGenerateColumns="False"            
 ColumnSizer="Star" 
 ItemsSource="{Binding OrderInfoCollection}" HeaderRowHeight="60"> 
                <sfGrid:SfDataGrid.Columns> 
                    <sfGrid:GridTextColumn MappingName="OrderID" HeaderText="Codigo"></sfGrid:GridTextColumn> 
                    <sfGrid:GridTextColumn MappingName="CustomerID" HeaderText="Nombre"></sfGrid:GridTextColumn> 
                </sfGrid:SfDataGrid.Columns> 
                <sfGrid:SfDataGrid.StackedHeaderRows> 
                    <sfGrid:StackedHeaderRow> 
                        <sfGrid:StackedHeaderRow.StackedColumns> 
                            <sfGrid:StackedColumn MappingName="OrderID" ChildColumns="OrderID,CustomerID" Text="Registros encontrados:11"> 
                                
                            </sfGrid:StackedColumn> 
                        </sfGrid:StackedHeaderRow.StackedColumns> 
                    </sfGrid:StackedHeaderRow> 
                </sfGrid:SfDataGrid.StackedHeaderRows> 
            </sfGrid:SfDataGrid> 
[.CS] 
……. 
dataGrid.QueryRowHeight += DataGrid_QueryRowHeight; 
…….. 
private void DataGrid_QueryRowHeight(object sender, Syncfusion.SfDataGrid.XForms.QueryRowHeightEventArgs e) 
 { 
     if (e.RowIndex == 0) 
     { 
        e.Height = 30; 
     } 
     else if(e.RowIndex == 1) 
     { 
        e.Height = 60; 
     } 
     e.Handled = true; 
} 
 
 
 
 
 
We hope this helps, please let us know if need further assistance from us.

Regards, 
Karthik Raja 


CC Christian Campos October 25, 2019 02:18 PM UTC

Thank you so much!

It would be nice if it had a property to freeze all the headers.

BS Balasubramani Sundaram Syncfusion Team October 28, 2019 10:34 AM UTC

Hi Christian 
 
Thanks for your update. 
 
We have checked your query. By default, SfDataGrid have non scrollable header row. So, header does not scroll while scroll the data row. And if we apply the HeaderRowHeight for DataGrid, height is applied to each row in StackedHeader. It is the behavior of DataGrid. 
 
Please refer the below UG link. 
 
  
Regards, 
Balasubramani Sundaram 


Loader.
Up arrow icon