How to get seleted object from autocomplete selected item

[Kumar Bharat]

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

[Kumar Bharat]

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

[Dimiter Madjarov]

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