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

Brian Schwartz

Asked On February 5, 2019 02:39 PM UTC

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">

<Grid

ColumnSpacing="0"

HorizontalOptions="FillAndExpand"

VerticalOptions="StartAndExpand">

<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>

</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

Reply | Reply with quote

Pradeep Kumar Balakrishnan [Syncfusion]

Replied On 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

Reply | Reply with quote

Subburaj Pandian Veluchamy [Syncfusion]

Replied On 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.

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

Reply | Reply with quote

Brian Schwartz

Replied On 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

Reply | Reply with quote

Brian Schwartz

Replied On 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!

Reply | Reply with quote

Subburaj Pandian Veluchamy [Syncfusion]

Replied On 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

Reply | Reply with quote

Thread ID:	Created:	Updated:	Platform:	Replies:
142468	Feb 5,2019 02:39 PM UTC	Feb 14,2019 09:05 AM UTC	Xamarin.Forms	5

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US