sfDataGrid header and footer

[Emil]

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

[Divakar Subramaniam]

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. 

 

UG link: https://help.syncfusion.com/xamarin/sfdatagrid/getting-started  

 

 

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]

@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]

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. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/128653/ze/DataGridDemo-1057638077  

 

 

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]

is it possible to edit the grid cell values ?

[Divakar Subramaniam]

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]

Hi Divakar,

my datagrid looks like as below

Thread ID:	Created:	Updated:	Platform:	Replies:
128939	Feb 16,2017 08:12 PM	Feb 19,2017 11:32 PM	Xamarin.Forms	4

Tags: SfDataGrid

Emil

Asked On February 16, 2017 08:12 PM

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

Reply   |   Reply with quote

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]

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]

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]

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]

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]

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 

    

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

 

Regards, 

Pavithra S 

[Emil]

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]

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]

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. 

 

Sample location: http://www.syncfusion.com/downloads/support/forum/128653/ze/XamarinForms1421353605  

 

Regards, 

Ashok