Solved

KendoDropDownList WebService JSON serilaized list datasource

Posted on 2014-11-19
5
246 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:Mauro Cazabonnet
  • 3
5 Comments
 
LVL 4

Author Comment

by:Mauro Cazabonnet
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:Mauro Cazabonnet
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:
Mauro Cazabonnet 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

How our DevOps Team Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Making a simple AJAX shopping cart Couple years ago I made my first shopping cart, I used iframe and JavaScript, it was very good at that time, there were no sessions or AJAX, I used cookies on clients machine. Today we have more advanced techno…
This article will show, step by step, how to integrate R code into a R Sweave document
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
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 …

825 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