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. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. sfDataGrid header and footer

sfDataGrid header and footer

SfListView has a Header and Footer. I would like to know if sfDataGrid can have a similar implementation ? thank you

14 Replies
DS Divakar Subramaniam Syncfusion Team February 3, 2017 06:09 AM UTC

Hi Emil, 
 
 
Thank for contacting Syncfusion Support. 
 
 
SfDataGrid already provides support for Header(header row) which will be created by default whenever you load SfDataGrid. Please refer the sample provided in the below UG link. 
 
 
 
However, we do not have support for Footer row. We have already considered this as a feature request and will be available in any of our upcoming releases. 
 
 
Please check our website periodically to know the features that are implemented.  
 
 
 
Regards, 
Divakar. 
 


KG K Guptha February 4, 2017 12:14 AM UTC

@Divakar

a. Is it possible to hide the header row ?
b. is it possible to create a below grid with SfDataGrid ?
ex: 

_____________________________
EmpID      : 007
Full Name : Bond
Pay per Hr : Rs. 5
Hours        : 40
............
and so
c. How can we create a datagrid with editable cells. I mean, customized cells. Where I would like to enter/edit the values in cells.


DS Divakar Subramaniam Syncfusion Team February 4, 2017 07:24 AM UTC

Hi Kumar, 
 
 
A.) In SfDataGrid, you can able to hide the header row by setting the SfDataGrid.HeaderRowHeight property as 0. Please refer the below code snippet. 
 
    <sfGrid:SfDataGrid x:Name="dataGrid" 
                       AutoGenerateColumns="False" 
                       ColumnSizer="Star" 
                       HeaderRowHeight="0"> 
 
 
B.) Yes. It is possible to create a grid which you mentioned in your update in SfDataGrid using GridTemplateColumn. 
 
 
We have attached a working sample for your reference and you can download the same from the below link. 
 
 
 
C.) If you mean the editing feature, then currently we are implementing it in our SfDataGrid and the same will be available from our upcoming 2017 Volume 1 main release which is scheduled to be rolled out by mid of this month. 
 
 
Please let us know if you need any other assistance from us. 
 
 
Regards, 
Divakar. 
 


KG K Guptha February 6, 2017 09:20 PM UTC

is it possible to edit the grid cell values ?

DS Divakar Subramaniam Syncfusion Team February 7, 2017 04:14 AM UTC

Hi Kumar, 
 
At present, SfDataGrid does not have editing support. However, as we mentioned on our earlier update, we are currently implementing Editing feature in our SfDataGrid and the feature will be available from our upcoming 2017 Volume 1 main release which is scheduled to be rolled out by mid of this month. 
 
Regards, 
Divakar. 


EM Emil March 1, 2017 05:23 PM UTC

Hi Divakar,

my datagrid looks like as below


Thread ID:

Created:

Updated:

Platform:

Replies:

128939Feb 16,2017 08:12 PMFeb 19,2017 11:32 PMXamarin.Forms4
Tags: SfDataGrid
Emil
Asked On February 16, 2017 08:12 PM

Is it possible to remove column and Row lines using customlayout?  

Emil
Replied On February 16, 2017 08:37 PM

here is how my datagrid looks like, Is it possible to have a custom header if I want to stacklayout with 2 labels inside for example or it can only take Text as column name?

<sfgrid:SfDataGrid ScrollingMode="PixelLine"
                          x:Name="dataGrid"
                          IsEnabled="True"
                          AutoGenerateColumns="False"
                          AllowSorting="True"
                          AllowDraggingColumn="False"
                          AllowDraggingRow="True"
                          ColumnSizer="Star"
                          RowHeight="80"
                          MaxSwipeOffset="180"
                          AllowSwiping="True"
                          GridTapped="dataGrid_GridTapped"
                          SelectionMode="Single"   ItemsSource="{Binding  OrdersInfo}"
                          SelectedItem="{Binding SelectedItem}">
          <sfgrid:SfDataGrid.HeaderRowHeight>
            <OnPlatform Android="40"
                                  WinPhone="50"
                                  iOS="40"
                                  x:TypeArguments="x:Double" />
          </sfgrid:SfDataGrid.HeaderRowHeight>
          <sfgrid:SfDataGrid.Columns x:TypeArguments="sfgrid:Columns">


            <sfgrid:GridTemplateColumn HeaderFontAttribute="Bold"
                                   HeaderText="Customer Name"
                                   MappingName="FirstName">
              <sfgrid:GridTemplateColumn.HeaderCellTextSize>
                <OnIdiom Phone="12"
                         Tablet="15"
                         x:TypeArguments="x:Double" />
              </sfgrid:GridTemplateColumn.HeaderCellTextSize>
              <sfgrid:GridTemplateColumn.CellTemplate>
                <DataTemplate>
                  <Frame  OutlineColor="Silver" HasShadow="True" Margin="10,5" Padding="1">
                    <Grid ColumnSpacing="5" RowSpacing="5"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  InputTransparent="True">
                      <Grid.ColumnDefinitions>
                        <ColumnDefinition Width="0.5*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                        <ColumnDefinition Width="*"></ColumnDefinition>
                      </Grid.ColumnDefinitions>
                      <Grid.RowDefinitions>
                        <RowDefinition Height="*"></RowDefinition>
                        <RowDefinition Height="*"></RowDefinition>
                      </Grid.RowDefinitions>
                      
                      <Label   Margin="5,0" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" LineBreakMode="WordWrap" Text="test3" Style="{StaticResource NameStyle}"/>
                      <Label   Grid.Row="1" Grid.Column="1"  Text="test1" Style="{StaticResource lblStyle}"/>
                      <Label   Grid.Row="1" Grid.Column="2"  Text="test2" Style="{StaticResource lblStyle}"/>
                    </Grid>
                  </Frame>
                </DataTemplate>
              </sfgrid:GridTemplateColumn.CellTemplate>
            </sfgrid:GridTemplateColumn>

          </sfgrid:SfDataGrid.Columns> 

     
        </sfgrid:SfDataGrid>

VP Vimal Prabhu Manohkaran Syncfusion Team March 2, 2017 12:19 PM UTC

Hi Emil,

Thanks for contacting Syncfusion support.

Your requirement to remove column and row lines can be done by writing a custom GridStyle to the SfDataGrid where you can return the GridLinesVisibility as GridLinesVisibility.None. Please refer the following UG link for more information.

UG Link : https://help.syncfusion.com/xamarin/sfdatagrid/styles#border-customization

In case you want a border around the grid, place the grid inside a Frame.

Your requirement of loading multiple labels for Header can be achieved by writing a HeaderTemplate. Please refer the following UG link for more information.

UG Link : https://help.syncfusion.com/xamarin/sfdatagrid/column-types#headertemplate

We have provided a sample based on your requirements where we have loaded a grid without borders and loaded header template.

Sample Link :  http://www.syncfusion.com/downloads/support/forum/128653/ze/Sample1792546815

Regards,
Vimal Prabhu 


EM Emil March 2, 2017 11:10 PM UTC

Hi Vimal,

your sample is fine but I cant figure it out how to achieve    sfgrid:GridTemplateColumn.HeaderTemplate    using sfgrid:GridTemplateColumn . please see how I tried to implement but this code is crashing instantly. Please help me based on example below.

thanks,

Emil



          <sfgrid:SfDataGrid ScrollingMode="PixelLine"
                            x:Name="dataGrid"
                            IsEnabled="True"
                            AutoGenerateColumns="False"
                            AllowSorting="True"
                            AllowDraggingColumn="False"
                            AllowDraggingRow="True"
                            ColumnSizer="Star"
                            RowHeight="80"
                            MaxSwipeOffset="180"
                            AllowSwiping="True"
                            GridTapped="dataGrid_GridTapped"
                            SelectionMode="Single"   ItemsSource="{Binding  OrdersInfo}"
                            SelectedItem="{Binding SelectedItem}">
            <sfgrid:SfDataGrid.HeaderRowHeight>
              <OnPlatform Android="40"
                                    WinPhone="50"
                                    iOS="40"
                                    x:TypeArguments="x:Double" />
            </sfgrid:SfDataGrid.HeaderRowHeight>
            <sfgrid:SfDataGrid.Columns x:TypeArguments="sfgrid:Columns">


              <sfgrid:GridTemplateColumn >
                <!--<sfgrid:GridTemplateColumn.HeaderCellTextSize>
                  <OnIdiom Phone="12"
                           Tablet="15"
                           x:TypeArguments="x:Double" />
                </sfgrid:GridTemplateColumn.HeaderCellTextSize>-->
                            <sfgrid:GridTemplateColumn.HeaderTemplate>

                                <DataTemplate>
                                    <Label Text="test" />
                                </DataTemplate>
                            </sfgrid:GridTemplateColumn.HeaderTemplate>
                            <sfgrid:GridTemplateColumn.CellTemplate>
                  <DataTemplate>
                    <Frame  OutlineColor="Silver" HasShadow="True" Margin="10,5" Padding="1">
                      <Grid ColumnSpacing="5" RowSpacing="5"   HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand"  InputTransparent="True">
                        <Grid.ColumnDefinitions>
                          <ColumnDefinition Width="0.5*"></ColumnDefinition>
                          <ColumnDefinition Width="*"></ColumnDefinition>
                          <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Grid.RowDefinitions>
                          <RowDefinition Height="*"></RowDefinition>
                          <RowDefinition Height="*"></RowDefinition>
                        </Grid.RowDefinitions>
                        <Image Grid.Row="0" Grid.Column="0" Grid.RowSpan="2" HorizontalOptions="Center" VerticalOptions="Center"  WidthRequest="36" HeightRequest="36" Source="imgNotAvailable.png"  />
                        <Label   Margin="5,0" Grid.Row="0" Grid.Column="1" Grid.ColumnSpan="2" LineBreakMode="WordWrap" Text="test3" Style="{StaticResource NameStyle}"/>
                        <Label   Grid.Row="1" Grid.Column="1"  Text="test1" Style="{StaticResource lblStyle}"/>
                        <Label   Grid.Row="1" Grid.Column="2"  Text="test2" Style="{StaticResource lblStyle}"/>
                      </Grid>
                    </Frame>
                  </DataTemplate>
                </sfgrid:GridTemplateColumn.CellTemplate>
              </sfgrid:GridTemplateColumn>

            </sfgrid:SfDataGrid.Columns>

            <sfgrid:SfDataGrid.LeftSwipeTemplate>
              <DataTemplate>

                <Grid BackgroundColor="#009EDA">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                  </Grid.ColumnDefinitions>
                  <Image Grid.Column="0"
                         BackgroundColor="Transparent"
                         BindingContextChanged="leftImage_BindingContextChanged"
                         HorizontalOptions="Fill"
                         Source="editicon.png" />
                  <Label Grid.Column="1"
                         BackgroundColor="Transparent"
                         LineBreakMode="NoWrap"
                         Text="EDIT"
                         TextColor="White"
                         HorizontalTextAlignment="Start"
                         VerticalTextAlignment="Center" />
                </Grid>

              </DataTemplate>
            </sfgrid:SfDataGrid.LeftSwipeTemplate>

            <sfgrid:SfDataGrid.RightSwipeTemplate>
              <DataTemplate>

                <Grid BackgroundColor="#DC595F">
                  <Grid.ColumnDefinitions>
                    <ColumnDefinition />
                    <ColumnDefinition />
                  </Grid.ColumnDefinitions>
                  <Image Grid.Column="0"
                         BackgroundColor="Transparent"
                         BindingContextChanged="rightImage_BindingContextChanged"
                         HorizontalOptions="Fill"
                         Source="Trashimage.png" />
                  <Label Grid.Column="1"
                         BackgroundColor="Transparent"
                         LineBreakMode="NoWrap"
                         Text="DELETE"
                         TextColor="White"
                         HorizontalTextAlignment="Start"
                         VerticalTextAlignment="Center" />
                </Grid>

              </DataTemplate>
            </sfgrid:SfDataGrid.RightSwipeTemplate>
          </sfgrid:SfDataGrid>


VP Vimal Prabhu Manohkaran Syncfusion Team March 3, 2017 06:00 AM UTC

Hi Emil,

Thanks for the update. We have analyzed your query. You have almost done everything right, but have missed out on setting the GridTemplateColumn.MappingName property to an underlying property of the collection which is set as ItemsSource. MappingName property cannot be null for a column, since columns are created only if proper MappingName exists. Please refer the below UG link for more information.

UG Link : https://help.syncfusion.com/xamarin/sfdatagrid/column-types#mappingname 


 
<syncfusion:GridTemplateColumn MappingName="CustomerID"> 
  <syncfusion:GridTemplateColumn.CellTemplate> 
   <DataTemplate>  
    <Label Text="{Binding CustomerID}" TextColor="Black"  XAlign="Center" YAlign="Center" />  
   </DataTemplate>  
  </syncfusion:GridTemplateColumn.CellTemplate> 
</syncfusion:GridTemplateColumn> 


Regards,
Vimal Prabhu 


EM Emil May 9, 2017 12:18 PM UTC

Hello,

latest update 15.2.0.40 doesnt work anymore using HeaderRowHeight="0"
What has been changed? can you please advise? I have no single code change and i just upgraded to this version and header appears although it is set to 0

thanks,

Emil


PS Pavithra  Sivakumar Syncfusion Team May 10, 2017 12:38 PM UTC

Hi Emil, 
 
We have conformed that the reported defect is an issue and we are currently working on it.  
 
A support incident to track the status of this defect has been created under your account. Please log on to our support website to check for further updates 
    
 
Regards, 
Pavithra S 


EM Emil July 10, 2017 05:10 PM UTC

I am coming back to my original question. I cannot figure out how to implement something like that below on sfdatagrid

in sflistview there is HeaderTemplate but i cant find similar,  i tried RowHeaderTemplate as shown below but it didnt display at all.

  <sfListView:SfListView.HeaderTemplate>

                        <DataTemplate>

                            <Grid ColumnSpacing="5" RowSpacing="5"  HorizontalOptions="FillAndExpand" BackgroundColor="White">

                                <Grid.ColumnDefinitions>

                                    <ColumnDefinition Width="*"></ColumnDefinition>

                                    <ColumnDefinition Width="*"></ColumnDefinition>

                                    <ColumnDefinition Width="*"></ColumnDefinition>

                                    <ColumnDefinition Width="*"></ColumnDefinition>

                                </Grid.ColumnDefinitions>

                                <Grid.RowDefinitions>

                                    <RowDefinition Height="Auto"></RowDefinition>

                                    <RowDefinition Height="20"></RowDefinition>

                                    <RowDefinition Height="30"></RowDefinition>

                                    <RowDefinition Height="150"></RowDefinition>

                                </Grid.RowDefinitions>

                            

                            </Grid>

                        </DataTemplate>

                    </sfListView:SfListView.HeaderTemplate>


is this not supposed to be like below


          <sfgrid:SfDataGrid.RowHeaderTemplate>

                        <DataTemplate>

                            <Label Text="test" />

                        </DataTemplate>                        

                    </sfgrid:SfDataGrid.RowHeaderTemplate>



EM Emil July 10, 2017 05:17 PM UTC

above works using ShowRowHeader="True" but this is not what i expected or asked. 

Basically I am looking for header for sfDataGrid like sfListView header. Not for rows or columns.


AN Ashok N Syncfusion Team July 12, 2017 07:10 AM UTC

Hi Emil, 
 
Thanks for your update. 
 
We have checked your query and if you having only one GridColumn then you can set your own custom header template with help of SfDataGrid.RowHeaderTemplate. 
 
If  you have more than one GridColumn, you can set your own custom header template by loading your own custom View above the SfDataGrid and you need to set SfDataGrid.HeaderRowHeight is 0. We have prepared the simple sample based on your requirement and attached the sample in the below location, please refer it. If your requirement was differ from this, please share screenshot or more details regarding your requirement, that would be helpful for proceed further. 
 
 
Regards, 
Ashok 


Loader.
Up arrow icon