Using Xamarin.Forms.DataGrid how to make the first column of a table fixed on horizontal scroll. Xamarin

useruE1Q 0
Viewed 55

I'm using Xamarin.Forms.DataGrid and now I would like to make the first column of a table fixed on horizontal scroll. Please see image.

Any ideas on how to achieve this?

IMAGE

<dg:DataGrid ItemsSource="{Binding Details}"  SelectionEnabled="True" SelectedItem="{Binding SelectedProfesstional}" RowHeight="70" HeaderHeight="50" 
                                BorderColor="#CCCCCC"  HeaderBackground="#E0E6F8" PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}" ActiveRowColor="#8899AA">
    <x:Arguments>
        <ListViewCachingStrategy>RetainElement</ListViewCachingStrategy>
    </x:Arguments>
    <dg:DataGrid.HeaderFontSize>
        <OnIdiom x:TypeArguments="x:Double">
            <OnIdiom.Tablet>15</OnIdiom.Tablet>
            <OnIdiom.Phone>12</OnIdiom.Phone>
        </OnIdiom>
    </dg:DataGrid.HeaderFontSize>
    <dg:DataGrid.Columns>
       
        <dg:DataGridColumn PropertyName="Name" Width="3*" >
            <dg:DataGridColumn.FormattedTitle>
                <FormattedString>
                    <Span Text="User Name" FontSize="13" TextColor="Black" FontAttributes="Bold" />
                </FormattedString>
                
            </dg:DataGridColumn.FormattedTitle>
        </dg:DataGridColumn>
        <dg:DataGridColumn Title="User Email" PropertyName="Email" Width="2*"/>
        <dg:DataGridColumn Title="User Phone" PropertyName="Number" Width="1*"/>

    </dg:DataGrid.Columns>

    <dg:DataGrid.RowsBackgroundColorPalette>
        <dg:PaletteCollection>
            <Color>#F2F2F2</Color>
            <Color>#FFFFFF</Color>
        </dg:PaletteCollection>
    </dg:DataGrid.RowsBackgroundColorPalette>
</dg:DataGrid>
datagrid xamarin xamarin.forms c#
1 Answers

There are many approaches to achieve the fixed column when scrolling horizontally.

Approach 1:

Per this thread, you could use the open source: Zumero DataGrid. It supports scrolling, both horizontal and vertical, optional top frozen header row, optional left frozen column and so on.

Approach 2:

Based on this thread, you could add a ScrollView out of the DataGrid and set the Orientation="Both" like below:

    <ScrollView Orientation="Both">
    <dg:DataGrid ItemsSource="{Binding Teams}" SelectionEnabled="True" SelectedItem="{Binding SelectedTeam}"
                     RowHeight="70" HeaderHeight="50" BorderColor="#CCCCCC" HeaderBackground="#E0E6F8"
                     PullToRefreshCommand="{Binding RefreshCommand}" IsRefreshing="{Binding IsRefreshing}"
                    WidthRequest="600" 
                     ActiveRowColor="#8899AA">
Alexandar May - MSFT0
Related