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: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Fixed header row

Thread ID:

Created:

Updated:

Platform:

Replies:

148554 Oct 24,2019 02:06 PM UTC Oct 28,2019 10:34 AM UTC Xamarin.Forms 3
loading
Tags: SfDataGrid
Christian Campos
Asked On October 24, 2019 02:09 PM UTC

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 [Syncfusion]
Replied On 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 


Christian Campos
Replied On 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.

Balasubramani Sundaram [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

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

Live Chat Icon For mobile
Live Chat Icon