How to get seleted object from autocomplete selected item

3 posts, 0 answers
  1. Kumar Bharat
    Kumar Bharat avatar
    9 posts
    Member since:
    Feb 2013

    Posted 30 Apr 2014 Link to this post

    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. Kumar Bharat
    Kumar Bharat avatar
    9 posts
    Member since:
    Feb 2013

    Posted 30 Apr 2014 in reply to Kumar Bharat Link to this post

    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

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 01 May 2014 Link to this post

    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.

     
Back to Top