How to create GridComboBoxColumn xaml definition that binds to its ViewModel with ItemsSource, SelectedValuePath, and DisplayMemberPath

[Eric Nguyen]

Hello,

I am working on adding a GridComboBoxColumn to a SfDataGrid. I am attempting to create a GridComboBoxColumn definition in xaml that has an ItemSource, SelectedValuePath, and DisplayMemberPath  binding to property values of its DataContext. Are you able to provide examples on how we can create such bindings in a GridComboBoxColumn?

[Sweatha Bharathi]

Hi Eric Nguyen,

We have reviewed your query. We have provided a sample of using GridComboBoxColumn in XAML with DisplayMemberPath, SelectedValuePath, and ItemsSource.

Code snippet to define GridComboBoxColumn in XAML:

<syncfusion:SfDataGrid x:Name="dataGrid" 

                                           ItemsSource="{Binding People}" 

                                           AutoGenerateColumns="False" 

                                           DataContext="{StaticResource Model}" >

    <syncfusion:SfDataGrid.Columns>

         <syncfusion:GridTextColumn MappingName="Name" HeaderText="Name" ></syncfusion:GridTextColumn>

         <syncfusion:GridComboBoxColumn MappingName="FruitId"

                                                                         HeaderText="Favorite Fruit"

                                                                         ItemsSource="{Binding FruitsOption}"

                                                                        DisplayMemberPath="Name"

                                                                        SelectedValuePath="Id" />

    </syncfusion:SfDataGrid.Columns>

</syncfusion:SfDataGrid>

UG Link: GridComboBoxColumn documentation

Find the sample demo in the attachment and let us know if you have any concerns on this.

Regards,

Sweatha B

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: sample_bd13fdc0.zip

[Eric Nguyen]

Hi Sweatha,

My understanding of the example GridComboBoxColumn properties are the following:

MappingName - the integer id property on the grid row that holds the combobox cell's value
ItemSource - the collection of data objects we can choose from on the combobox
DisplayMemberPath - the string property value of the data object we want to display on the combobox
SelectedValuePath - the integer id property value of the data object we want to store as the combobox cell's value

Are you able to confirm that the above definitions are correct?

I am working on a GridComboBoxColumn that has the defined properties MappingName, ItemSource, DisplayMemberPath, and SelectedValuePath. It is able to display the correct property name and update the selected value correctly via DisplayMemberPath and SelectedValuePath from the ItemSource. However, this combo box only displays the values when it is being focused and used. This means that all comboboxes within the GridComboBoxColumn do not display a textblock of the MappingName property value, but the value only appears when you click and edit the ComboBox cell. 

How can I make the TextBlock on the ComboBox on each row visible even when you are not selecting a ComboBox to edit?

My GridComboBoxColumn has the same string path value for MappingName and SelectedValuePath by coincidence. Although they have the same string path value, they are two different data context properties - that being the data object in the ItemsSource and the data row object. Would this be a problem in showing the TextBlock value when the ComboBox is not focused?

[Sweatha Bharathi]

Hi Eric Nguyen,

We have reviewed your query. Your understanding of the GridComboBoxColumn properties is mostly accurate. For further clarity, we have provided explanation of these properties.

MappingName: This refers to the property on the grid row that holds the selected value from the combo box. It typically matches a Datatype in the grid’s data source and should correspond to a value in the combo box’s ItemsSource.

ItemsSource: This is the collection of items that will populate the ComboBox within each cell. Typically, it's a list of objects.

DisplayMemberPath: This specifies which property of the objects in the ComboBox ItemsSource should be displayed in the ComboBox. 

SelectedValuePath: This property specifies which property of the objects in the  ComboBox ItemsSource should be used as the value for the ComboBox. It's usually the key or ID that uniquely identifies each item.

Regarding the issue you are experiencing—where combo box values only appear when the cell is focused—this may be related to how the data bindings are configured. Based on the details you provided, it seems that MappingName and SelectedValuePath share the same path value but refer to different contexts.

To avoid this problem , you must need to ensure the proper bindings like below:

MappingName is correctly bound to the property in the data context of the grid row.

SelectedValuePath is aligned with the value property of the combo box's ItemsSource.

Since MappingName determines the value to display in view mode, it must match the correct property in the data model. This value should correspond to the SelectedValuePath so that the combo box can correctly display the selected item as readable text.

 

Regards,

Sweatha B

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

[Eric Nguyen]

Hi Sweatha,

It seems that even if the MappingName is correctly bound and SelectedValuePath is aligned, the value still does not display in viewmode. Here are the example data objects I am working with. 

The data object grid row: int displayId, string displayName
The data object in ItemsSource: int displayId, string displayName


Are you able to troubleshoot and provide an example in which we are rendering a GridComboBoxColumn with a MappingName to int displayId from the grid row object, and using int displayId and string displayName for SelectedVauePath and DisplayMemberpath from a data object in ItemsSource?

Best,
Eric

[Sweatha Bharathi]

Hi Eric Nguyen,

We reviewed your query and tried to reproduce the scenario based on the details you provided. We are using a GridComboBoxColumn with MappingName set to an int property (DisplayId) from the grid row object. The ComboBox is bound using SelectedValuePath as DisplayId (int property) and DisplayMemberPath as a string (displayName) from the ComboBox's ItemsSource.

However we are not able to replicate the reported scenario , it is works fine as expected.

If the value is still not displaying in view mode, please note the following:

1. Data Type Match: Ensure that DisplayId is the same type in both MappingName and SelectedValuePath (both should be int).
   
2. Valid Value: Make sure the DisplayId in the grid data row matches one of the values in the ComboBox ItemsSource (DisplayId). If no match is found, the ComboBox will not display the value. The SelectedValuePath acts as the key to find the matching item.
   
3. Binding Context: Verify that the ComboBox ItemsSource is properly bound and accessible in the current context.
   
4. Property Notifications: Ensure your data objects implement INotifyPropertyChanged so that any updates reflect correctly in the UI.

Find the sample demo in the attachment and let us know if you have any concerns on this.

Regards,

Sweatha B

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.

Attachment: sample_b1a62de3.zip