How to sort the GridColumns programmatically using a picker?

1 min read

You can sort a GridColumn based on the user option by selecting an option in the Picker by handling the SelectionIndexChanged event of the Picker. Sorting can be performed based on the Selected Index from the picker by modifying the SfDataGrid.SortColumnDescriptions collection.

Refer the below code example to add the columns to be sorted in a Picker.

<Picker     x:Name="SelectionPicker"
                 Title="Choose"
                 HorizontalOptions="Start"
                 SelectedIndexChanged="OnSelectionChanged"
                 WidthRequest="150">
 
          < Picker.Items>
            <x:String>OrderID</x:String>
            <x:String>EmployeeID</x:String>
            <x:String>CustomerID</x:String>
            <x:String>FirstName</x:String>
            <x:String>ShipCity</x:String>
            <x:String>ShipCountry</x:String>
          </ Picker.Items>
 
</ Picker >

The below code illustrates how to apply sorting in SfDataGrid based on the selection index change in a picker.

public void OnSelectionChanged(object sender, EventArgs e)
{
   if (SelectionPicker.SelectedIndex == 0)
   {
       this.dataGrid.SortColumnDescriptions.Clear();
       this.dataGrid.SortColumnDescriptions.Add(new SortColumnDescription() { ColumnName = "OrderID" });
   }
   else if (SelectionPicker.SelectedIndex == 1)
   {
        this.dataGrid.SortColumnDescriptions.Clear();
        this.dataGrid.SortColumnDescriptions.Add(new SortColumnDescription() { ColumnName = "EmployeeID" });
   }
   else if (SelectionPicker.SelectedIndex == 2)
   {
        this.dataGrid.SortColumnDescriptions.Clear();
        this.dataGrid.SortColumnDescriptions.Add(new SortColumnDescription() { ColumnName = "CustomerID" });
   }
   else if (SelectionPicker.SelectedIndex == 3)
   {
         this.dataGrid.SortColumnDescriptions.Clear();
         this.dataGrid.SortColumnDescriptions.Add(new SortColumnDescription() { ColumnName = "FirstName" });
   }
   else if (SelectionPicker.SelectedIndex == 4)
   {
         this.dataGrid.SortColumnDescriptions.Clear();
         this.dataGrid.SortColumnDescriptions.Add(new SortColumnDescription() { ColumnName = "ShipCity" });
   }
   else if (SelectionPicker.SelectedIndex == 5)
   {
         this.dataGrid.SortColumnDescriptions.Clear();
         this.dataGrid.SortColumnDescriptions.Add(new SortColumnDescription() { ColumnName = "ShipCountry" });
   }
 
 
}

Screenshot:

$C:\Users\pavithra.sivakumar\AppData\Local\Microsoft\Windows\INetCacheContent.Word\selection.png$