We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

how to bind SelectedValue of sfAutoComplete inside sfDataGrid

Hi
I'm newbie in using SF components and I want to ask you for little help. I want to use sfAutoComplete entry inside of template column in sfDataGrid in my MVVM project. Please tell me how can I bing SelectedValue property of sfAutoComplete to my business model? 

XAML

<sf:SfDataGrid x:Name="dataGrid2"

                                               ItemsSource="{Binding CKTypeSelector}"

                                               AllowEditing="True"

                                               NavigationMode="Cell"

                                               SelectedItem="{Binding selCKType}"

                                               SelectionMode="Single"

                                               EditTapAction="OnDoubleTap"

                                               EditorSelectionBehavior="MoveLast"

                           

                                               AllowPullToRefresh="False"

                                               LiveDataUpdateMode="AllowDataShaping"

                                               GroupingMode="Multiple"

                           

                                               ColumnSizer="Star"

                                               AutoGenerateColumns="False"

                                               AllowSorting="True"

                                               VerticalOptions="FillAndExpand"

                                               HorizontalOptions="FillAndExpand"

                                               >

                                    <sf:SfDataGrid.Columns>

                                        <sf:GridTextColumn HeaderText="{extensions:Translate lblName}"

                                                           MappingName="Name"

                                                           AllowEditing="False" />

                                        <sf:GridTemplateColumn HeaderText="{extensions:Translate lblValue}"

                                                               MappingName="selControlKey_ID"

                                                               MinimumWidth="200">

                                            <sf:GridTemplateColumn.CellTemplate>

                                                <DataTemplate>

                                                    <sfACompl:SfAutoComplete x:Name="autoComplete"

                                                                             DataSource="{Binding PickerControlKeys}"

                                                                             DisplayMemberPath="Name"

                                                                             SelectedValuePath="ID"


                                                                             SelectedValue="{Binding ??????? selControlKey_ID ???????}"


                                                                             MaximumSuggestion="5"

                                                                             AutoCompleteMode="Suggest"

                                                                             SuggestionMode="Contains"

                                                                             HighlightedTextFontAttributes="Bold"

                                                                             HighlightedTextColor="Red"

                                                                             DropDownTextSize="10"

                                                                             DropDownItemHeight="14"

                                                                             TextSize="12"

                                                                             LoadMoreText="{extensions:Translate lblLoadMore}"

                                                                             NoResultsFoundText="{extensions:Translate lblNoResult}" />

                                                </DataTemplate>

                                            </sf:GridTemplateColumn.CellTemplate>

                                        </sf:GridTemplateColumn>

                                    </sf:SfDataGrid.Columns>

</sf:SfDataGrid>


ViewModel

public class AccControlKeyTypeSelector

    {

        public AccControlKeyTypeSelector() { }


        public int ID { get; set; }

        public string Name { get; set; }

        public ICollection<PickerControlKeys> PickerControlKeys { get; set; }

        public int selControlKey_ID { get; set; }

    }


public class PickerControlKeys

    {

        public PickerControlKeys() { }


        public int ID { get; set; }

        public string Name { get; set; }

    }


public class BudgetTypePageViewModel : BaseViewModel, IBudgetTypePageViewModel

{

        private ObservableCollection<AccControlKeyTypeSelector> _cktypeselector = new ObservableCollection<AccControlKeyTypeSelector>();

        private AccControlKeyTypeSelector _selcktype = new AccControlKeyTypeSelector();


        public ObservableCollection<AccControlKeyTypeSelector> CKTypeSelector

        {

            get { return _cktypeselector; }

            set

            {

                _cktypeselector = value;

                OnPropertyChanged(nameof(CKTypeSelector));

            }

        }

        public AccControlKeyTypeSelector selCKType

        {

            get { return _selcktype; }

            set

            {

                _selcktype = value;

                OnPropertyChanged(nameof(selCKType));

            }

        }


..........


}


and some code to fill collections, which works OK.

DataGrid must display values from CKTypeSelector collection in rows (about 7 rows), every CKTypeSelector item has its own collection of exact PickerControlKeys and the selControlKey_ID property to store ID of one ControlKey value selected from PickerControlKeys collection.

Suggestion box works and shows values what I want and I'm able to select one of these. Bud when I select the ControlKey value, it is not written into CKTypeSelector.selControlKey_ID or selCKType.selControlKey_ID.

Please give me some hint to resolve this little stupid problem. Thnx a lot.

David




10 Replies

VR Vigneshkumar Ramasamy Syncfusion Team December 11, 2018 10:10 AM UTC

Hi David Marek 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query with “how to bind SelectedValue of sfAutoComplete inside sfDataGrid” and your requirement can be achieved by using complex properties, so that we can bind for both DataSource and SelectedItem property in SfAutoComplete control. We have prepared a sample for the sample. Please find the sample and code form below. 
 
 
public class CountryList 
    { 
        private ObservableCollection<string> countryNames; 
 
        public ObservableCollection<string> CountryNames 
        { 
            get { return countryNames; } 
            set 
            { 
                countryNames = value; 
                RaisePropertyChanged("CountryNames"); 
            } 
        } 
 
        private string selectedCountry; 
 
        public string SelectedCountry 
        { 
            get { return selectedCountry; } 
            set{ 
                selectedCountry = value; 
                RaisePropertyChanged("SelectedCountry"); 
            } 
        } 
  } 
 
>>>>>>>>>>> 
     private CountryList countryList; 
 
        public CountryList CountryList 
        { 
            get { return countryList; } 
            set { 
                countryList = value; 
                RaisePropertyChanged("CountryList"); 
            } 
        } 
 
>>>>>>>>>>> 
 
<sfgrid:GridTemplateColumn MappingName="CountryList"> 
                        <sfgrid:GridTemplateColumn.CellTemplate> 
                            <DataTemplate> 
                                <auto:SfAutoComplete DataSource="{Binding CountryList.CountryNames}" SelectedItem="{Binding CountryList.SelectedCountry}" ></auto:SfAutoComplete> 
                            </DataTemplate> 
                        </sfgrid:GridTemplateColumn.CellTemplate> 
                    </sfgrid:GridTemplateColumn> 
 
Sample Link: SfGird_AutoComplete
 
 
Please let us know if this helpful. 
 
Regards 
Vigneshkumar R 



DM David Marek December 12, 2018 08:32 PM UTC

Hi, it works great... Thank you a lot.

David


VR Vigneshkumar Ramasamy Syncfusion Team December 13, 2018 05:34 AM UTC

Hi David Marek , 
 
We glad to know that your requirement has been achieved. Please get in touch if you required further assistance on this. 
   
Regards 
Vigneshkumar R 



DM David Marek replied to Vigneshkumar Ramasamy January 21, 2019 02:16 PM UTC

Hi David Marek 
 
Thanks for contacting Syncfusion support. 
 
We have checked your query with “how to bind SelectedValue of sfAutoComplete inside sfDataGrid” and your requirement can be achieved by using complex properties, so that we can bind for both DataSource and SelectedItem property in SfAutoComplete control. We have prepared a sample for the sample. Please find the sample and code form below. 
 
 
public class CountryList 
    { 
        private ObservableCollection<string> countryNames; 
 
        public ObservableCollection<string> CountryNames 
        { 
            get { return countryNames; } 
            set 
            { 
                countryNames = value; 
                RaisePropertyChanged("CountryNames"); 
            } 
        } 
 
        private string selectedCountry; 
 
        public string SelectedCountry 
        { 
            get { return selectedCountry; } 
            set{ 
                selectedCountry = value; 
                RaisePropertyChanged("SelectedCountry"); 
            } 
        } 
  } 
 
>>>>>>>>>>> 
     private CountryList countryList; 
 
        public CountryList CountryList 
        { 
            get { return countryList; } 
            set { 
                countryList = value; 
                RaisePropertyChanged("CountryList"); 
            } 
        } 
 
>>>>>>>>>>> 
 
<sfgrid:GridTemplateColumn MappingName="CountryList"> 
                        <sfgrid:GridTemplateColumn.CellTemplate> 
                            <DataTemplate> 
                                <auto:SfAutoComplete DataSource="{Binding CountryList.CountryNames}" SelectedItem="{Binding CountryList.SelectedCountry}" ></auto:SfAutoComplete> 
                            </DataTemplate> 
                        </sfgrid:GridTemplateColumn.CellTemplate> 
                    </sfgrid:GridTemplateColumn> 
 
Sample Link: SfGird_AutoComplete
 
 
Please let us know if this helpful. 
 
Regards 
Vigneshkumar R 


Hi, 

please could you tell me, are there any changes in AutoComplete component? When I wrote first question I`ve got older version (no. 16.4.0.29) and now I`ve got updated ver. no. 16.4.0.44. The code worked great on version 16.4.0.29, but now SelectedItem is always null.

DataGrid is filled correctly, suggestions in template column and AutoComplete entry are correct, but when I select some item of suggested list, selControlKey is empty (null).


this my XAML:

<sf:SfDataGrid x:Name="dataGrid2"

                                            ItemsSource="{Binding Source={x:Reference page}, Path=BindingContext.CKTypeSelector}"

                                            AllowEditing="True"

                                            NavigationMode="Cell"

                                            SelectionMode="Single"

                                            EditTapAction="OnDoubleTap"

                                            EditorSelectionBehavior="MoveLast"

                                            LiveDataUpdateMode="AllowDataShaping"

                                            ColumnSizer="Star"

                                            AutoGenerateColumns="False"

                                            >

                                    <!--SelectedItem="{Binding Source={x:Reference page}, Path=BindingContext.selCKType}"-->

                                    <sf:SfDataGrid.Columns>

                                        <sf:GridTextColumn HeaderText="{extensions:Translate lblName}"

                                                           MappingName="Name"

                                                           AllowEditing="True" />

                                        <sf:GridTemplateColumn HeaderText="{extensions:Translate lblValue}"

                                                               MappingName="ControlKeyList"

                                                               MinimumWidth="200">

                                            <sf:GridTemplateColumn.CellTemplate>

                                                <DataTemplate>

                                                    <sfACompl:SfAutoComplete x:Name="autoComplete"

                                                                             DataSource="{Binding ControlKeyList.PickerControlKeys}"

                                                                             SelectedItem="{Binding ControlKeyList.selControlKey}"

                                                                             DisplayMemberPath="Name"

......


and this is my model:

    public class AccControlKeyTypeSelector : ObservableObject

    {

        public AccControlKeyTypeSelector() { }


        private int _id;

        private string _name;

        private ControlKeyList _controlkeylist;


        public int ID

        {

            get { return _id; }

            set { _id = value; OnPropertyChanged(nameof(ID)); }

        }

        [StringLength(100)]

        public string Name

        {

            get { return _name; }

            set { _name = value; OnPropertyChanged(nameof(Name)); }

        }

        public ControlKeyList ControlKeyList

        {

            get { return _controlkeylist; }

            set { _controlkeylist = value; OnPropertyChanged(nameof(ControlKeyList)); }

        }


    }


    public class ControlKeyList : ObservableObject

    {

        public ControlKeyList() { }


        private ObservableCollection<PickerControlKeys> _pickercontrolkeys;

        private PickerControlKeys _selcontrolkey;


        public ObservableCollection<PickerControlKeys> PickerControlKeys

        {

            get { return _pickercontrolkeys; }

            set { _pickercontrolkeys = value; OnPropertyChanged(nameof(PickerControlKeys)); }

        }

        public PickerControlKeys selControlKey

        {

            get { return _selcontrolkey; }

            set { _selcontrolkey = value; OnPropertyChanged(nameof(selControlKey)); }

        }

    }


public class PickerControlKeys : ObservableObject

    {

        public PickerControlKeys() { }


        private int _ID;

        private string _Name;


        public int ID

        {

            get { return _ID; }

            set { _ID = value; OnPropertyChanged(nameof(ID)); }

        }

        public string Name

        {

            get { return _Name; }

            set { _Name = value; OnPropertyChanged(nameof(Name)); }

        }

    }


Thank you for your help

David




SK Selva Kumar  Veerakrishnan Syncfusion Team January 23, 2019 03:57 AM UTC

Hi David Marek, 

 
Thanks for the response. 

 
We  could not reproduce the issue "SelectedItem of SfAutoComplete is not shown". We have used the sample which have been provided on our previous update with the (16.4.0.44) Syncfusion Nuget. The Selected item get viewed as expected as shown on the Image given below. 
  
  
 
If the issue get reproduced at your end, please update us with the modified sample. This will be helpful for us to provide better solution on this. 

 
Regards, 
Selva Kumar V. 



DM David Marek replied to Selva Kumar  Veerakrishnan January 23, 2019 09:53 AM UTC

Hi David Marek, 

 
Thanks for the response. 

 
We  could not reproduce the issue "SelectedItem of SfAutoComplete is not shown". We have used the sample which have been provided on our previous update with the (16.4.0.44) Syncfusion Nuget. The Selected item get viewed as expected as shown on the Image given below. 
  
  
 
If the issue get reproduced at your end, please update us with the modified sample. This will be helpful for us to provide better solution on this. 

 
Regards, 
Selva Kumar V. 


Hi Selva Kumar

The SfAutoComplete component works correctly but only on UI, not MVVM binding. When I write some part of string to entry, suggestions are shown, I can select one row from suggestions list and after that the selected item is shown in the entry of AutoComplete. User Interface part is correct, selected item is shown in entry.

The problem comes here: SelectedItem property is bound to Model property ControlKeyList.selControlKey. When I select item from suggestions, bound model property is always NULL. Bellow you can find sample printscreens.

Regards,
David







DM David Marek January 23, 2019 10:14 AM UTC

Hi

now i downgrade AutoComplete version to 16.3.0.29 I`ve got it before and function is now correct on all ways of using. No changes in code, only downgrade was made. There is printscreen of current model sate of selControlKey property.



I hope this helps you to solve the problem between versions or write me some answer.

Regards,
David



DR Dhanasekar R Syncfusion Team January 24, 2019 09:49 AM UTC

Hi David, 
 
We have already fixed a similar issue "SelectedItem property does not bind properly to the item selected from drop down". This fix has been included on our latest (16.4.0.48) version. Could you please update our Essential studio version to latest (16.4.0.48) and let us know whether the same issue get reproduced at your end.  
 
This will be helpful for us to provide better solution on this. 
 
Note: The image which has been provided in your previous update was not able to viewed/downloaded from our end. 
 
Regards, 
Dhanasekar 



DM David Marek replied to Dhanasekar R January 28, 2019 11:57 AM UTC

Hi David, 
 
We have already fixed a similar issue "SelectedItem property does not bind properly to the item selected from drop down". This fix has been included on our latest (16.4.0.48) version. Could you please update our Essential studio version to latest (16.4.0.48) and let us know whether the same issue get reproduced at your end.  
 
This will be helpful for us to provide better solution on this. 
 
Note: The image which has been provided in your previous update was not able to viewed/downloaded from our end. 
 
Regards, 
Dhanasekar 


Hi Dhanasekar

today I upgraded the version of SfAutoComplete to ver. 16.4.0.48 and it works correct. The problem was on version 16.4.0.44.

Thank you a lot

Regards
David


DR Dhanasekar R Syncfusion Team January 28, 2019 12:03 PM UTC

Hi David, 
 
Glad that the issue has been resolved. Please let us know if any further assistance. 
 
Regards, 
Dhanasekar 


Loader.
Live Chat Icon For mobile
Up arrow icon