Move the viewing page to particular group

[Jos Nguyen]

I have the SfDataGrid view with the grouping already as shown in the picture.

However, I want that grouping is working as the functionality to help the user to go directly to the place where the group's items are displayed, especially for the long list grid.

Like when I tap the blue-circled group, the group list would appear, and tap again in one group I would be brought to its place.

[Suja Venkatesan]

Hi Jos,

We are unclear about your requirement. We suspect you need to move the tapped group to the start position; if so, then you achieve your requirement by programmatic scrolling SfDataGrid.ScrollToRow method. Please refer our user guidelines documentation regarding programmatic scrolling in the below link.

UG link: https://help.syncfusion.com/xamarin/datagrid/scrolling#programmatic-scrolling

If we have misunderstood your requirement, please revert to us with as much detail as possible, including any illustrations to proceed further on this. It will be more helpful for us to provide the timely solution on our end.

Regards,

Suja

[Jos Nguyen]

I made a mistake the I posted this again.

Thank you Suja for responding.

I got the idea of how it works as the All App list of Windows 11.

The items are grouped according to the Aphabet. (Fig. 1)

When we click group A, the List of Groups would appear as shown in Fig. 2

then go ahead click group name W, the listview will go the listitems of group W (Fig. 3)

Is there is posibility to do it with the grouping of the SfDataGrid,

Thank you.

Demostration from All App (Start of Windows 11)

[Suja Venkatesan]

Hi Jos,

You can achieve your "Tapping on the indexed letter (group key) which displays the whole group list, when tapping the group key in the list and scrolling to the respective group (GroupHeaderItem)" requirement  by passing the group key index in the ScrollRowIndex method, as like in the below code snippet.

Code snippet:

XAML

   <StackLayout>

   <!--Creates panel to shows the group key as indexed vertically. ListView which displays whole list group key-->      

 <listview:SfListView x:Name="IndexPanelList"

                             IsVisible="False"

                             SelectionBackgroundColor="Transparent"

                    ItemsSource="{Binding GroupInfo}"

                    ItemSize="50">

            <listview:SfListView.ItemTemplate>

                <DataTemplate>

                    <!--TextColor converter for representing respective group is available in SfDataGrid-->

                    <StackLayout>

                        <Label Text="{Binding GroupName}" TextColor="{Binding .,Converter={StaticResource colorconverter},ConverterParameter={x:Reference Name=dataGrid}}"  FontAttributes="Bold"  FontSize="21">

                            <Label.GestureRecognizers>

                                <TapGestureRecognizer Tapped="TapGestureRecognizer_Tapped" />

                            </Label.GestureRecognizers>

                        </Label>

                    </StackLayout>

                </DataTemplate>

            </listview:SfListView.ItemTemplate>

            <listview:SfListView.LayoutManager>

                <listview:GridLayout SpanCount="4" />

            </listview:SfListView.LayoutManager>

        </listview:SfListView>

        <syncfusion:SfDataGrid x:Name="dataGrid" IsVisible="True" ColumnSizer="Star"

                    EnableDataVirtualization="False"

                    AutoGenerateColumns ="False"

                    HeaderRowHeight="52"

                    SelectionMode="Single"

                    AllowEditing="True"

                    NavigationMode="Cell"

                    GroupCaptionTextFormat="{}{Key}"

                    GridTapped="dataGrid_GridTapped"

                    ItemsSource="{Binding OrdersInfo}"

                    EditTapAction="OnTap">

            <syncfusion:SfDataGrid.Columns>

 

                <syncfusion:GridTextColumn HeaderText="Customer ID"

                                   MappingName="CustomerID" />

                <syncfusion:GridTextColumn HeaderText="Customer" MappingName="FirstName"  />

                <syncfusion:GridTextColumn HeaderText="Ship Country"

                                   MappingName="ShipCountry" />

                <syncfusion:GridTextColumn HeaderText="OrderID"

                                   MappingName="OrderID" />

                <syncfusion:GridTextColumn HeaderText="AcitivityCategory"

                                   MappingName="ActivityCategory" />

                <syncfusion:GridTextColumn HeaderText="Month"

                                   MappingName="Month" />

 

            </syncfusion:SfDataGrid.Columns>

 

        </syncfusion:SfDataGrid>

    </StackLayout>

C#

public DataGridPage()

        {

            InitializeComponent();

            //Define GroupColumnDescriptions  with column name CustomerID based on firstletter of CustomerID

            dataGrid.GroupColumnDescriptions.Add(new GroupColumnDescription()

            {

                ColumnName = "CustomerID",

                KeySelector = (string ColumnName, object obj1) =>

                {

                    var item = (obj1 as OrderInfo);

                    return item.CustomerID[0].ToString();

                }

            });

        }

 

 

        private void dataGrid_GridTapped(object sender, GridTappedEventArgs e)

        {

            if (e.RowData.GetType().Name == "Group")

            {

                // Whole list isvisible property is set as true once GroupHeaderItem of SfDataGrid is tapped.

                IndexPanelList.IsVisible = true;

                dataGrid.IsVisible = false;

            }

 

        }

        private void TapGestureRecognizer_Tapped(object sender, EventArgs e)

        {

           

            var items = dataGrid.View.Groups.ToList<Syncfusion.Data.Group>().OrderBy(o => o.Key);

            Group grp = items.ElementAt(0);

            bool showalert = false;

            for (int i = 0; i < dataGrid.View.Groups.Count; i++)

            {

                Group group = items.ElementAt(i);

                string text = (sender as Label).Text;

                if (group.Key == null)

                {

                    App.Current.MainPage.DisplayAlert("Message", "Group not available", "ok");

                }

                if ((group.Key != null && group.Key.Equals(text)))

                {

                    //Scrolled to Respective group selected in Whole group list

                    dataGrid.ScrollToRowIndex(dataGrid.ResolveStartIndexOfGroup(group), true, ScrollToPosition.Start);

                    IndexPanelList.IsVisible = false;

                    dataGrid.IsVisible = true;

                    showalert = false;

                    break;

                }

                else if ((group.Key != null && !group.Key.Equals(text)))

                {

                    showalert = true;

                }

            }

            if (showalert == true)

            App.Current.MainPage.DisplayAlert("Message", "Group not available", "ok");

        }

    }

We have attached a runnable sample based on your requirement and attached it here for your reference. Please have a look at this sample and let us know if you have any concern on it.

Regards,

Suja

Attachment: Group_alaphabetically_e723537b.zip

[Jos Nguyen]

Thank you for exerting effort in helping me. It really helpful to me. I solve the issue.

Thank you again

[Suja Venkatesan]

Hi Jos,

We are glad to know that the provided solution worked at your end. Please let us know if you need any other assistance.

Regards,

Suja