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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to change GroupCaptionText based on the Display member of the GridComboboxColumn?

Platform: WinRT |
Control: SfDataGrid

While grouping the GridComboBoxColumn, the Group key displayed in the GroupCaptionText is based on the SelectedValuePath instead of the DisplayMemberPath of the GridComboBoxColumn. In the following code example, GridComboBoxColumn is defined with the DisplayMemberPath and SelectedValuePath.

XAML

<syncfusion:SfDataGrid.Columns>
       <syncfusion:GridComboBoxColumn  
                                    MappingName="Country"
                                    ItemsSource="{Binding Companies,
                                                Source={StaticResource employeeinfocollection}}" 
                                    DisplayMemberPath=" CountryName "
                                    SelectedValuePath="CountryCode"
                                    HeaderText="Country" >
       </syncfusion:GridComboBoxColumn>
</syncfusion:SfDataGrid.Columns>

The following is the ViewModel class with ItemsSource for the GridComboBoxColumn.

C#

public class EmployeeInfoCollection
{       
        private ObservableCollection<CompanyItem> companies;
        public ObservableCollection<CompanyItem> Companies
        {
            get{ return companies; }
            set{ companies = value; }
        }
        public EmployeeInfoCollection()
        {
            companies = new ObservableCollection<CompanyItem>()
            {
            new CompanyItem() { CountryCode = "NR", CountryName = "NAURU" },
            new CompanyItem() { CountryCode = "NP", CountryName = "NEPAL" },
            new CompanyItem() { CountryCode = "NL", CountryName = "NETHERLANDS" },
            new CompanyItem() { CountryCode = "NZ", CountryName = "NEW ZEALAND" },
            new CompanyItem() { CountryCode = "NI", CountryName = "NICARAGUA" },
            new CompanyItem() { CountryCode = "NE", CountryName = "NIGER" },
            new CompanyItem() { CountryCode = "NG", CountryName = "NIGERIA" },
            new CompanyItem() { CountryCode = "NU", CountryName = "NIUE" }  
      };
    }
}

In the following screenshot, the GroupKey displays the actual value instead of the display value of the column.

SfdataGrid_with_GroupKey

Figure 1: SfDataGrid with GroupKey displaying the actual value

It is possible to display the GroupKey based on the DisplayMemberPath in the GroupCaptionText by setting the GroupColumnDescription.Converter property that converts the actual value based on the DisplayMemberPath. GridComboBoxColumn is passed as the Converter parameter, and the underlying record bound with the row is passed as the value for the converter. Refer to the following code example for customizing the GroupColumnDescription with the Converter defined.

XAML

< Page.Resources >
        <local:GroupcaptionConverter x:Key="groupcaptionconverter"/>
        <local:EmployeeInfoCollection x:Key="employeeinfocollection"/>
</ Page.Resources > 
<syncfusion:SfDataGrid x:Name="datagrid" AllowEditing="True"
                        DataContext="{Binding Source={StaticResource employeeinfocollection}}"
                        AutoGenerateColumns="False"
                        ShowGroupDropArea="True"
                        ItemsSource="{Binding Path=EmpCollection}" >
    <syncfusion:SfDataGrid.Columns>
        <syncfusion:GridTextColumn MappingName="Gender" />
        <syncfusion:GridComboBoxColumn  
                            MappingName="CountryCode"
                            ItemsSource="{Binding Companies,
                                        Source={StaticResource employeeinfocollection}}" 
                            DisplayMemberPath="CountryName"
                            SelectedValuePath="CountryCode"
                            HeaderText="Country">
        </syncfusion:GridComboBoxColumn>
    </syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>

The following is the Converter that returns the GroupKey based on the DisplayMemberPath by using the value, Record, and the parameter, Column, passed.

C#

public class GroupcaptionConverter : IValueConverter
    {
        public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
        if (!(parameter is GridComboBoxColumn))
                return value;
            var column = parameter as GridComboBoxColumn;
            var record = value as EmployeeInfo;
            foreach (var item in column.ItemsSource)
            {
                if (record.CountryCode == (item as CompanyItem).CountryCode)
                    return (item as CompanyItem).CountryName;
            }
            return null; 
        }
        public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
        {
            throw new NotImplementedException();
        }
    }

The following screenshot shows the GroupKey changed based on the DisplayMemberPath.

C:\Users\mahendrana\Desktop\GroupKey-WinRt1new1.png

Figure 2: GroupKey changed

When you group at runtime by dragging and dropping the column into the GroupDropArea, you can set the Converter by handling SfDataGrid.View.GroupDescriptions.CollectionChanged as shown in the following code example.

C#

this.datagrid.GroupColumnDescriptions.CollectionChanged += GroupColumnDescriptions_CollectionChanged;
void GroupColumnDescriptions_CollectionChanged(object sender, System.Collections.Specialized.NotifyCollectionChangedEventArgs e)
{
            if (e.Action == NotifyCollectionChangedAction.Add)
            {
                var group = e.NewItems[0] as GroupColumnDescription;
                if (group.ColumnName == "CountryCode")
                    group.Converter = new GroupcaptionConverter();
            }
}

 

Note:

The following code example explains how to change the GroupKey in GroupCaptionText based on DisplayMember of MultiColumnDropDownList.

 

XAML

<syncfusion:SfDataGrid.Columns>
    <syncfusion:GridMultiColumnDropDownList AutoGenerateColumns="True"      
                   DisplayMember="CountryName"                                                        
                   MappingName="CountryCode" ItemsSource="{Binding Path=Companies,
                   Source={StaticResource employeeinfocollection}}" 
                   ValueMember="CountryCode">
    </syncfusion:GridMultiColumnDropDownList>
</syncfusion:SfDataGrid.Columns>

C#, Converter class

public class GroupcaptionConverter1 : IValueConverter
{
    public object Convert(object value, Type targetType, object parameter, string language)
    {
        if (!(parameter is GridMultiColumnDropDownList))
            return value;
        var column = parameter as GridMultiColumnDropDownList;
        var record = value as EmployeeInfo;
        var itemsSource = column.ItemsSource as ObservableCollection<CompanyItem>;
        foreach (var item in itemsSource)
        {
            if (record.CountryCode == (item as CompanyItem).CountryCode)
                return (item as CompanyItem).CountryName;
        }
        return null;
    }
    public object ConvertBack(object value, Type targetType, object parameter, string language)
    {
        throw new NotImplementedException();
    }
}

 

Sample Links:

WRT

UWP

ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Up arrow icon

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile