Fixed header row

[Christian Campos]

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?

[Karthikraja Kalaimani]

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;  }

 

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

 

 

 

We hope this helps, please let us know if need further assistance from us.

Regards, 

Karthik Raja 

[Christian Campos]

Thank you so much!

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

[Balasubramani Sundaram]

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. 

 

UG Link: https://help.syncfusion.com/xamarin/datagrid/stacked-headers 

  

Regards, 

Balasubramani Sundaram