Kendo AutoComplete - AspNet WebService

3 posts, 0 answers
  1. Guna
    Guna avatar
    3 posts
    Member since:
    Mar 2012

    Posted 26 Mar 2012 Link to this post

    I have been struggling to bind an AutoComplete datasource to an AspNet web service throughout the day. But the web service is not called at all. The error routine shows "Internal Server Error" alert.

    Both the web page and the web service are in a folder named "AutoComplete" under the root directory.
    Could anybody please help me?

    Client-Side Code:

    <script type="text/javascript">
            var _rootUrl = '<%=string.Format("{0}{1}/", Request.Url.GetLeftPart(UriPartial.Authority), HttpRuntime.AppDomainAppVirtualPath)%>';
        </script>
        
        <script type = "text/javascript">
        
            $(document).ready(function () 
            {
                $("#TxtName").kendoAutoComplete(
                {
                    change: function (e) 
                    {
                        alert(e);
                        onChange(e);
                    },
                    minLength: 1,
                    dataTextField: "Name",
                    filter: "contains",
                    dataSource: new kendo.data.DataSource(
                    {
                        type: "json",
                        transport: 
                        {
                            read: 
                            {
                                type: "POST",
                                url: _rootUrl + "AutoComplete/WebService2.asmx/GetEmployeesNames",
                                contentType: 'application/json; charset=utf-8',
                                datatype: "json",
                                data: function () 
                                {
                                    alert($("#TxtName").data("kendoAutoComplete").value());
                                    return 
                                    {
                                        Param: $("#TxtName").data("kendoAutoComplete").value()
                                    }
                                } // data
                            }, //read
                            parameterMap: function (options) 
                            {
                                alert(options);
                                return JSON.stringify(options);
                            } // parameterMap
                        }, // transport
                        serverFiltering: true,
                        serverSorting: true,
                        pageSize: 10,
                        schema: 
                        {
                            data: "d"
                        },
                        error: function(e) 
                        {
                            var xhr = e[0];
                            var statusCode = e[1];
                            var  errorThrown = e[2];
                        
                            alert(xhr);
                            alert(statusCode);
                            alert(errorThrown);
                        }
                    })
                }) 
          });
       
        </script>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID = "TxtName" runat = "server" />
        </div>
        </form>
    </body>

    Web Service:
    [WebService(Namespace = "http://tempuri.org/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.Web.Script.Services.ScriptService]
    public class WebService2  : System.Web.Services.WebService 
    {
        public class Employee
        {
            private int _Id;
            private string _Name;
            public int Id
            {
                get { return _Id; }
                set { _Id = value; }
            }
            public string Name
            {
                get { return _Name; }
                set { _Name = value; }
            }
            public Employee() { }
            public Employee(int Id, string Name)
            {
                this.Id = Id; this.Name = Name;
            }
        }

        public WebService2() { }

        [ScriptMethod(UseHttpGet = false, ResponseFormat = ResponseFormat.Json)]
        [WebMethod]
        public List<Employee> GetEmployeesNames(string Param)
        {
            string StrConnectionString = ConfigurationManager.ConnectionStrings["ConnectionStringEmployeesNormalized2"].ConnectionString;
            SqlConnection SqlConnection1 = new SqlConnection(StrConnectionString);
            SqlCommand SqlCommand1 = new SqlCommand("SELECT Id, Name FROM dbo.Employees Where Name Like '" + Param.Trim() + "%'", SqlConnection1);

            DataTable DataTable1 = new DataTable();
            SqlDataAdapter SqlDataAdapter1 = new SqlDataAdapter(SqlCommand1);
            SqlDataAdapter1.Fill(DataTable1);

            List<Employee> List1 = new List<Employee>();
            foreach (DataRow DataRow1 in DataTable1.Rows)
            {
                List1.Add(new Employee(Convert.ToInt32(DataRow1["Id"]), Convert.ToString(DataRow1["Name"])));
            }

            return List1;
        }
    }

  2. Nelson
    Nelson avatar
    12 posts
    Member since:
    Nov 2010

    Posted 31 May 2012 Link to this post

    I too need to be able to bind to an ASP.net datasource for Kendo AutoComplete. I see no examples on how to do this anywhere, and searching hard reveals only an example of binding to a KendoGrid, but it also relies on entity framework so this is not ideal.

    Is there any thorough documentation or answer on how to do this?
  3. Kendo UI is VS 2017 Ready
  4. Sakthivel
    Sakthivel avatar
    6 posts
    Member since:
    Jun 2012

    Posted 14 Jun 2012 Link to this post

    The following is an example how you could bind a Asp Net Webservice to a Kendo AutoComplete plug-in.

    ASPX Page:

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        
        <script src="../../kendoui.web.2012.1.322.open-source/js/jquery.min.js" type="text/javascript"></script>
        <script src="../../JavaScript/JSON2.js" type="text/javascript"></script>
        <script src="../../kendoui.web.2012.1.322.open-source/js/kendo.web.min.js" type="text/javascript"></script>
        <link href="../../kendoui.web.2012.1.322.open-source/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
        <link href="../../kendoui.web.2012.1.322.open-source/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
        <script src="../../kendoui.web.2012.1.322.open-source/source/js/kendo.binder.js" type="text/javascript"></script>
        
        <script type = "text/javascript">
        
            var Employees;
            $(document).ready(function () 
            {
                
                Employees = JSON.parse($("#HdfEmployees").val());
                var autoComplete = $("#TxtName").kendoAutoComplete(
                {
                    minLength: 1,
                    dataSource: 
                    {
                        serverFiltering: true,
                        serverPaging: true,
                        pageSize: 20,
                        transport: 
                        {
                            read: 
                            {
                                url: "Ideal.asmx/GetEmployeesNamesStartingWith",
                                data: function() 
                                {
                                    return {Param: $("#TxtName").data("kendoAutoComplete").value()};
                                },
                                contentType: 'application/json; charset=utf-8',
                                type: 'POST',
                                dataType: 'json'
                            },
                            parameterMap: function(options) 
                            {
                                return kendo.stringify(options);
                            }
                        },
                        schema: 
                        {
                            data: function(data)
                            {
                                return data.d;
                            }
                        }
                    
                    },
                    dataTextField: "Text",
                    dataValueField: "Id",
                    placeholder: "Select Employee...",
                    select: function (data) 
                    { 
                        if (data.item == null) return;
                        var DSEmployees = $("#TxtName").data("kendoAutoComplete").dataSource;
                        Employees.SelectedText = $((data.item)[0]).text();
                        Employees.SelectedValue = ($.grep(DSEmployees.view(), function(Item, Index)
                        {
                            return (Item.Text == Employees.SelectedText);
                        }))[0].Id;
                        $("#HdfEmployees").val(JSON.stringify(Employees));
                        $('#DivMessage').prepend('Name : ' + Employees.SelectedText + ', Id : ' + Employees.SelectedValue + '<br />');
                    } 
                }); 
                

            });
        
        </script>
        
        
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:TextBox ID = "TxtName" runat = "server" />
            <asp:HiddenField ID = "HdfEmployees" runat = "server" />
            &nbsp; &nbsp;
            <asp:Button ID = "BtnSubmit" runat = "server" Text = "Submit" 
                onclick="BtnSubmit_Click" />
            <hr />
            <div id = "DivMessage" runat = "server"> </div>
        </div>
        </form>
    </body>
    </html>


Back to Top