Articles in this section
Category / Section

How to bind different Items sources to each row of the ComboBox by using GridTemplateColumn in UWP DataGrid?

4 mins read

In the SfDataGrid, by default the ComboBox is loaded while editing the cell values of the GridComboBoxColumn. It lists out the initially populated values that are bound to the ItemsSource property of the GridComboBoxColumn. The same ItemsSource is loaded to each cell of the GridComboBoxColumn. Since the ItemsSource is a single instance of the GridComboBoxColumn, you cannot load different ItemsSources to each cell while editing it.

To overcome this, you can use the GridTemplateColumn to create your own cell types. By specifying the CellTemplate and EditTemplate, you can customize the content in both displays and edit with the GridTemplateColumn. You can load any control in both Cell Template and Edit Template of the GridTemplateColumn.

Similarly, you can load the ComboBox in EditTemplate of the GridTemplateColumn and it creates a new ComboBox instance while editing the GridCell. Here, you can bind different ItemsSources to each row of the ComboBox as illustrated in following code example.

XAML

<syncfusion:GridTemplateColumn MappingName="ShipCity" 
                               HeaderText="Ship City List" 
                               syncfusion:FocusManagerHelper.WantsKeyInput="True">
    <!--TextBlock loaded in Display mode-->
    <syncfusion:GridTemplateColumn.CellTemplate>
        <DataTemplate>
            <TextBlock Text="{Binding ShipCity}" />
        </DataTemplate>
    </syncfusion:GridTemplateColumn.CellTemplate>
    <!--ComboBox loaded in Edit mode-->
    <syncfusion:GridTemplateColumn.EditTemplate>
        <DataTemplate>
            <ComboBox SelectedItem="{Binding ShipCity}"  
                      ItemsSource="{Binding CountryName, Converter={StaticResource converter}}"/>
        </DataTemplate>
    </syncfusion:GridTemplateColumn.EditTemplate>
</syncfusion:GridTemplateColumn>

The ItemsSource for each row of the ComboBox is set based on the Country Name with the help of converter as illustrated in the following code example.

C#

public class ItemsSourceConverter:IValueConverter
{
    ShipCityDetailsRepository ShipCity = new ShipCityDetailsRepository();
    public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        string[] shipcities=null;
        // Checks whether the ShipCity dictionary key contains the country that is received from the value parameter.
        if (ShipCity.ContainsKey(value.ToString()))
        {
            //When the key matches, it returns the corresponding shipcities.
            ShipCity.TryGetValue(value.ToString(), out shipcities);
            return shipcities;
        }           
        return null;
    }
    public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
    {
        throw new NotImplementedException();
    }
}

The following screenshot illustrates the different ShipCity ItemsSources bound to each row of the ComboBox based on the Country Name in the GridTemplateColumn.

ShipCity list of Argentina in SfDataGrid

Figure 1: ShipCity list of Argentina

ShipCity list of Brazil in SfDataGrid

Figure 2: Ship city list of Brazil

Sample Links:

WPF

WinRT

UWP

Conclusion

I hope you enjoyed learning about how to bind different Items sources to each row of the ComboBox by using GridTemplateColumn in the DataGrid.

You can refer to our UWP DataGrid feature tour page to know about its other groundbreaking feature representations. You can also explore our UWP DataGrid documentation to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forumsDirect-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied