This is a migrated thread and some comments may be shown as answers.

How to get seleted object from autocomplete selected item

2 Answers 353 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Kumar Bharat
Top achievements
Rank 1
Kumar Bharat asked on 30 Apr 2014, 09:42 AM
Hi,

I need to attach an autocomplete to  "ManagerName" and selected manager employeeId should be populated to "EmployeeId".

CSHTML
---------
@Html.TextBoxFor(m => m.ManagerName)
@Html.TextBoxFor(m => m.EmployeeId)

JavaScript
---------------
 $(function () {

 var GetManagerURL = '@Url.Action("GetManager", "Employee", new { Area = "Employee" })';

$("#ManagerName").kendoAutoComplete({
            placeholder: "Enter your manager name",
            minLength: 3,
            dataTextField: "EmployeeName",            
            dataSource: {
                transport: {
                    read: GetManagerURL,
                    parameterMap: function (data) {
                        return {
                            input: $("#ManagerName").val(),
                            take: data.take,
                            skip: data.skip
                        };
                    }
                },               
                select: onManager_select,               
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10
            }
        });

});

  function onManager_select(e) { // debugger is not hitting this function
        alert("select");
        //debugger;
        var selectedOne = $("#ManagerName").dataItem(e.item.index());
        $("#EmployeeId").val(selectedOne.EmployeeId);

    }


Controller
-------------

public JsonResult GetManager(string input, int take, int skip)
       {
            List<EmployeeViewModel> mgrList = new List<EmployeeViewModel>();
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 1, EmployeeName = "Prashad" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 2, EmployeeName = "Ashreewad" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 3, EmployeeName = "Sathish" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 11, EmployeeName = "Prashad1" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 21, EmployeeName = "Ashreewad1" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 31, EmployeeName = "Sathish1" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 12, EmployeeName = "Prashad2" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 22, EmployeeName = "Ashreewad2" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 32, EmployeeName = "Sathish2" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 13, EmployeeName = "Prashad3" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 23, EmployeeName = "Ashreewad3" });
            mgrList.Add(new EmployeeViewModel() { EmployeeId = 33, EmployeeName = "Sathish3" });
            try
            {
                if (!string.IsNullOrWhiteSpace(input))
                {

                    if (mgrList != null)
                    {
                        mgrList = mgrList.Where(e => e.EmployeeName.ToLower().StartsWith(input.ToLower())).Take(take).ToList();
                    }
                }
            }
            catch (Exception ex)
            {
                //
                return null;
            }
            return Json(mgrList, JsonRequestBehavior.AllowGet);
        }

-----------------------------------------------------------

AutoComplete is populated fine.
But when I select an item from the populated list it is not hitting the "select" event function.

So how can we get selected Employee Object?

Thanks & Regards,
Kumar

2 Answers, 1 is accepted

Sort by
0
Kumar Bharat
Top achievements
Rank 1
answered on 30 Apr 2014, 10:07 AM
i change the javascript code like below it works fine

JavaScript
---------------
 $(function () {

$("#ManagerName").kendoAutoComplete({
            placeholder: "Enter your manager name",
            minLength: 3,
            dataTextField: "EmployeeName",
           select: onManager_select,            
            dataSource: {
                transport: {
                    read: GetManagerURL,
                    parameterMap: function (data) {
                        return {
                            input: $("#ManagerName").val(),
                            take: data.take,
                            skip: data.skip
                        };
                    }
                },             
                serverFiltering: true,
                serverPaging: true,
                pageSize: 10
            }
        });

});

  function onManager_select(e) {         
        var selectedOne =  this.dataItem(e.item.index());
        $("#EmployeeId").val(selectedOne.EmployeeId);
    }

I found that "select" event should be written above the "datasource" .
It is not working if, I write "select" event below "datasource"

Thanks

0
Dimiter Madjarov
Telerik team
answered on 01 May 2014, 06:37 AM
Hello Kumar,


This is the correct way to retrieve the dataItem of the selected item. Regarding the place of the select event, it could be written below the dataSource, but not as part of the dataSource configuration.
E.g.
$("#ManagerName").kendoAutoComplete({
   ...     
   dataSource: {
       ...
   },
  select: onManager_select
});

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
AutoComplete
Asked by
Kumar Bharat
Top achievements
Rank 1
Answers by
Kumar Bharat
Top achievements
Rank 1
Dimiter Madjarov
Telerik team
Share this question
or