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.

How to use parameter in data source

Thread ID:

Created:

Updated:

Platform:

Replies:

132620 Sep 12,2017 10:00 AM Sep 15,2017 06:04 AM ASP.NET MVC 3
loading
Tags: AutoComplete
Carlos Junior
Asked On September 12, 2017 10:00 AM

Hi!
I have the following autocomplete in view:
@Html.EJ().Autocomplete("selectCar").Datasource(dataSource => dataSource.URL(Url.Action("DataSource", "Autocomplete")).Adaptor(AdaptorType.UrlAdaptor)).Query("ej.Query()").AutocompleteFields(af => af.Text("text")).Width("300").FilterType(FilterOperatorType.Contains)


In the controller I have the following method:

public JsonResult DataSource() {
    
IEnumerable Data = setListSource();      return Json(Data, JsonRequestBehavior.AllowGet); }

But I would like to use the parameterized controller method as follows:

public JsonResult DataSource(int categoryId) {
    
IEnumerable Data = setListSource(
categoryId);      return Json(Data, JsonRequestBehavior.AllowGet);
}


How do I configure the view autocomplete datasource with the controller parameter?
Regards,
Junior



Arun Palaniyandi [Syncfusion]
Replied On September 13, 2017 08:17 AM

Hi  Carlos Junior, 

Thanks for contacting Syncfusion support.   

You can achieve this requirement by binding the change event for Autocomplete and don’t bind any datasource for the Autocomplete initially. Then in the Autocomplete change event handler using AJAX call pass the entered value to the controller and then do the server side filtering using the sent value. On AJAX success get the JSON data and update the private variable for suggestion list and call _doneRemaining private method the popup will be populated with server data. Hence this will avoid loading all the data source at initial and will load data only when searched and also shows the data with our filtered values.  Please refer the code below 



View: 
 
  @Html.EJ().Autocomplete("selectCar").Query("ej.Query()").ClientSideEvents(ce => ce.Change("onchange")).AutocompleteFields(af => af.Text("text")).Width("300").FilterType(FilterOperatorType.Contains) 
 
 
<script> 
    function onchange(e) { 
        searchTerm = $('#selectCar').val(); 
        $.ajax({ 
            type: 'POST', 
            url: '@Url.Action("DataSource", "Autocomplete")', 
            data: { 
                categoryId: parseInt(searchTerm) 
            }, 
            success: function (response) { 
                var ac = $("#selectCar").ejAutocomplete("instance"); 
                if (response != null && response.length) { 
                    ac.suggestionListItems = response; 
                    ac._doneRemaining(); 
                } else 
                    ac._hideResult(); 
            } 
        }); 
    } 
 
</script> 
 
 
Controller: 

 
        public JsonResult DataSource(int categoryId) 
        { 
 
            if (categoryId == null) 
            { 
                return null; 
            } 
            else 
            { 
                IEnumerable Data = setListSource(); 
 
 
                // Filtering based on the searched word i.e int category can be used to filter here 
 
 
 
                return Json(Data, JsonRequestBehavior.AllowGet); 
 
            } 
        } 


Please refer to the following sample:  

 
Please check the shared sample and if the sample still not meet your requirement, please send us more information so that we will provide a solution.         
         
Regards,         
Arun P.     


Carlos Junior
Replied On September 13, 2017 11:47 PM

Ok Arun!

Thank you very much!

Regards,
Junior


Arun Palaniyandi [Syncfusion]
Replied On September 15, 2017 06:04 AM

Hi Carlos Junior, 
 
We are glad that our solution has resolved your issue. 
 
Please let us know if you have any queries in future. 
 
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.

;