How to bind different ItemsSources to each row of the ComboBox in WinRT DataGrid?

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

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