DataSource refuses to work with DropDownList

4 posts, 0 answers
  1. Kevin
    Kevin avatar
    1 posts
    Member since:
    Mar 2012

    Posted 28 Mar 2012 Link to this post

    In a nutshell, I can not get the Kendo datasource to work with a dropdown list.

    I can use $.ajax to call my web service and populate the dropdown list in the success callback. The same transport mechanism does not work with the datasource.

    Here's the complete code for the page:

    <!DOCTYPE html>
    <html>
        <head>
            <title>Kendo Test</title>
            <link rel="stylesheet" type="text/css" href="../CSS/Kendo/kendo.common.min.css" />
            <link rel="stylesheet" type="text/css" href="../CSS/Kendo/kendo.default.min.css" />
            <script type="text/javascript" src="../js/jQuery/jquery-1.7.js"></script>
            <script type="text/javascript" src="../js/Kendo/kendo.web.min.js"></script>
        </head>
        <body>
            <div>
                <input id="dropdownlist" /> <input id="lstfromajax" />
            </div>
            <div id="ajaxresult"></div>
        </body>
        <script type="text/javascript">
            $(function()
            {   // Make an AJAX call and bind on success - This works!
                $.ajax(
                {   url: "../WebServices/Resources.asmx/JSONLookupGetSurgeons2",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/json; charset=utf-8",
                    data: "{}",
                    success: function(msg)
                    {   // Display returned JSON in result div
                        $('#ajaxresult').html(JSON.stringify(msg.d));
     
                        // Try to use directly in drop down list. This Works!
                        $('#lstfromajax').kendoDropDownList(
                        {   dataTextField: "Name",       
                            dataValueField: "Id",       
                            dataSource:
                            {   data: msg.d,
                                schema:
                                {   model:  kendo.data.Model.define(
                                    {   id: "Id"
                                    })
                                },
                            },
                        });
                    },
                    error: function(e)
                    {   console.log('Ajax error: ' + JSON.stringify(e));
                    }
     
                });
             
            // Now, try to use the web service as a direct data source - This doesn't work!
            $('#dropdownlist').kendoDropDownList(
            {   dataTextField: "Name",       
                dataValueField: "Id",
                dataSource: 
                {   transport:
                    {   read:
                        {   url: "../WebServices/Resources.asmx/JSONLookupGetSurgeons2",
                            type: "POST",
                            dataType: "json",
                            contentType: "application/json; charset=utf-8",
                            data: "{}"
                        },
                        schema:
                        {   data: "d",
                            model:  kendo.data.Model.define(
                            {   id: "Id"
                            })
                        },
                        error: function(e)
                        {   console.log('Datasource error: ' + JSON.stringify(e));
                        }
                    }
                }
            });
            });
    </script>          
    </html>



    I've included a screen snapshot to show the list on the left not working and the list on the right that does work.

    I coded a console.log message in the parseJSON method. As expected, this routine is called twice - once for $.ajax and once for the Kendo datasource. They both display the same result - since they are hitting the same web service.

    If I click the first dropdown list box (the one that's not populated), the browser ultimately complains of a long-running script and/or aborts!

    Please tell me I'm missing something easy. I need to use the CRUD capabilities of the datasource but can't even get the simplest aspect going.

  2. Gerald
    Gerald avatar
    5 posts
    Member since:
    Jun 2012

    Posted 15 Jun 2012 Link to this post

    This works for me. Hope it helps someone.

    Response from server:
    {"d":[{"role":"admin","roleID":1},{"role":"editor","roleID":2},{"role":"guest","roleID":3}]}

    //JS  for kendoDropDownList===========================
    function roleDropDown(container, options) {
        $('<input id="' + options.field + '" />')
        .appendTo(container)
        .kendoDropDownList({
            autoBind: false,
            enabled: true,
            optionLabel: "-- Select Role --",
            dataTextField: "role",
            dataValueField: "roleID",
            dataSource: {
                transport: {
                    read: {
                        url: "Default.aspx/GetDropListData", // WebMethod from Default.aspx.cs
                        contentType: "application/json; charset=utf-8",
                        type: "POST"
                    }
                },
                schema: {
                    data: "d"
                }
            }
        });
    }
    // WebMethod from Default.aspx.cs ======================
    [WebMethod]
            public static object GetDropListData()
            {
                DataTable tbl = new DataTable();
                SqlConnection conn = new SqlConnection("Server=server;Database=dbname;Trusted_Connection=True");
                SqlCommand cmd = new SqlCommand("select role, roleID from roles", conn);
                conn.Open();
                SqlDataReader rdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
                tbl.Load(rdr);
                rdr.Close();
                var result = from DataRow row in tbl.AsEnumerable() select new { role = row.Field<string>("role"), roleID = row.Field<int>("roleID") };
                return result;
            }

  3. Kendo UI is VS 2017 Ready
  4. Kevin
    Kevin avatar
    1 posts
    Member since:
    Apr 2013

    Posted 15 Jan 2014 Link to this post

    Just what I needed!
  5. Rama
    Rama avatar
    1 posts
    Member since:
    Dec 2015

    Posted 11 May Link to this post

    Helped me.

     WebService call.
        $("#clientIdSelection").kendoDropDownList({
                 dataTextField: "clientId",
                 dataValueField: "clientId",
                 dataSource: {
                transport: {
                read: function(e) {
                        console.log("kendoDropDownList ");
                        $hostService.getClientDetails() // callUserService()
                           .then(function(data){
                              console.log("kendoDropDownList ");
                            e.success(data);
                               }).catch(function(exception,cause) {
                                   
                               });
                       
                       
                       
                       }
                    },
                schema: {
                        data: "listClientData"
                    }
                },
                 index: 0,
                 change: onChange
             });

    java script service code

     

    hostsvc.getClientDetails = function() {
    var deferred = $q.defer();
    var restUrl = baseUrl + 'getClientDetails/';
    $http({
    method: 'POST',
    contentType: "application/json; charset=utf-8",
    url: restUrl
    }).success(function(data){
    return deferred.resolve(data);
    }).error(function(response){
    return deferred.reject(response);
    });
    return deferred.promise;
    }

    .html file

     <input id="clientIdSelection" value="1" style="width: 10%;" />

Back to Top
Kendo UI is VS 2017 Ready