Failure to bind to SfDataGrid using CollectionViewSource (VS 2013)

[john mullally]

I have been leveraging Entity Framework (EF) to build Entities from the world famous Northwind Product and Categories Table.

 

Steps

1.  I create the Product and Category EF objects from the Northwind database.

2.  I use drag and drop from the Data Source Window to create a WPF DataGrid for the Products Table.  This creates CollectionViewSource for the Products Table and puts a reference in the MainWindow.xaml Resources.

3.  I do the same (step 2) for the Category Table.  But in the case of the Category Table I delete the WPF DataGrid created for the Category Table.  The purpose of this step is to crated the CollectionViewSource for the Category Table.

4.  I update the code behind to fully populate the CollectionViewSource for both the Product and Categories Table.

5.  I modify the columns created for the Products DataGrid that was created in step 2.  This DataGrid is reduced to 2 columns: a DataGridTextColumn bound to ProductName and a DataGridComboBox used to select Category.  The DataGridComboBox is written from scratch.  Compile and Run - success.  I can change the Category.

6.  I comment out the WPF DataGrid

7.  I try to create a functionally equivalent Syncfusion SfDataGrid, but I cannot get the GridComboBoxColumn to work.  See Below.  Nothing shows in the combo box.  If I change the DisplayMemberPath to "CategoryID", it show that value.

 

        <!--<DataGrid x:Name="productDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="43,32,36,163" ItemsSource="{Binding}" EnableRowVirtualization="True" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="productNameColumn" Header="Product" Binding="{Binding ProductName}"/>
                <DataGridComboBoxColumn x:Name="categoryColumn" Header="Category" ItemsSource="{Binding Source={StaticResource categoryViewSource}}"
                                        SelectedValuePath="CategoryID" SelectedValueBinding="{Binding CategoryID, UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                        DisplayMemberPath="CategoryName" />
            </DataGrid.Columns>
        </DataGrid>-->

 

        <Syncfusion:SfDataGrid x:Name="productDataGrid" Margin="43,32,36,163" ItemsSource="{Binding}" AutoGenerateColumns="False" AllowEditing="True">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn x:Name="productNameColumn" HeaderText="Product" MappingName="ProductName"/>
                <Syncfusion:GridComboBoxColumn x:Name="categoryColumn" HeaderText="Category"
                                               ItemsSource="{Binding Path=Category, Source={StaticResource categoryViewSource}, Mode=TwoWay}"
                                               MappingName="CategoryName" AllowEditing="True" />
            </Syncfusion:SfDataGrid.Columns>
        </Syncfusion:SfDataGrid>

 

Thank You for the help

Attachment: Wpf_NWND_58823852.zip

[Srinivasan Vasu]

Hi John,
Thanks for contacting Syncfusion support.
We have analyzed your query and your sample is not compiled in our machine. However we have prepared sample as per your XAML code, but GridComboBoxColumn works fine in our side. Which loads the data as expected. And if you want to load the selected item of the combobox in edit mode, you have to set DisplayMemberPath or SelectedValuePath of GridComboboxColumn.
Please refer the attached sample that we have tested as per your scenario.
Sample Link: http://www.syncfusion.com/downloads/support/forum/123381/ze/ComboBoxColumns_-_WPF-1652008946
Please refer the below UG Link to know more about GridComboBoxColumn,
Link: http://help.syncfusion.com/wpf/sfdatagrid/column-types?cs-save-lang=1&cs-lang=xaml#gridcomboboxcolumn
Regards,
Srinivasan

[john mullally]

Hi Srinivasan,

I tried both of your suggestions to no avail.  I changed the XAML in the SfDataGrid that I sent in opening post.  The DataGrid works - but cannot figure out how to get SfDataGrid to work.

    <Grid DataContext="{StaticResource productViewSource}">
        <StackPanel>
        <DataGrid x:Name="productDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="10"
                  ItemsSource="{Binding}" EnableRowVirtualization="True" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="productNameColumn" Header="Product"
                                    Binding="{Binding ProductName}" Width="Auto"/>
                <DataGridComboBoxColumn x:Name="categoryColumn" Header="Category"
                                        ItemsSource="{Binding Source={StaticResource categoryViewSource}}"
                                        SelectedValuePath="CategoryID" SelectedValueBinding="{Binding CategoryID,
                                        UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                        DisplayMemberPath="CategoryName" />
                </DataGrid.Columns>
        </DataGrid>

        <Syncfusion:SfDataGrid x:Name="productDataGrid1" Margin="10" ItemsSource="{Binding}"
                               AutoGenerateColumns="False"  AllowEditing="True" AllowResizingColumns="True" ColumnSizer="Auto">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn x:Name="productNameColumn1" HeaderText="Product"
                                           DisplayBinding="{Binding Path=ProductName}" AllowResizing="True" />
                <Syncfusion:GridComboBoxColumn x:Name="categoryColumn1" HeaderText="Category"
                                               ItemsSource="{Binding Source={StaticResource productViewSource}}"
                                               MappingName="CategoryID" AllowEditing="True"
                                               DisplayMemberPath="CategoryName"
                                               />
             </Syncfusion:SfDataGrid.Columns>
        </Syncfusion:SfDataGrid>
        </StackPanel>
    </Grid>

 

I think the main SfDataGrid problem I am grappling with is the ItemSource Binding Path required by Syncfusion.  I cannot figure out what to use as a Path for the CollectionViewSource.  The example you sent was for an Observable Collection.  By trial and error, I cannot figure out what to do.

In my XAML above for the SfDataGrid, where I do not use any Item Source Binding Path, the combobox columns comes up blank yet I can select from the pull down Category Names in the combo box.  The combo box selection does not stick and reverts to blank when I exit.  If I use any value (and I have tried several) as the Binding Path I regress & cannot even see Category Names in the pull down.

As I stated earlier I use EF and Drag & Drop from DataSource window to build my CollectionViewSource objects & references to it.  

[john mullally]

Hi Srinivasan,

I tried both of your suggestions to no avail.  I changed the XAML in the SfDataGrid that I sent in opening post.  The DataGrid works - but cannot figure out how to get SfDataGrid to work.

    <Grid DataContext="{StaticResource productViewSource}">
        <StackPanel>
        <DataGrid x:Name="productDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="10"
                  ItemsSource="{Binding}" EnableRowVirtualization="True" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="productNameColumn" Header="Product"
                                    Binding="{Binding ProductName}" Width="Auto"/>
                <DataGridComboBoxColumn x:Name="categoryColumn" Header="Category"
                                        ItemsSource="{Binding Source={StaticResource categoryViewSource}}"
                                        SelectedValuePath="CategoryID" SelectedValueBinding="{Binding CategoryID,
                                        UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                        DisplayMemberPath="CategoryName" />
                </DataGrid.Columns>
        </DataGrid>

        <Syncfusion:SfDataGrid x:Name="productDataGrid1" Margin="10" ItemsSource="{Binding}"
                               AutoGenerateColumns="False"  AllowEditing="True" AllowResizingColumns="True" ColumnSizer="Auto">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn x:Name="productNameColumn1" HeaderText="Product"
                                           DisplayBinding="{Binding Path=ProductName}" AllowResizing="True" />
                <Syncfusion:GridComboBoxColumn x:Name="categoryColumn1" HeaderText="Category"
                                               ItemsSource="{Binding Source={StaticResource productViewSource}}"
                                               MappingName="CategoryID" AllowEditing="True"
                                               DisplayMemberPath="CategoryName"
                                               />
             </Syncfusion:SfDataGrid.Columns>
        </Syncfusion:SfDataGrid>
        </StackPanel>
    </Grid>

 

I think the main SfDataGrid problem I am grappling with is the ItemSource Binding Path required by Syncfusion.  I cannot figure out what to use as a Path for the CollectionViewSource.  The example you sent was for an Observable Collection.  By trial and error, I cannot figure out what to do.

In my XAML above for the SfDataGrid, where I do not use any Item Source Binding Path, the combobox columns comes up blank yet I can select from the pull down Category Names in the combo box.  The combo box selection does not stick and reverts to blank when I exit.  If I use any value (and I have tried several) as the Binding Path I regress & cannot even see Category Names in the pull down.

As I stated earlier I use EF and Drag & Drop from DataSource window to build my CollectionViewSource objects & references to it.  

Oops XAML for example was actually:

    <Grid DataContext="{StaticResource productViewSource}">
        <StackPanel>
        <DataGrid x:Name="productDataGrid" RowDetailsVisibilityMode="VisibleWhenSelected" Margin="10"
                  ItemsSource="{Binding}" EnableRowVirtualization="True" AutoGenerateColumns="False">
            <DataGrid.Columns>
                <DataGridTextColumn x:Name="productNameColumn" Header="Product"
                                    Binding="{Binding ProductName}" Width="Auto"/>
                <DataGridComboBoxColumn x:Name="categoryColumn" Header="Category"
                                        ItemsSource="{Binding Source={StaticResource categoryViewSource}}"
                                        SelectedValuePath="CategoryID" SelectedValueBinding="{Binding CategoryID,
                                        UpdateSourceTrigger=PropertyChanged, Mode=TwoWay}"
                                        DisplayMemberPath="CategoryName" />
                </DataGrid.Columns>
        </DataGrid>

        <Syncfusion:SfDataGrid x:Name="productDataGrid1" Margin="10" ItemsSource="{Binding}"
                               AutoGenerateColumns="False"  AllowEditing="True" AllowResizingColumns="True" ColumnSizer="Auto">
            <Syncfusion:SfDataGrid.Columns>
                <Syncfusion:GridTextColumn x:Name="productNameColumn1" HeaderText="Product"
                                           DisplayBinding="{Binding Path=ProductName}" AllowResizing="True" />
                <Syncfusion:GridComboBoxColumn x:Name="categoryColumn1" HeaderText="Category"
                                               ItemsSource="{Binding Source={StaticResource categoryViewSource}}"
                                               MappingName="CategoryID" AllowEditing="True"
                                               DisplayMemberPath="CategoryName"
                                               />
             </Syncfusion:SfDataGrid.Columns>
        </Syncfusion:SfDataGrid>
        </StackPanel>
    </Grid>

[Srinivasan Vasu]

Hi John,
Thanks for contacting Syncfusion support.
We have analyzed your query and in EditMode we have load the Microsoft ComboBox control in our SfDataGrid.GridComboboxColumn. Hence, all the default Microsoft ComboBox behaviors will applicable for GridComboBoxColumn.
As per your code, the same issue is replicated while using ComboBox seperately. So, we have used alternate way to bind CollectionViewSource with SfDataGrid.GridComboboxColumn and prepared a sample accordingly.
We have used ICollectionViewSource instead of CollectionViewSource. In ViewModel we have defined two properties called “Employee” and “ProductsView” to load items in SfDataGrid as well as in GridComboBoxColumn. And you can download the same from the  following location.

Sample: http://www.syncfusion.com/downloads/support/forum/123381/ze/CollectionViewSource2113950577

Regards,
Srinivasan

[James]

H John, did you ever solve this problem?  I have bound to a datatable.defaultview successfully, and the  combobox all works and the primary key is updated correctly, but only in edit mode. Otherwise it displays a blank column.

I note that the syncfusion moderator reply to you kept using an observable collection list, which works fine as it used the syncfusion MappingName. But below will not work, did you solve it?

   <syncfusion:GridComboBoxColumn Width="190"

                                                       CellStyle="{StaticResource style1}"

                                                       AllowEditing="True"

                                                  x:Name="FTELOCComboBox"

                                               HeaderText="FTELoc"   

                                               ValueBinding  ="{Binding FTEL_ID, Mode=TwoWay}"  

                                               DisplayMemberPath="Location"

                                               SelectedValuePath="FTEL_ID"

                                               />

[Jai Ganesh S]

Hi James, 

 

In SfDaGrid all operations (Sorting, Filtering, Grouping etc..) performed based on the MappingName. So we must give a MappingName for a Column or give a DisplayBinding otherwise it causes the exception. 

 

Ug Link: http://help.syncfusion.com/wpf/sfdatagrid/column-types#mapping-column-to-particular-property 

 

Regards, 

Jai Ganesh S 

[James]

Jai, I have spend over 10 hours on this.

If I have a DataTable dtList that has two columns

• L_ID as Primary Key
• Country as string

And if I have a datatable dtMaster that has a foreign key relationship to dtList with colums as below

• ID as primary key
• L_ID as foreign key of datatable dtList.

Then how do I get a GridComboBoxColumn to 

1. populate its list from  DataTable dtLIST, and display in the dropdown the strings Country
   
2. When the user selects a country, the combobox then takes the  L_ID as selected value and inserts that foreign key L_ID into DataTable dtMaster

This is trivial to do in normal XAML. However, in the Syncfusion SfGrid it is nigh on impossible. I have read *every* item on your website for now two days!!   How can I make this seemingly trivial thing work ? 

[James]

Ok, I have this working using the below However the column MyHeaderText, always shows blank (nothing, empty), until I click on the cell into edit mode. When it goes to edit mode it brings up the ComboBox and the combobox works. However, when i then move off the cell, the cell becomes blank again.

Why does this happen?  I downloaded the example attached to the this same thread earlier, and it doesn't happen in that example. There are a few other people who have mentioned this in other posts. But I have never found a resolution

WORKING XMAL

                        <syncfusion:GridComboBoxColumn 

                                                        x:Name="FTELOCComboBox" //binding is set in the code behind to this object  as --> FTELOCComboBox.ItemsSource = FTE_LocationDataTable.DefaultView; (and FTE_LocationDataTable is a DataTable)

                                                        DisplayMemberPath="Country"

                                                        HeaderText="MyHeaderText"   

                                                        MappingName="L_ID"

                                                        SelectedValuePath="ID

                                                  

[James]

EUREKA Solved ! GridComboBoxColumn bound to DataTable, Primary Key inserted as Foreign Key in Parent DataTable

Well I'm on a run of solving my own problems.  From my last post, I deleted the ".DefaultView" and it all worked. 

So in full summary for all those travelers  who may end up here looking for the same answer.

Requirement

If I have a DataTable dtList that has two columns

• L_ID as Primary Key
• Country as string

And if I have a datatable dtMaster that has a foreign key relationship to dtList with colums as below

• ID as primary key
• L_ID as foreign key of datatable dtList.

I wish to create a  GridComboBoxColumn that:

1. Will populate its list from  DataTable dtList, and display in the dropdown the strings Country (not its Primary Key L_ID)
   
2. When the user selects a country, the combobox then takes the  L_ID as selected value and inserts that foreign key L_ID into DataTable dtMaster

XAML  

 <syncfusion:SfDataGrid x:Name="productDataGrid"

                               AllowEditing="True"

                               AutoGenerateColumns="False"

                               ColumnSizer="Auto"                            

                               ItemsSource="{Binding DTMaster}"                               

                               ShowGroupDropArea="True">

                        <syncfusion:GridComboBoxColumn 

                                                x:Name="FTELOCComboBox"  //See note

                                                DisplayMemberPath="Country"

                                               HeaderText="MyHeaderText"

                                               MappingName="L_ID"

                                               SelectedValuePath="L_ID" />

Where 

1. FTELOCComboBox is bound in code behind to: FTELOCComboBox.ItemsSource = ViewModel.FTE_LocationDataTable;
2. And ViewModel.FTE_LocationDataTable is as below
3. public DataTable FTE_LocationDataTable {  get { return _FTE_Location; }   }
4. The binding   ItemsSource="{Binding dtMaster}" is the property public  DataTable DTMaster  {  get { return dtMaster; }} where dtMaster is a DataTable

Trap

The trap that cost me hours is that I bound to the DefaultView of the datatable FTELOCComboBox.ItemsSource=ViewModel.FTE_LocatationDataTable.DefaultView

It seemed natural to bind to DefaultView, for displaying a DataTable in a grid, as this is what is mostly done. I didn't suspect it as the cause for well over 10 hours of mucking around. 

[Jai Ganesh S]

Hi James, 

 

We are glad that you have resolved your problem.  

 

Please let us know if you need any other assistance. 

 

Regards, 

Jai Ganesh S