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.

AutocompleteProperties

Thread ID:

Created:

Updated:

Platform:

Replies:

121010 Nov 2,2015 06:46 PM Nov 16,2015 10:08 AM ASP.NET MVC 5
loading
Tags: AutoComplete
Prasanth
Asked On November 2, 2015 06:46 PM

Hi there,

I am having trouble with using AutocompleteFor based on some data on database.  Basically I want the users to be able to select a User by searching for the user Name on the AutocompleteFor and able to use the selected UserID to execute some backend code.

I have tried to use AutocompleteProperties but no luck there.

If you could guide me with a sample that would be great

Regards
Prasanthan


Harikrishnan P [Syncfusion]
Replied On November 3, 2015 07:09 AM

Hi Prasanthan,


Thanks for contacting Syncfusion support.


We can get the ID of the selected item using the “getSelectedItems()” method. In the “select” event of the Autocomplete, we can pass the value to the server side. Please refer the below code snippets,



[View]


@Html.EJ().AutocompleteFor(model => model.value, (Syncfusion.JavaScript.Models.AutocompleteProperties)ViewData["auto"])





<script>

    var key, selectedItems, autocompleteobj;

    function onSelect(args) {

        key = [];

        //Object for Autocomplete created

        autocompleteobj = $("#value").data("ejAutocomplete");

        //get the data from getSelectedItems()

        selectedItems = autocompleteobj.getSelectedItems();

        //Key is obtained here

        var itemId = selectedItems[0].uniqueKey;

        $.ajax({

            url: '/Autocomplete/ID',

            type: 'POST',

            data: { id: itemId },

            success: function (result) {

                alert("ID posted sucessfully");

            },

            error: function (e) {

                console.log(e);

            }

        });

    }

</script>




[controller]


        public ActionResult Index()

        {

            AutocompleteProperties auto = new AutocompleteProperties();

            auto.DataSource = GetDataSource();

            auto.FilterType = FilterOperatorType.Contains;

            AutocompleteFields fld = new AutocompleteFields();

            auto.Select = "onSelect";

            ViewData["auto"] = auto;


            return View();

        }




We have also attached a sample for your reference, please check it.


Sample Location: autocompleteFor sample


Please refer the following link to know about the important features available in each EJMVC component


http://help.syncfusion.com/aspnetmvc

 

Our EJMVC components are created as wrapper for the JavaScript components. So the API, and events will be the same in both JS and EJMVC components. You can refer the following API reference section present in our online JS help document to know about the list of API’s, methods and events supported by each components.


http://docs.syncfusion.com/js/api/ejaccordion


Regards,

HariKrishnan


Prasanth
Replied On November 3, 2015 08:48 AM

Hi HariKrishnan

Thanks for the prompt reply.  But I think I failed to explain bit more in the last post.  The model for example has multiple properties in it.  E.g Project class is model with Leader is one of the property in the Project class where users can use Autocomplete to search for the people to select the user and fill in other properties in Project class.  I am bit stuck on how to store the selected value in the complex object (Project) so during HttpPost on the controller side the Project instance is populated with the data.  

I will give it a go but still struggling, if you have infor on this please share it could save lot of time for me :-)

I am using MVC5, syncfusion 13.3.0.7 (visual studio 2015)

Regards
Prasanth

Harikrishnan P [Syncfusion]
Replied On November 4, 2015 01:34 AM

Hi Prasanthan,


Thanks for your update.


We need to bind the “Project” class in the controller action during HttpPost, so the Autocomplete selected value will be automatically populated in the controller action. Please refer the below code snippet,




        [HttpPost]

        public ActionResult ProjectDetails(Project model)

        {

            ViewBag.LeaderName = model.Leader;

            return View(model);

        }




In the “model” you will get the values of all the properties in the “Project” class. We have attached a sample for your reference, please check it.


Sample Location: AutocompleteFor sample


If you need further assistance, kindly get back to us with more information and we will be happy to help you.


Regards,

HariKrishnan


Prasanth
Replied On November 14, 2015 07:46 AM

Hi Harikrishnan,

Sorry for getting back late, I have managed to implement what I was after.  As I had Model which had ID reference property of another Model, I worked around the issue by having two Html entries (one for showing the Autocomplete and hidden field for storing selected ID via AutoComplete).  

For example let's say I had project manager associated with a project.  On project add/edit cshtml I would have the following

@Html.HiddenFor(model => model.ProjectManager)
@Html.EJ().AutocompleteFor(model => model.ProjectManagerName, (Syncfusion.JavaScript.Models.AutocompleteProperties)ViewData["autoProjManager"])

<script>
    function onAutCompleteSelect(args, nameField, idField) {
        var key, selectedItems, autocompleteobj;
        key = [];
        //Object for Autocomplete created
        autocompleteobj = $(nameField).data("ejAutocomplete");
        //get the data from getSelectedItems()

        selectedItems = autocompleteobj.getSelectedItems();
        //Key is obtained here
        var itemId = selectedItems[0].ID;

        document.getElementById(idField).value = itemId;
    }

    function onProjectManagerSelect(args) {
        onAutCompleteSelect(args, "#ProjectManagerName", 'ProjectManager');
    }


and on the controller side set up Autocomplete properties as per your example.

AutocompleteProperties autoProjManager = Utility.GetUserAutoComplete();
autoProjManager.Select = "onProjectManagerSelect";
ViewData["autoProjManager"] = autoProjManager;

I have got the page working.  Just wanted to know whether this is the right approach or is there any other appropriate approach to the solution.  

Regards
Prasanthan

Manikandan Mariappan [Syncfusion]
Replied On November 16, 2015 10:08 AM

Hi Prasanthan,
 
We have analyzed your code that you have provided, and it seems to be the proper way for getting ID in controller page.
 
If you need any further assistance we will happy to help you.
 
Regards,
M.Manikandan

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.

;