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

sfDataGrid header and footer

Thread ID:

Created:

Updated:

Platform:

Replies:

128653 Feb 3,2017 12:15 AM UTC Jul 12,2017 07:10 AM UTC Xamarin.Forms 14
loading
Tags: SfDataGrid
Emil
Asked On February 3, 2017 12:15 AM UTC

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

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


K Guptha
Replied On 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.


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


K Guptha
Replied On February 6, 2017 09:20 PM UTC

is it possible to edit the grid cell values ?

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


Emil
Replied On 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>

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


Emil
Replied On 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>


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


Emil
Replied On 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


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


Emil
Replied On 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>



Emil
Replied On 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.


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


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.

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

;