Solved

KendoDropDownList WebService JSON serilaized list datasource

Posted on 2014-11-19
5
240 Views
Last Modified: 2014-12-29
Hello,
I'm trying to bind a kendodropdownlist data source to an asp.net c# webservice

 <p>
                   <label for="dates">Date:</label><input id="dates" style="width: 270px" />
                </p>
 
 
$("#dates").kendoDropDownList({
            optionLabel: "Select date...",
            dataTextField: "datestamp",
            dataValueField: "datestamp",
            autoBind: false,
            dataSource: {
                transport: {
                    read: {
                        type: "POST",
                        url: "CGCSService.asmx/DropDownListDates",
                        //contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    },
                    success: function (msg) {
                        alert(msg.d)
                        options.success($.parseJSON(msg.d))
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        //alert(textStatus);
                    }
                },
                schema: {
                    data: "datestamp"
                }
            }
        });
 
 
 
 
[WebMethod]
    public String DropDownListDates()
    {
        try
        {
            var connectString = WebConfigurationManager.ConnectionStrings["CGCS"].ConnectionString;
            using (SqlConnection sqlconn = new SqlConnection(connectString))
            {
                using (System.Data.SqlClient.SqlCommand sqlCmd = sqlconn.CreateCommand())
                {
                    sqlCmd.CommandText = "select distinct CONVERT(DATE,datestamp,101) as datestamp from serverdataHistory order by datestamp desc";
                    sqlCmd.CommandTimeout = 0;
                    sqlconn.Open();
 
                    DataSet ds = new DataSet();
                    SqlDataAdapter da = new SqlDataAdapter(sqlCmd);
                    da.Fill(ds);
 
                    return JsonConvert.SerializeObject(ds);
 
                   
                   
                }
            }
        }
        catch (Exception)
        {
            return null;
        }
    }
0
Comment
Question by:mcazabonnet
  • 3
5 Comments
 
LVL 4

Author Comment

by:mcazabonnet
ID: 40453607
Here is the output from the webservice
trying to build out a dropdown list from the webservice output to the kendodropdownlist

{"Table":[{"datestamp":"2014-08-28T00:00:00"},{"datestamp":"2014-08-27T00:00:00"},{"datestamp":"2014-08-26T00:00:00"},{"datestamp":"2014-08-25T00:00:00"},{"datestamp":"2014-08-24T00:00:00"},{"datestamp":"2014-08-23T00:00:00"},{"datestamp":"2014-08-22T00:00:00"},{"datestamp":"2014-08-21T00:00:00"},{"datestamp":"2014-08-20T00:00:00"},{"datestamp":"2014-08-18T00:00:00"},{"datestamp":"2014-08-11T00:00:00"},{"datestamp":"2014-08-04T00:00:00"},{"datestamp":"2014-08-01T00:00:00"},{"datestamp":"2014-07-28T00:00:00"},{"datestamp":"2014-07-01T00:00:00"},{"datestamp":"2014-06-01T00:00:00"},{"datestamp":"2014-05-01T00:00:00"},{"datestamp":"2014-04-01T00:00:00"},{"datestamp":"2014-03-01T00:00:00"},{"datestamp":"2014-02-01T00:00:00"},{"datestamp":"2014-01-01T00:00:00"},{"datestamp":"2013-12-01T00:00:00"},{"datestamp":"2013-11-01T00:00:00"},{"datestamp":"2013-10-01T00:00:00"},{"datestamp":"2013-09-01T00:00:00"},{"datestamp":"2013-08-01T00:00:00"}]}
0
 
LVL 4

Author Comment

by:mcazabonnet
ID: 40470434
$.ajax({
            type: "POST",
            url: "CGCSService.asmx/DropDownListDates",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var data = result.d;
                var obj = JSON.parse(data);
                var datesobj = [];
                datesobj.push({ "name": 'Most Current', "value": 'Most Current' });
                $.each(obj.Table, function (idx, item) {
                    var shortdate = item.datestamp.split('T');
                    datesobj.push({ "name": shortdate[0], "value": shortdate[0] });
                });
                var dates = $("#dates").kendoDropDownList({
                    change: function () {
                        datechange(dates.value());
                    },
                    optionLabel: "Select date...",
                    dataTextField: "name",
                    dataValueField: "value",
                    dataSource: datesobj
                }).data("kendoDropDownList");
            }
        });
0
 
LVL 58

Expert Comment

by:Gary
ID: 40522217
I've requested that this question be deleted for the following reason:

The question has either no comments or not enough useful information to be called an "answer".
0
 
LVL 4

Accepted Solution

by:
mcazabonnet earned 0 total points
ID: 40522216
I was able to address my issue
Here is the solution

$.ajax({
            type: "POST",
            url: "CGCSService.asmx/DropDownListDates",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (result) {
                var data = result.d;
                var obj = JSON.parse(data);
                var datesobj = [];
                datesobj.push({ "name": 'Most Current', "value": 'Most Current' });
                $.each(obj.Table, function (idx, item) {
                    var shortdate = item.datestamp.split('T');
                    datesobj.push({ "name": shortdate[0], "value": shortdate[0] });
                });
                var dates = $("#dates").kendoDropDownList({
                    change: function () {
                        datechange(dates.value());
                    },
                    optionLabel: "Select date...",
                    dataTextField: "name",
                    dataValueField: "value",
                    dataSource: datesobj
                }).data("kendoDropDownList");
            }
        });
0

Featured Post

What Should I Do With This Threat Intelligence?

Are you wondering if you actually need threat intelligence? The answer is yes. We explain the basics for creating useful threat intelligence.

Join & Write a Comment

In this tutorial I will show you how to make a simple HTML bar chart with the usage of WhizBase, If you want more information about WhizBase please read my previous articles at http://www.experts-exchange.com/ARTH_5123186.html (http://www.experts-ex…
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now