How to bind different ItemsSources in GridComboBoxColumn of UWP DataGrid (SfDataGrid)?
In UWP DataGrid (SfDataGrid),
you can bind the different ItemsSource to each row of GridComboBoxColumn by
setting ItemsSourceSelector property.
<Window.Resources>
<local:ItemsSourceSelector x:Key="itemSourceSelector" />
</Window.Resources>
<syncfusion:SfDataGrid x:Name="sfdatagrid"
AllowEditing="True"
AutoGenerateColumns="False"
ItemsSource="{Binding OrderDetails}"
ColumnSizer="Star">
<syncfusion:SfDataGrid.Columns>
<syncfusion:GridTextColumn MappingName="OrderID" />
<syncfusion:GridTextColumn MappingName="CustomerID" />
<syncfusion:GridTextColumn MappingName="ProductName" />
<syncfusion:GridTextColumn MappingName="NoOfOrders" />
<syncfusion:GridComboBoxColumn MappingName="ShipCountry"
ItemsSource="{Binding Path=DataContext.CountryList, ElementName=sfdatagrid}" />
<syncfusion:GridComboBoxColumn HeaderText="ShipCity" DisplayMemberPath="ShipCityName"
ItemsSourceSelector="{StaticResource itemSourceSelector }"
MappingName="ShipCityID" SelectedValuePath="ShipCityID" />
</syncfusion:SfDataGrid.Columns>
</syncfusion:SfDataGrid>ItemsSourceSelector needs to implement IItemsSourceSelector interface which requires you to implement GetItemsSource method which receives the below parameters,
- Record – data object associated with row.
- Data Context – data context of data grid.
In the below code, ItemsSource for ShipCity column returned based on ShipCountry column value using the record and data context of data grid passed to GetItemsSource method.
/// <summary
/// Implementation class for ItemsSourceSelector interface
/// </summary>
public class ItemsSourceSelector : IItemsSourceSelector
{
public IEnumerable GetItemsSource(object record, object dataContext)
{
if (record == null)
return null;
var orderinfo = record as OrderDetails;
var countryName = orderinfo.ShipCountry;
var viewModel = dataContext as ViewModel;
//Returns ShipCity collection based on ShipCountry.
if (viewModel.ShipCities.ContainsKey(countryName))
{
ObservableCollection<ShipCityDetails> shipCities = null;
viewModel.ShipCities.TryGetValue(countryName, out shipCities);
return shipCities.ToList();
}
return null;
}
}The following screenshot
illustrates the different ShipCity ItemsSource bound to each row
of the ComboBox based on the Country Name.
Figure 1: ShipCity list of Argentina
Figure 2: ShipCity list of Belgium
Sample
Conclusion
I hope you enjoyed learning about how to bind different ItemsSources of GridComboBoxColumn.
You can refer to our UWP DataGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our UWP DataGrid example 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 forums, Direct-Trac, or feedback portal. We are always happy to assist you!
