Data binding and change datasource

[Jacob]

Hello,

There is some issue about Autocompletefor need your help.

Query 1, This is the demo code I used:

                @Html.EJ().AutocompleteFor(x => x.Name, new Syncfusion.JavaScript.Models.AutocompleteProperties()
           {
               DataSource = (IEnumerable<CarsList>)ViewBag.datasource,
               AutocompleteFields = new AutocompleteFields() { Text = "text", Key = "uniqueKey" }
           }
).MultiSelectMode(MultiSelectModeTypes.VisualMode).ShowPopupButton(true).Width("100%")

The issue is, if the autocomplete's value is select form viewBag datasource and sumit this form the server will get the "uniqueKey". When I select something and submit this form, server get this data of Name property's value is the "uniqueKey", not the "text". And if action return this view with a same data, the View will display the "uniqueKey" like the TextBoxFor. Is there any solution could help when action return the "uniqueKey", and could compile to "text"?

Query 2 , For example, there have a AutocompleteFor but the selection with different category needs replace. How should I do to change the autocomplete's datasource?

Thank you very much.

Best regards.

[Arun Palaniyandi]

Hi Jacob,   

   

Thanks for contacting Syncfusion Support.   

   

Query1:”The issue is, if the AutoComplete’s value is select form viewBag datasource and summit this form the server will get the "uniqueKey" not the "text" value”.   

   

As per the Autocomplete current behavior, it will post only the key value in the controller. This is because, the key value is only maintained in the hidden value of the Autocomplete and hence only this gets posted in the controller. If we want to post the text value to the server, we need to manually pass it using AJAX. Using the Autocomplete ClientSide select event, we need to take the text value and then through the button click we can pass it the server side.   

   

   

Query 2 , For example, there have a AutocompleteFor but the selection with different category needs replace. How should I do to change the AutoComplete’s datasource?.   

   

We can achieve this requirement by manually Cascading the Autocomplete, using our ClientSideEvent select of Autocomplete. Then use AJAX success function to create the autocomplete component object of the second Autocomplete and then pass the value to data Source from controller using this object.   

   

   

Note:  In this AutocompleteFor cascading sample, we didn’t replace the datasource, but we have changed the values based on the selection of the first Autocomplete. Please check the sample, whether it related to your requirement.   

   

We have also prepared a sample based on both of your requirements below.   

http://www.syncfusion.com/downloads/support/forum/132991/ze/AutocompleteFor-493822690   

   

   

Please check the shared details, sample and let us know if we have misunderstood any of your requirement.  If so, provide more details on (AutocompleteFor selection with different category needs replace) requirement so that we can check and provide an appropriate solution.           

   

   

Regards,   

Arun P.   

[Jacob]

The Query 2 is solved, thanks so much.

But the Query 1, I'm sorry I wasn't express my ideas clearly.

I really like the idea which post the key value to the server, it would help for increase system flexibility. And it maybe could be used like "Tags", to record the user's choice, save it as a key value in database.

Take this case you give as an example:

I change the CarsList class:

     public class CarsList
    {
        public string uniqueKey { get; set; }
        public string text { get; set; }
        public string company { get; set; }
    }

And the controller:

        List<CarsList> cars = new List<CarsList>();

        public ActionResult AutocompleteFeatures()
        {
            cars.Add(new CarsList { uniqueKey = "1", text = "Audi S6", company = "Audi" });
            cars.Add(new CarsList { uniqueKey = "2", text = "Austin-žHealey", company = "Austin" });
            cars.Add(new CarsList { uniqueKey = "3", text = "BMW š7", company = "BMW" });
            cars.Add(new CarsList { uniqueKey = "4", text = "Chevrolet Camarož", company = "Chevrolet" });
            cars.Add(new CarsList { uniqueKey = "6", text = "Ferrari š360", company = "Ferrari" });
            cars.Add(new CarsList { uniqueKey = "7", text = "Honda S2000", company = "Honda" });
            cars.Add(new CarsList { uniqueKey = "8", text = "Hyundai Santroš", company = "Hyundai" });
            cars.Add(new CarsList { uniqueKey = "9", text = "Isuzu Swift", company = "Isuzu" });
            cars.Add(new CarsList { uniqueKey = "10", text = "Jaguar XJS", company = "Jaguar" });
            cars.Add(new CarsList { uniqueKey = "11", text = "iLotus Esprit", company = "Lotus" });
            cars.Add(new CarsList { uniqueKey = "12", text = "Mercedes-Benz", company = "Mercedes" });
            cars.Add(new CarsList { uniqueKey = "13", text = "Toyota ž2000GT", company = "Toyota" });
            cars.Add(new CarsList { uniqueKey = "14", text = "Volvo P1800", company = "Volvo" });

            ViewBag.datasource = cars;

            var model = new Story {
                //Name = "Audi S6"
                Name = "1"
            };

            return View(model);
        }

To achieve this function, now have a problem is when I return a model to the view, the AutocompleteFor display the string not compile as the viewbag datasource gave.

I want I could use only the key value from the client to the server and back to the client.

Thank you,

Best regards.

[Arun Palaniyandi]

Hi Jacob,    

    

Thanks for your update. 

 

We were able to reproduce the issue with displaying the model value passed instead of compiling the key with the datasource text. To overcome this issue and display corresponding text based on key, we suggest you to use the create event of our Autocomplete and to set the text value using the selectValueByKey property via setmodel. Please find the below code snippet for more references. 

 

  @Html.EJ().AutocompleteFor(x => x.Name, new Syncfusion.JavaScript.Models.AutocompleteProperties() 

           { 

               DataSource = (IEnumerable<CarsList>)ViewBag.datasource, 

               AutocompleteFields = new AutocompleteFields() { Text = "text", Key = "uniqueKey" } 

           } 

  ).MultiSelectMode(MultiSelectModeTypes.VisualMode).ShowPopupButton(true).Width("100%").ClientSideEvents(c => c.Select("onSelect").Create("onCreate")) 

 

<script> 

function onCreate(args) { 

 

          this.clearText(); // clears the Autocomplete values 

          this.setModel({selectValueByKey:@Model.Name})//setting the text value based on keyvalue got 

 

        } 

</script> 

We have also prepared a sample for your reference below. 

http://www.syncfusion.com/downloads/support/forum/132991/ze/AutocompleteFor_(3)-1911181565 

 

 

Please let us know if you have queries further. 

 

Regards, 

Arun P. 

[Jacob]

Hello, Arun

Thanks for this solution, it work well.

But I have to add a new issue about AllowAddNew.

If I set the AllowAddNew(true), it will create a new value to the autocomplete input but have no key value.

So I need a function when I create a new text value, it will post the only new text value to the server, then save it and get the key value back to the client, and use AJAX success function to push the back data object to the ejAutocomplete's dataSource.

Thank you so much

Best regards.

[Arun Palaniyandi]

Hi Jacob,     

     

Thanks for your update.  

 

Query1:” If I set the AllowAddNew(true), it will create a new value to the autocomplete input but have no key value” 

 

 

Yes, the added the new value will be only in the suggestion list with the entered text value but no key value is added. Hence in order to add the key value to the newly added value, we need to manually add the text and key value in JSON format and then push that new value to our datasource using select event.  

Query2: ” I need a function when I create a new text value, it will post the only new text value to the server, then save it and get the key value back to the client, and use AJAX success function to push the back data object to the ejAutocomplete's dataSource.” 

 

 

Based on your requirement, please find the below code snippet of selecting the new text value will post only that text value to the server, then save it and get the key value back to the client, and use AJAX success function to push the back data object to the ejAutocomplete's dataSource. 

 

 

function onSelect(args){ 

 

        textval = args.value; 

 

        if(args.text.indexOf('Add New') >= 0){ 

            var newval = args.text.replace('(Add New)',''); 

            $.ajax({ 

                url: '@Url.Action("Autocompletenewtext", "Autocomplete")', 

                data: { stringtextnew: newval.trim() }, 

                type: 'POST', 

                dataType: "json", 

                success: function (response) { 

                    var ac = $("#Name").ejAutocomplete("instance"); 

                             ac.model.dataSource.push({text:response[0].text,uniqueKey:response[0].uniqueKey,company:response[0].company}); 

                    ac._doneRemaining(); 

 

                } 

            }); 

            

        } 

    } 

 

[HttpPost] 

        public ActionResult Autocompletenewtext(Story model, string stringtextnew) 

        { 

 

            cars.Add(new CarsList { uniqueKey = 15, text = stringtextnew, company = "Newcompany" }); // Give your key value here 

 

            return Json(cars); 

            

        } 

 

We have also prepared a sample for your reference below.  

http://www.syncfusion.com/downloads/support/forum/132991/ze/AutocompleteFor_(4)1805069619 

  

  

Please let us know if you have queries further.  

  

Regards,  

Arun P.