Change MappingName on event to sort by a different property displayed in GridTemplateColumn

[Brian Schwartz]

The desired outcome is that the user can successfully change the sorting mapping name to "ShortName" or "BullCode" with a button click or grid interaction on that column, and that the user can then sort ascending or descending with that new mapping.

TemplateColumn:

       <datagrid:GridTemplateColumn

                    HeaderText="{shared:Translate Bulls}"

                    MappingName="ShortName"

                    MinimumWidth="140"

                    ColumnSizer="Auto"

                    AllowSorting="True"

                    HeaderCellTextSize="{StaticResource SmallCaptionFontSize}"

                    CellTemplate="{StaticResource BullListTemplateSmall}" />

            </datagrid:SfDataGrid.Columns>

Template being used:

<DataTemplate

                x:Key="BullListTemplateSmall">

                <ViewCell>

                    <Grid

                        ColumnSpacing="0"

                        HorizontalOptions="FillAndExpand"

                        VerticalOptions="StartAndExpand">

                        <!--BackgroundColor="{StaticResource AppColorWhite}"-->

                        <Grid.ColumnDefinitions>

                            <ColumnDefinition

                                Width="Auto" />

                            <ColumnDefinition

                                Width="*" />

                        </Grid.ColumnDefinitions>

                        <Grid.RowDefinitions>

                            <RowDefinition

                                Height="Auto" />

                            <RowDefinition

                                Height="*" />

                        </Grid.RowDefinitions>

                        <Label

                            Text="{Binding ShortName}"

                            Style="{StaticResource LabelSubheadingStyle}"

                            VerticalTextAlignment="Center"

                            HorizontalOptions="FillAndExpand"

                            FontSize="{StaticResource SubheadingFontSize}"

                            FontAttributes="Bold"

                            Margin="10,5,5,0"

                            Grid.Column="0"

                            Grid.ColumnSpan="2"

                            Grid.Row="0" />

                        <StackLayout

                            Grid.Row="1"

                            VerticalOptions="Center"

                            Margin="0,0,0,10">

                            <StackLayout

                                Spacing="0"

                                Grid.Row="1"

                                VerticalOptions="Center"

                                HorizontalOptions="Start">

                                <StackLayout

                                    Orientation="Horizontal"

                                    Margin="10, 0, 0, 0"

                                    VerticalOptions="Center">

                                    <Label

                                        Text="{shared:Translate BullCode}"

                                        Style="{StaticResource LabelSubheadingStyle}"

                                        TextColor="{StaticResource AppColorMediumGray}"

                                        FontSize="{StaticResource  CaptionFontSize}"

                                        FontAttributes="Bold"

                                        VerticalTextAlignment="Center" />

                                    <Label

                                        Text="{Binding BullCode}"

                                        Style="{StaticResource LabelSubheadingStyle}"

                                        FontSize="{StaticResource  CaptionFontSize}"

                                        VerticalTextAlignment="Center" />

                                </StackLayout>

                                <StackLayout

                                    Orientation="Horizontal"

                                    Margin="10, 0, 0, 0"

                                    VerticalOptions="Center">

                                    <Label

                                        Text="{shared:Translate RegNo}"

                                        Style="{StaticResource LabelSubheadingStyle}"

                                        TextColor="{StaticResource AppColorMediumGray}"

                                        FontSize="{StaticResource  CaptionFontSize}"

                                        FontAttributes="Bold"

                                        VerticalTextAlignment="Center" />

                                    <Label

                                        Text="{Binding RegistrationNumberWithoutLeadingZeros}"

                                        Style="{StaticResource LabelSubheadingStyle}"

                                        FontSize="{StaticResource  CaptionFontSize}"

                                        VerticalTextAlignment="Center" />

                                </StackLayout>

                            </StackLayout>

                        </StackLayout>

                    </Grid>

                </ViewCell>

            </DataTemplate>

Is this possible using the syncfusion sfDataGrid and GridTemplateColumns?

What is the best way to sort that column by either of those properties found in the template?

Any help is appreciated,

Thanks,

Brian Schwartz

[Pradeep Kumar Balakrishnan]

Hi Brian , 

 

Thank you for contacting Syncfusion support. 

 

Currently we are checking your requirement “How to sort an column based on user selected Mapping name in DataTemplate Column.” we will validate and let you know the details in two business days (February 8, 2019). We appreciate your patience until then. 

 

Regards,  

Pradeep Kumar B 

 

[Subburaj Pandian Veluchamy]

Hi Brian, 

  

Thank you for your patience. 

  

We have checked your requirement “How to sort column based on user selected Mapping name in DataTemplate Column”. You can achieve this requirement by using custom sorting. we have done mapping in button click for your requirement and sorting is performed by tapping the header.  

 

Please refer the following code example for the same, 

  

//Button Click code decided Mapping name. 

  

private void Button_Clicked(object sender, EventArgs e) 

{ 

    dataGrid.SortComparers.Clear(); 

    if (changebtn.Text == "OrderID") 

    { 

        dataGrid.SortComparers.Add(new SortComparer() 

        { 

            PropertyName = "ShipCountry", 

            Comparer = new CustomComparer("ShortName") 

        }); 

        changebtn.Text = "ShortName"; 

    } 

    else 

    { 

        dataGrid.SortComparers.Add(new SortComparer() 

        { 

            PropertyName = "ShipCountry", 

            Comparer = new CustomComparer("OrderID") 

        }); 

        changebtn.Text = "OrderID"; 

    } 

} 

  

Custom Sort Comparer: 

public class CustomComparer : IComparer<Object>, ISortDirection 

{ 

    public string MappingName;  

    public CustomComparer(string mappingName) 

    { 

        MappingName = mappingName; 

    } 

    public int Compare(object x, object y) 

    { 

        //For OrderInfo type data 

        if (MappingName == "OrderID") 

        { 

            int nameX = ((OrderInfo)x).OrderID; 

            int nameY = ((OrderInfo)y).OrderID; 

            

            // Objects are compared and return the SortDirection 

            if ((int)nameX.CompareTo((int)nameY) > 0) 

                return SortDirection == ListSortDirection.Descending ? 1 : -1; 

            else if (nameX.CompareTo(nameY) == -1) 

                return SortDirection == ListSortDirection.Descending ? -1 : 1; 

            else 

                return 0; 

        } 

        else if (MappingName == "ShortName") 

        { 

            string nameX= ((OrderInfo) x).ShortName; 

            string nameY = ((OrderInfo)y).ShortName; 

            

            // Objects are compared and return the SortDirection 

            if (nameX.CompareTo(nameY) > 0) 

                return SortDirection == ListSortDirection.Descending ? 1 : -1; 

            else if (nameX.CompareTo(nameY) == -1) 

                return SortDirection == ListSortDirection.Descending ? -1 : 1; 

            else 

                return 0; 

        } 

        else 

        { 

            return 0; 

        } 

    } 

    //Gets or sets the SortDirection value 

    public ListSortDirection SortDirection { get; set; } 

} 

  

  

We have also prepared the sample for your reference and attached in following link. 

  

Sample Link :  http://www.syncfusion.com/downloads/support/forum/142468/ze/Sample1882734491 

  

Also refer the following UG link to know more information about Custom Sorting. 

https://help.syncfusion.com/xamarin/sfdatagrid/sorting#custom-sorting 

  

We hope that this will helps you, kindly revert us if you have any concern.  

  

Regards,
Subburaj Pandian V  

[Brian Schwartz]

Thank you for this solution!

Is it possible to then sort the grid with the new mapping on that button click, similar to if a user taps on the column header to sort:

example:

1.User taps button

2. mapping name switches (using the code you provided)

3. List is sorted using custom comparer

Thanks,

Brian Schwartz

[Brian Schwartz]

Update:

I was able to find a solution to this by creating a method that adds a sort description at the end of the button click code provided by Syncfusion above:

 public void ChangeSortButton_Clicked()

        {

            sfGrid.SortComparers.Clear();

            if (changeButtonLabel.Text == TranslationHelper.Translate("BullCode"))

            {

                sfGrid.SortComparers.Add(new SortComparer()

                {

                    PropertyName = "ShortName",

                    Comparer = new CustomComparer("ShortName")

                });

                changeButtonLabel.Text = TranslationHelper.Translate("ShortName");

            }

            else

            {

                sfGrid.SortComparers.Add(new SortComparer()

                {

                    PropertyName = "ShortName",

                    Comparer = new CustomComparer("BullCode")

                });

                changeButtonLabel.Text = TranslationHelper.Translate("BullCode");

            }

            SortGrid();

        }

        private void SortGrid()

        {

            sfGrid.SortColumnDescriptions.Add(new SortColumnDescription()

            {

                ColumnName = "ShortName",

                SortDirection = ListSortDirection.Ascending

            });

        }

Thanks for all your help!

[Subburaj Pandian Veluchamy]

Hi Brian, 

 

Thank you for the update. We are happy that you have meet your requirement. 

 

Please let us know, if you require any further assistance.  

  

Regards,
Subburaj Pandian V