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.
Unfortunately, activation email could not send to your email. Please try again.

Dropdownlist cascading with an autocomplete control

Thread ID:

Created:

Updated:

Platform:

Replies:

129348 Mar 14,2017 05:50 AM Mar 15,2017 08:36 AM ASP.NET MVC 1
loading
Tags: AutoComplete
Cholet
Asked On March 14, 2017 05:50 AM

Hello, I would like to use a dropdownlist cascading like in this exemple (http://mvc.syncfusion.com/demos/web/dropdownlist/cascading) but with an autocomplete for the second control.
In the example we can select a group in first control and select a country that be contained in the selected group but I want to enter the first letter of the country to find it.

Thank's for your help.
Cholet

Arun Palaniyandi [Syncfusion]
Replied On March 15, 2017 08:36 AM

Hi Cholet,    
   
Thanks for contacting Syncfusion Support.  
 
Currently it is not possible to cascade between the DropDownList and Autocomplete controls. But we can achieve this requirement manually using the ClientSide “select” event of Dropdownlist. And then in AJAX call take the value from the argument and then pass the to the code behind and do the filtering in the server side with the passed DropDownListValue. Finally in the AJAX success will get the JSON data and  then pass the value to data Source from controller using this object
 
 
CSHTML: 
 
@Html.EJ().DropDownList("groupsList").Datasource((IEnumerable<groups>)ViewBag.datasource).DropDownListFields(f => f.Value("parentId").Text("text")).ClientSideEvents(e => e.Select("onselect")).WatermarkText("Select") 
 
   <script> 
        function onselect(args) { 
            $.ajax({ 
                url: '@Url.Action("AutocompleteFeaturesNew", "Autocomplete")', 
                data: { searchstring: args.value }, 
                type: 'POST', 
                dataType: "json", 
                success: function (result) { 
                    var data = eval(result); 
                    var obj = $('#autocomplete').data("ejAutocomplete"); 
                    obj.option("watermarkText", "select a Country"); 
                    obj.option("dataSource", data); 
                } 
            }); 
        } 
    </script> 
 
Controller: 
 
public JsonResult AutocompleteFeaturesNew(string searchstring) 
        { 
            if (searchstring == "") 
            { 
                return null; 
            } 
            else 
            { 
                var Data = SearchData(); 
                var search = from n in Data where n.Country.ToLower().StartsWith(searchstring.ToLower()) select n; 
                return Json(search, JsonRequestBehavior.AllowGet); 
            }            
        } 
 
Please find the sample below for your reference: 
 
If the above sample and details do not meet your requirement, please give us more information that will help us provide the solution.        
Regards, 
Arun P. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;