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

how to customize the sfdatagrid in Xamarin.Forms ?

Hi, just started using sfdatagrid.
I want to display row headers instead of column headers. is it possible with sfdatagrid ? I'm trying to get the Header names for data on leftmost column. like as below :

Name: John  selena .......and so
Dept:   IT     IT        ........
Age:   29      26        ..........
City:   LA    Nyc     ............
State: CA    NY       ............
M/F:  M      F          ............


<sfgrid: SfDataGrid.RowHeaderTemplate>
   <sfgrid:GridTextRow MappingName="Names" />
   <sfgrid:GridTextRow MappingName="Age"/>
</sfgrid: SfDataGrid.RowHeaderTemplate>

I tried like this, but it threw an error SfDataGrid>RowHeaderTemplare not found. Can you please help me with this.
Is there any sample like this. If yes, please provide me the sample, Thank you.

5 Replies

DS Divakar Subramaniam Syncfusion Team February 7, 2017 06:51 AM UTC

Hi Kumar, 
 
 
Thanks for contacting Syncfuion Support. 
 
 
In SfDataGrid, it is possible to show the RowHeader by setting SfDataGrid.ShowRowHeader property as “True”. Also, you can able to hide the HeaderRow by setting SfDataGrid.HeaderRowHeight as 0. 
 
    <sfGrid:SfDataGrid x:Name="dataGrid" 
                       AutoGenerateColumns="False" 
                       HeaderRowHeight="0" 
                       ShowRowHeader="True"> 
 
 
Also, you can show the first column as ColumnHeader like column using RowHeaderTemplate. We have prepared a simple sample for your reference and you can download the same from the below link. 
 
 
 
Regards, 
Divakar. 
 



KG K Guptha February 7, 2017 06:48 PM UTC

Thanks for your rapid response,
it's working perfectly, but how can I give add the TextFields (TextBoxes) in grid cells, where I want to edit all the details of Dept, Age, City, State and Gender. Is possible ?


DS Divakar Subramaniam Syncfusion Team February 8, 2017 04:23 AM UTC

Hi Kumar, 
 
 
If you need to load textbox(here Entry) inside a grid cell, then it is possible by using GridTemplateColumn. Please refer the below code snippet. 
 
<sfGrid:SfDataGrid.Columns> 
 
    <sfGrid:GridTemplateColumn MappingName="Column1"> 
        <sfGrid:GridTemplateColumn.CellTemplate> 
            <DataTemplate> 
                <Entry Text="{Binding Column1}" TextColor="Black" /> 
            </DataTemplate> 
        </sfGrid:GridTemplateColumn.CellTemplate> 
    </sfGrid:GridTemplateColumn> 
 
</sfGrid:SfDataGrid.Columns> 
  
 
Also, we have attached a modified sample and you can download the same from the below link. 
 
 
 
In the above case, we have just loaded an Entry inide a GridCell. However, if you need editing support in SfDataGrid, then it is not possible at present. We have already implemented the editing feature in 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. 
 
 
Regards, 
Divakar. 
 



KG K Guptha February 8, 2017 09:07 PM UTC

<sfGrid:SfDataGrid.Columns> 
    <sfGrid:GridTemplateColumn MappingName="Column1"> 
        <sfGrid:GridTemplateColumn.CellTemplate> 
            <DataTemplate> 
                <Entry Text="{Binding Column1}" TextColor="Black" /> 
            </DataTemplate> 
        </sfGrid:GridTemplateColumn.CellTemplate> 
    </sfGrid:GridTemplateColumn> 
</sfGrid:SfDataGrid.Columns>
with this code snippet we can achieve Entry inside a grid cell of Column1. But how can we get Entry inside each cell of some particular rows not in column cells ?
And Is there any GridTemplate.Row, <GridTemplateRow > as <GridTemplateColumn > ?



DB Dinesh Babu Yadav Syncfusion Team February 9, 2017 01:32 PM UTC

Hi Kumar, 
 
Sorry for the inconvenience caused. 
 
You cannot able to achieve your requirement “Displaying the row headers instead of column headers“ using SfDataGrid. However we have tried to achieve your requirement by using SfListView by changing the Orientation as “Horizontal”. In the sample, Entry and Label is arranged in row wise to meet the requirements. Please find the sample link below. 
 
 
Please let us know if you require further assistance. 
 
Regards, 
Dinesh Babu Yadav 


Loader.
Up arrow icon