sfDataGrid binding for ComboBox Issue/help

Question

Hi,I am having issues databinding to the SfDataGrid. I am using MVVM architecture for my simple project. Below is my simplified project (with some code ommited):Models:Combo.cs:public class Combo : INotifyPropertyChanged { private string name; public ObservableCollection LoadCases { get; set; } #region getters and setters public string Name { get { return name; } set { name = value; } } public Combo(....) { .... } ..... }LoadCase.cs public class LoadCase : INotifyPropertyChanged { private string name; private double sf; public string Name { get { return name; } set { name = value; } } public double SF { get { return sf; } set { sf = value; } } public LoadCase(....) { .... } .... }ViewModel (I have 2 views that share the same view model):MainWindowViewModel.cs public class MainWindowViewModel : INotifyPropertyChanged { public Combo ObjCombo { get; set; } private ObservableCollection

Vijayarasan Sivanandham · Accepted Answer

Hi Moustafa,Thank you for your patience.Your requirement can be achieved customization the OnInitializeEditElement method in GridCellComboBoxRenderer in SfDataGrid. Please refer the below code snippet, 




public class GridCellComboBoxRendererExt : GridCellComboBoxRenderer 
{ 
        public override void OnInitializeEditElement(DataColumnBase dataColumn, ComboBox uiElement, object dataContext) 
        { 
            uiElement.IsDropDownOpen = true; 
            base.OnInitializeEditElement(dataColumn, uiElement, dataContext); 
            uiElement.PreviewKeyDown += UiElement_PreviewKeyDown; 
        }            
 
        private void UiElement_PreviewKeyDown(object sender, KeyEventArgs e) 
        {            
            CollectionView items = (CollectionView)CollectionViewSource.GetDefaultView((e.Source as ComboBox).ItemsSource); 
            items.Filter = ((o) => 
            { 
                if (String.IsNullOrEmpty(e.Key.ToString())) 
                    return true; 
                else 
                { 
                    if ((o as Combo).Name.Contains(e.Key.ToString())) 
                        return true; 
                    else 
                        return false; 
                } 
            }); 
            items.Refresh(); 
        }         
} 

Sample Link: https://www.syncfusion.com/downloads/support/forum/165390/ze/ModifiedSample1712207117 
UG Link: https://help.syncfusion.com/wpf/datagrid/column-types#customize-column-renderer 
Please let us know if you have any concerns in this.Regards,Vijayarasan S

Vijayarasan Sivanandham · Answer

Hi Moustafa 
Thank you for contacting Syncfusion support.Based on provided information we suspect that GridComboBoxCOlumn ItemSource not properly binded in your application. Please refer the below KB documentation for your reference,KB Link: https://www.syncfusion.com/kb/7737/how-to-bind-the-view-model-itemssource-to-gridcomboboxcolumn-in-wpf-datagrid-sfdatagrid 
https://www.syncfusion.com/kb/6701/how-to-load-the-collection-in-gridcomboboxcolumn-when-defining-datacontext-after-loading 
UG Link: https://help.syncfusion.com/wpf/datagrid/column-types#gridcomboboxcolumn 
We hope this helps. Please let us know, if you require further assistance on this.Regards,Vijayarasan S

Moustafa · Answer

Hi Moustafa

Thank you for contacting Syncfusion support.

Based on provided information we suspect that GridComboBoxCOlumn ItemSource not properly binded in your application. Please refer the below KB documentation for your reference,

KB Link: https://www.syncfusion.com/kb/7737/how-to-bind-the-view-model-itemssource-to-gridcomboboxcolumn-in-wpf-datagrid-sfdatagrid

https://www.syncfusion.com/kb/6701/how-to-load-the-collection-in-gridcomboboxcolumn-when-defining-datacontext-after-loading

UG Link: https://help.syncfusion.com/wpf/datagrid/column-types#gridcomboboxcolumn

We hope this helps. Please let us know, if you require further assistance on this.

Regards,
Vijayarasan S

I have modified my xaml:

<Syncfusion:SfDataGrid x:Name="ComboInfoDG" Grid.ColumnSpan="3" AutoGenerateColumns="False" Margin="10,10,10,10" Grid.Row="3" Grid.Column="0"

HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding ObjCombo.LoadCases}" AllowEditing="True" EditTrigger="OnTap">

<Syncfusion:SfDataGrid.Columns>

<Syncfusion:GridComboBoxColumn x:Name="Comboboxcolumn" HeaderText="Load Name"

ItemsSource="{Binding DataContext.CombosAndLoadCasesList, ElementName=ComboInfoDG}"

DisplayMemberPath="{Binding Name}"

MappingName="Name"/>

<Syncfusion:GridTextColumn HeaderText="Load factor"

MappingName="SF"/>

</Syncfusion:SfDataGrid.Columns>

</Syncfusion:SfDataGrid>

I am still getting errors:

Here is what my debugger is showing me:

Error 1 null Cannot convert '' from type '' to type 'System.Uri' for 'en-US' culture with default conversions; consider using Converter property of Binding. NotSupportedException:'System.NotSupportedException: UriTypeConverter cannot convert from (null).
Error 1 MainWindowViewModel Name GridComboBoxColumn.DisplayMemberPath String Name property not found on object of type MainWindowViewModel.
Error 2 GridComboBoxColumn Name GridComboBoxColumn.DisplayMemberPath String Name property not found on object of type GridComboBoxColumn.
Error 2 SfDataGrid, Name='ComboInfoDG' DataContext.CombosAndLoadCasesList GridComboBoxColumn.ItemsSource IEnumerable Cannot find governing FrameworkElement or FrameworkContentElement for target element.
Error 1 MainWindowViewModel Name GridComboBoxColumn.DisplayMemberPath String Cannot find governing FrameworkElement or FrameworkContentElement for target element.
Error 1 GridComboBoxColumn Name GridComboBoxColumn.DisplayMemberPath String Cannot find governing FrameworkElement or FrameworkContentElement for target element.

Sathiyathanam Jeyakumar · Answer

Hi Moustafa, Thanks for your shared details. And we have create the sample based on the provided information, You can achieve your requirement “To Show the List of Loadcases Name in the DropDown” by using the below code snippets. Sample: https://www.syncfusion.com/downloads/support/forum/165390/ze/ComboBoxDemo-48541102.zip Screenshot: If the provided sample is differ from your application or requirement, kindly revert back to us with the modified sample. It will help us to provide a better solution to you at earlier. Regards, Sathiyathanam

Moustafa · Answer

Hi Moustafa,

Thanks for your shared details.

And we have create the sample based on the provided information, You can achieve your requirement “To Show the List of Loadcases Name in the DropDown” by using the below code snippets.



<Window.Resources>

   <local:MainWindowViewModel x:Key="viewModel"/>

Window.Resources>

<Grid>

   <Syncfusion:SfDataGrid x:Name="ComboInfoDG" Grid.ColumnSpan="3" AutoGenerateColumns="False" Margin="10,10,10,10" Grid.Row="3" Grid.Column="0" DataContext="{StaticResource viewModel}"

                   HorizontalAlignment="Stretch" VerticalAlignment="Stretch" ItemsSource="{Binding ObjCombo.LoadCases}" AllowEditing="True" EditTrigger="OnTap">

            <Syncfusion:SfDataGrid.Columns>

                <Syncfusion:GridComboBoxColumn HeaderText="Load Name"

                            ItemsSource="{Binding CombosAndLoadCasesList,Source={StaticResource viewModel}}"

                            MappingName="Name" />

                <Syncfusion:GridTextColumn HeaderText="Load factor"

                                          MappingName="SF"/>

            Syncfusion:SfDataGrid.Columns>

        Syncfusion:SfDataGrid>

    Grid>

Sample: https://www.syncfusion.com/downloads/support/forum/165390/ze/ComboBoxDemo-48541102.zip

Screenshot:

If the provided sample is differ from your application or requirement, kindly revert back to us with the modified sample. It will help us to provide a better solution to you at earlier.

Regards,

Sathiyathanam

Hi,

Thanks for your response but I think based on your code it creates a new instance of type MainWindowViewModel and that becomes the DataContext. Thats not what I need. I need to set the DataContext to the same instance passed to my Child view in the constructor:

ChildView

public partial class ChildView: Window

{

private MainWindowViewModel viewModel;

public ChildView(MainWindowViewModel _viewModel)

{

InitializeComponent();

viewModel = _viewModel;

this.DataContext = viewModel;

}

This variable passed into my ChildView has some values I need to display that I filled in previously. In other words, I want to use the same datacontext instance viewmodel for both views. In your code you are creating a new instance not using the passed instance.

Moustafa · Answer

I solved the databinding issue. However there is one issue that is different than the code you guys provided:To make it like my case please change the following in your code:MainWindowViewModel.cs        private ObservableCollection UpdateCombosAndLoadCasesList()        {            ObservableCollection combosAndLoadCasesList = new ObservableCollection();            combosAndLoadCasesList.Add(new Combo() { Name = "India"});            combosAndLoadCasesList.Add(new Combo() { Name = "German" });            combosAndLoadCasesList.Add(new Combo() { Name = "Greece" });            combosAndLoadCasesList.Add(new Combo() { Name = "Brazil" });            combosAndLoadCasesList.Add(new Combo() { Name = "America" });            combosAndLoadCasesList.Add(new Combo() { Name = "Madrid" });            combosAndLoadCasesList.Add(new Combo() { Name = "Russia" });            return combosAndLoadCasesList;        }It will not display correctly even with DisplayMemberPath = "Name". Please give it a try and tell me if you can make it work. If you can provide the solution for this Id greatly appreciate it.Also can you please advise on the following:A way to implement a filter in each Combobox based on user input (in that combobox) that will filter the drop down list.Only allow unique values in the Combobox column.Only allow values in that column that are in CombosAndLoadCasesList.A way to have an OK and cancel button my window such that when the user presses cancel, any changes done in the SfDataGrid will not be reflected in the binded variables. If the users presses OK, changes are saved. There are events called OldItemsSource and NewItemsSource but I am not sure how to utilize them.

Vijayarasan Sivanandham · Answer

Hi Moustafa,Thanks for the update. 




Queries 

Solutions 


1.A way to implement a filter in each Combobox based on user input (in that combobox) that will filter the drop down list. 
 
2.Only allow unique values in the Combobox column. 
 
3.Only allow values in that column that are in CombosAndLoadCasesList. 
 
4.A way to have an OK and cancel button my window such that when the user presses cancel, any changes done in the SfDataGrid will not be reflected in the binded variables. If the users presses OK, changes are saved. There are events called OldItemsSource and NewItemsSource but I am not sure how to utilize them 

We are little unclear with your scenario. Can you please provide the more information related to your queries?Can you please share us below things?                1. Provide more details about your scenario with illustrations?           2. Provide more details about your scenario with image illustrations?             
 
 
It will be helpful for us to check on it and provide you the solution at the earliest. 
Regards,Vijayarasan S

Moustafa · Answer

1. Can you change the following code in your example and see if it works. It will not display the values in the combobox list: private ObservableCollection

Vijayarasan Sivanandham · Answer

Hi Moustafa,Thanks for the update.Please find answer for your queries below 




Queries 

Solutions 


 
Can you change the following code in your example and see if it works. It will not display the values in the combobox list: 
 

 
You can resolve the reported problem by defining the DisplayMemberPath and SelectedValuePath in GridComboBoxColumn. Please refer the below code snippet, 




<Syncfusion:GridComboBoxColumn  HeaderText="Load Name" DisplayMemberPath="Name" SelectedValuePath="Name" AllowEditing="True" 
                                        ItemsSource="{Binding CombosAndLoadCasesList,Source={StaticResource viewModel}}" 
                                        MappingName="Name" /> 
 
 
 
 
 


How can implement autocomplete filter in the combobox column: 
 

 
Currently, we are analyzing your requirement of “How can implement autocomplete filter in the combobox column” We will validate and update you the details on or before May 20, 2021. 


How can I prevent any duplicates in the combobox column: 

 
Your requirement can be achieved by customization the CurrentCellValidating  event in SfDataGrid. Please refer the below code snippet, 




private void ComboInfoDG_CurrentCellValidating(object sender, Syncfusion.UI.Xaml.Grid.CurrentCellValidatingEventArgs e) 
        { 
            if (e.Column.MappingName == "Name") 
            { 
                for (int i = 0; i < ComboInfoDG.View.Records.Count; i++) 
                { 
                    //same row value update in view in this case no need to check 
                    if ( i != (previousRowIndex - 1) && (this.ComboInfoDG.View.Records[i].Data as LoadCase).Name.ToString().Equals((e.NewValue.ToString())) && (e.NewValue.ToString() != e.OldValue.ToString())) 
                    { 
                        e.IsValid = false; 
                        e.ErrorMessage = "Invalid Value"; 
                        break; 
                    } 
                } 
            } 
        } 
 
int previousRowIndex; 
        private void ComboInfoDG_CurrentCellActivated(object sender, CurrentCellActivatedEventArgs e) 
        { 
            //get the current value changed row index 
            previousRowIndex = (int)e.CurrentRowColumnIndex.RowIndex; 
        } 
 
 
Sample Link: https://www.syncfusion.com/downloads/support/forum/165390/ze/Sample460966577 
 
 
Regards, Vijayarasan S

Moustafa · Answer

Thanks Vijayarasan. Awaiting your response to #2.

Vijayarasan Sivanandham · Answer

Hi Moustafa,Thanks for the update.As we mentioned earlier, we are analyzing your requirement of “How can implement autocomplete filter in the combobox column”. We will validate and update you further details on May 20, 2021.We appreciate your patience until then.Regards,Vijayarasan S

Moustafa · Answer

Hi Vijayarasan S,Sorry I was busy with work. I have tested the sample you provided but it doesnt work properly. I cannot enter more than one letter. The filtering isnt working properly and I am not sure how to fix this.I would appreciate your help.

Vijayarasan Sivanandham · Answer

Hi Moustafa,Thanks for the update.We could be able to reproduce your reported issue “Sometimes cannot enter more than one letter in GricComboBoxColumn” from our end. We will validate and update you details on or before June 07, 2021.We appreciate your patience until then.Regards,Vijayarasan S

Vijayarasan Sivanandham · Answer

Hi Moustafa,Thank you for your patience.Based on provided information your requirement some condition not satisfied based on your scenario in GridComboBoxColumn. You can solve the reported problem by loaded the ComboBoxAdv as EditTemplate in GridTemplateColumn or GridMultiColumnDropDownList. The best way to solve the reported problem use GridMultiColumnDropDownList column in SfDataGrid.Solution 1:Your requirement can be resolve by uding the GridMultiColumnDropDownList in SfDataGrid. Please refer the below code snippet, private void ComboInfoDG_CurrentCellValidating(object sender, Syncfusion.UI.Xaml.Grid.CurrentCellValidatingEventArgs e) { //validation for GridMultiCOlumnDropDownList if (e.Column.MappingName == "Name") { for (int i = 0; i < ComboInfoDG.View.Records.Count; i++) { var name = (this.ComboInfoDG.View.Records[i].Data as LoadCase).Name; //same row value update in view in this case no need to check if (i != (previousRowIndex - 1) && name != null && name.ToString().Equals((e.NewValue != null ? e.NewValue.ToString() : string.Empty)) && ((e.NewValue != null ? e.NewValue.ToString() : string.Empty) != (e.OldValue != null ? e.OldValue.ToString() : string.Empty))) { e.IsValid = false; e.ErrorMessage = "Invalid Value"; break; } } } } For more information related to GridMultiColumnDropDownList, please refer the below user guide documentation,UG Link: https://help.syncfusion.com/uwp/datagrid/column-types#gridmulticolumndropdownlist Solution 2:In another way your requirement can be achieved by loaded the ComboBoxAdv has EditTemplate in GridTemplateColumn in SfDataGrid. Please refer the below code snippet, Filtering related code snippet: public class FilterAction : TargetedTriggerAction { protected override void Invoke(object parameter) { if ((parameter as KeyEventArgs).Key != Key.Down) { CollectionView items = (CollectionView)CollectionViewSource.GetDefaultView(Target.ItemsSource); items.Filter = ((o) => { if (String.IsNullOrEmpty(Target.Text)) return true; else { if ((o as Combo).Name.ToLower().Contains(Target.Text.ToLower())) return true; else return false; } }); items.Refresh(); } } } SelectedItem Binding converter Code Snippet: public class ItemsSourceConverter : IValueConverter { public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (value == null) return string.Empty; if(value is Combo) { return (value as Combo).Name.ToString(); } return value.ToString(); } public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture) { if (value == null) return string.Empty; if (value is Combo) { return (value as Combo).Name.ToString(); } return value.ToString(); } } In SfDataGrid CurrentCellValidating event will not triggered for in GridTemplateColumn. Because it is possible to extend the functionality of GridColumns with your own editor by using CellTemplate and EditTemplate of GridTemplateColumn and so unable to identify which UI Elements needs to be focused. You can use GridRowValidatingEvent and doing something what you need to do in GridCurrentCellvalidating Event as shown in the below code snippet, private void ComboInfoDG_RowValidating(object sender, Syncfusion.UI.Xaml.Grid.RowValidatingEventArgs e) { if (ComboInfoDG.CurrentColumn is GridTemplateColumn) { for (int i = 0; i < ComboInfoDG.View.Records.Count; i++) { var name = (this.ComboInfoDG.View.Records[i].Data as LoadCase).Name; if (i != (previousRowIndex - 1) && name != null && name.ToString().Equals((newlySelectedValue != null ? newlySelectedValue : string.Empty))) { e.IsValid = false; e.ErrorMessages.Add("Name", "Invalid Value"); break; } } } } string newlySelectedValue; private void ComboBoxAdv_SelectionChanged(object sender, System.Windows.Controls.SelectionChangedEventArgs e) { //newlySelectedValue = string.Empty; if (e.AddedItems.Count != 0) newlySelectedValue = (e.AddedItems[0] as Combo).Name; } int previousRowIndex; private void ComboInfoDG_CurrentCellActivated(object sender, CurrentCellActivatedEventArgs e) { //get the current value changed row index previousRowIndex = (int)e.CurrentRowColumnIndex.RowIndex; } UG Link: https://help.syncfusion.com/uwp/datagrid/data-validation#row-validation Sample Link: https://www.syncfusion.com/downloads/support/directtrac/165390/ze/Sample-1338264349 Please let us know if you have any concerns in this. Regards, Vijayarasan S

Moustafa · Answer

Hi, So sorry for the late reply. I had personal issues and I just saw this response. The download link does not work :(.

Vijayarasan Sivanandham · Answer

Hi Moustafa,Thanks for the update.Based on provided information we have prepared the sample for achieve your requirement. 
Sample Link: https://www.syncfusion.com/downloads/support/forum/165390/ze/Sample-1602389110Please let us know if you have any concerns in this. 

Regards, 
Vijayarasan S