how to customize the sfdatagrid in Xamarin.Forms ?

[K Guptha]

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.

[Divakar Subramaniam]

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. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/128698/ze/DataGridDemo-750477401  

 

 

Regards, 

Divakar. 

 

[K Guptha]

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 ?

[Divakar Subramaniam]

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. 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/128698/ze/DataGridDemo-1654503195  

 

 

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. 

 

[K Guptha]

<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 > ?

[Dinesh Babu Yadav]

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. 

 

Sample: http://www.syncfusion.com/downloads/support/forum/128698/ze/ListViewSample-289722567   

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav