DropDownList has valid source but no items

[MrsDalyParticipant]

I have been wrestling with this for a good while now but still can’t seem to figure it out. I’m currently using an AJAX-Enabled WCF Service to get my data. The jqxDataAdapter seems to be retrieving the data okay but the jqxDropDownList is empty.

Here is my jQuery code:

var userSource = {
            datatype: "json", datafields: [{ name: "FullName" }, { name: "UserID" }], async: false,
            url: '../VMService.svc/GetUserList',
            cache: false, id: "UserID"
        };
        var userDA = new $.jqx.dataAdapter(userSource, {
            downloadComplete: function (data, textStatus, jqXHR) {
                return $.parseJSON(data.d);
            },
            contentType: 'application/json; charset=utf-8'
        });
        $('#userList').jqxDropDownList({ source: userDA, theme: 'energyblue', displayMember: "FullName", valueMember: "UserID", placeHolder: "Select a user...", searchMode: 'containsignorecase' });

Here’s the service method (using JSON.NET to serialize):

[OperationContract]
        [WebGet]
        public string GetUserList()
        {
            WebOperationContext.Current.OutgoingResponse.Headers.Add("Cache-Control", "no-cache");
            SqlConnection usersConn = new SqlConnection(VacationHeader.GetConnectionString());
            SqlCommand usrListCmd = new SqlCommand("usp_GetUserList", usersConn);
            usrListCmd.CommandType = System.Data.CommandType.StoredProcedure;
            usrListCmd.Parameters.AddWithValue("@UserID", int.Parse(HttpContext.Current.Session["UserID"].ToString()));
            SqlDataAdapter usrListAdapter = new SqlDataAdapter(usrListCmd);
            DataSet usrListSet = new DataSet();
            usrListAdapter.Fill(usrListSet);
            // This is the JSON.NET part
            return JsonConvert.SerializeObject(usrListSet, Newtonsoft.Json.Formatting.Indented);
        }

Running $(‘#userList’).jqxDropDownList(‘source’).records in the Chrome Developer Tools console returns the an Array of Objects as it needs to for the DropDownList to work. However, $(‘#userList’).jqxDropDownList(‘getItems’) returns an empty Array. Please help me!

Thanks.

[Peter StoevKeymaster]

Hi MrsDaly,

Ok, please check the userDA.records. If getItems returns empty array, that means that the data binding has failed. You can also add the loadError callback of the dataAdapter which will give more information about the data binding error.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[MrsDalyParticipant]

Peter,

I was able to fix this problem. However the problem was not in my code, but in yours. When the DropDownList goes to initialize the items from the source, it tries to perform a trim on the value. However, my value was a Number and not a String and was, therefore, throwing an exception in that area of the code. Therefore, I had to modify the source in the beforeLoadComplete callback to accommodate for the error. I think a simple addition of quotes would probably do the trick. Thanks anyway.

[Peter StoevKeymaster]

Hi MrsDaly,

If it’s a number, then when you initialize your dataAdapter instance, set the type: “string” in your datafield members.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[Author]

Posts