We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. Xamarin.Forms
  4. Change MappingName on event to sort by a different property displayed in GridTemplateColumn

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

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

5 Replies
PK Pradeep Kumar Balakrishnan Syncfusion Team February 6, 2019 01:25 PM UTC

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 
 


SP Subburaj Pandian Veluchamy Syncfusion Team February 8, 2019 12:27 PM UTC

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. 
  
  
Also refer the following UG link to know more information about Custom Sorting. 
  
We hope that this will helps you, kindly revert us if you have any concern.  
  
Regards,
Subburaj Pandian V  


BS Brian Schwartz February 13, 2019 06:19 PM UTC

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

BS Brian Schwartz February 13, 2019 07:45 PM UTC

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!

SP Subburaj Pandian Veluchamy Syncfusion Team February 14, 2019 09:05 AM UTC

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  


Loader.
Up arrow icon