Grid Inserting 2000+ Blank Rows

[DavidParticipant]

I followed the tutorial for loading JSON data from an ASP.NET Web Service. The call to the Web Service works perfectly and returns the expected JSON string with 6 elements. Here is the returned results:

[{“PROSPECT_ID”:9,”CONTACT_NAME”:”Jane Doe”,”COMPANY”:null,”ADDRESS”:”232″,”CITY”:”dsw”,”STATE”:”JH”,”ZIP”:678451234,”EMAIL”:”jdoe@ha.com”,”PHONE”:”(888) 888-8888″,”URL”:null,”REQUESTED”:”Someone”,”THANK_YOU_TYPE_ID”:”S”,”THANK_YOU_TYPE”:”Standard”,”SOLICITATION_TYPE_ID”:3,”SOLICITATION_TYPE”:”Letter”,”DISPLAY_TEXT”:”Jane Doe”},{“PROSPECT_ID”:5,”CONTACT_NAME”:”Jim Beam”,”COMPANY”:null,”ADDRESS”:”123 Somewhere”,”CITY”:”Cincinnati”,”STATE”:”OH”,”ZIP”:45220,”EMAIL”:”jimbeam@alcohol.com”,”PHONE”:”(555) 555-5555″,”URL”:null,”REQUESTED”:”Something”,”THANK_YOU_TYPE_ID”:”P”,”THANK_YOU_TYPE”:”Personal”,”SOLICITATION_TYPE_ID”:5,”SOLICITATION_TYPE”:”Web Site”,”DISPLAY_TEXT”:”Jim Beam”},{“PROSPECT_ID”:7,”CONTACT_NAME”:”Johnny Walker”,”COMPANY”:null,”ADDRESS”:”444″,”CITY”:”Bellevue”,”STATE”:”KY”,”ZIP”:34709,”EMAIL”:null,”PHONE”:null,”URL”:null,”REQUESTED”:”fhkedfh”,”THANK_YOU_TYPE_ID”:”P”,”THANK_YOU_TYPE”:”Personal”,”SOLICITATION_TYPE_ID”:4,”SOLICITATION_TYPE”:”Email Only”,”DISPLAY_TEXT”:”Johnny Walker”},{“PROSPECT_ID”:8,”CONTACT_NAME”:”Jose Cuervo”,”COMPANY”:null,”ADDRESS”:”2″,”CITY”:”jhn”,”STATE”:”JK”,”ZIP”:78797,”EMAIL”:null,”PHONE”:”(444) 444-4444″,”URL”:null,”REQUESTED”:”dwdwd”,”THANK_YOU_TYPE_ID”:null,”THANK_YOU_TYPE”:null,”SOLICITATION_TYPE_ID”:0,”SOLICITATION_TYPE”:null,”DISPLAY_TEXT”:”Jose Cuervo”},{“PROSPECT_ID”:11,”CONTACT_NAME”:”John Doe”,”COMPANY”:”Hello”,”ADDRESS”:”12345″,”CITY”:”Somewhere”,”STATE”:”OH”,”ZIP”:444444444,”EMAIL”:”hello@aol.com”,”PHONE”:”(123) 456-7890″,”URL”:null,”REQUESTED”:”dwdwdwd”,”THANK_YOU_TYPE_ID”:”N”,”THANK_YOU_TYPE”:”None”,”SOLICITATION_TYPE_ID”:2,”SOLICITATION_TYPE”:”Personal Contact”,”DISPLAY_TEXT”:”[Hello] John Doe”},{“PROSPECT_ID”:3,”CONTACT_NAME”:”David Jackson”,”COMPANY”:”Microsoft”,”ADDRESS”:”123 Somewhere”,”CITY”:”Cincinnati”,”STATE”:”OH”,”ZIP”:45255,”EMAIL”:”someone@somewhere.com”,”PHONE”:”(123) 456-7890″,”URL”:null,”REQUESTED”:”Give me stuff”,”THANK_YOU_TYPE_ID”:”S”,”THANK_YOU_TYPE”:”Standard”,”SOLICITATION_TYPE_ID”:1,”SOLICITATION_TYPE”:”Do Not Contact”,”DISPLAY_TEXT”:”[Microsoft] David Jackson”}]

Here is the code used to load the grid:

var dataAdapter = new $.jqx.dataAdapter(
        {
            datatype: 'json',
            url: 'DataAccessLayer.asmx/GetProspectsJSON',
            datafields: [
                { name: 'PROSPECT_ID' },
                { name: 'CONTACT_NAME' },
                { name: 'COMPANY' },
                { name: 'ADDRESS' },
                { name: 'CITY' },
                { name: 'STATE' },
                { name: 'ZIP', type: 'int' },
                { name: 'EMAIL' },
                { name: 'PHONE' },
                { name: 'URL' },
                { name: 'REQUESTED' },
                { name: 'THANK_YOU_TYPE_ID' },
                { name: 'THANK_YOU_TYPE	' },
                { name: 'SOLICITATION_TYPE_ID', type: 'int' },
                { name: 'SOLICITATION_TYPE' },
                { name: 'DISPLAY_TEXT' }
            ]
        },
        {
            contentType: 'application/json; charset=utf-8',
            formatData: function (data) {
                return {"AuctionID": AuctionID};
            },
            downloadComplete: function (data, textStatus, jqXHR) {
                return data.d;
            }
        }
    );

    $("#Prospects").jqxGrid({
        width: '100%',
        source: dataAdapter,
        autoheight: true,
        pageable: true,
        sortable: true,
        filterable: true,
        columnsmenu: false,
        showfilterrow: true,
        columns: [
            { text: 'Company', datafield: 'COMPANY', width: '10%', filtertype: 'input' },
            { text: 'Name', datafield: 'CONTACT_NAME', width: '15%', filtertype: 'input' },
            { text: 'Email', datafield: 'EMAIL', width: '18%', filtertype: 'input' },
            { text: 'Phone', datafield: 'PHONE', width: '10%', sortable: false, filtertype: 'input' },
            { text: 'Requested', datafield: 'REQUESTED', width: '30%', sortable: false, filtertype: 'input' },
            { text: 'Thank You', datafield: 'THANK_YOU_TYPE', width: '7%', filtertype: 'list' },
            {
                text: 'Edit',
                width: '5%',
                align: 'center',
                filterable: false,
                sortable: false,
                cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                    return glyphiconGridButton('edit-prospect', 'Edit', 'pencil', row);
                }
            },
            {
                text: 'Delete',
                width: '5%',
                align: 'center',
                filterable: false,
                sortable: false,
                cellsrenderer: function (row, columnfield, value, defaulthtml, columnproperties) {
                    return glyphiconGridButton('delete-prospect', 'Delete', 'trash', row);
                }
            }
        ]
    });
}

When the grid loads there are 2062 rows, all blank. Does anyone know what the problem is?

[DimitarParticipant]

Hello David,

Are you sure that data.d returns the expected data? If the data you shared is not the one from data.d, please post it. Please also share if there are any console errors and make sure you are using the latest version of jQWidgets (3.7.1).

Best Regards,
Dimitar

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

[DavidParticipant]

Dimitar,

I have confirmed that I am using version 3.7.1. The data posted above is from the data.d object in the downloadComplete event. There are no console errors when using IE11 Developer Tools.

Thanks

[DavidParticipant]

Dimitar,

While I don’t understand the bug in the Grid which causes the above, I did find out how to fix the issue.

downloadComplete: function (data, textStatus, jqXHR) {
    return JSON.parse(data.d);
}

[DimitarParticipant]

Hi David,

Maybe you have not JSON encoded your result array before echoing it in your PHP code? You can see this done in all the PHP demos about binding.

Best Regards,
Dimitar

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

[DavidParticipant]

Dimitar,

I do not use PHP and I encoded my ASP.NET Web Service return as the instructions on the website said:

public static string ToJSON(DataTable MyTable)
{
    List<Dictionary<string, object>> JSON = new List<Dictionary<string, object>>();
    foreach (DataRow Row in MyTable.Rows)
    {
        Dictionary<string, object> JSONRow = new Dictionary<string, object>();
        foreach (DataColumn col in MyTable.Columns)
        {
            JSONRow[col.ColumnName] = Row[col];
        }
        JSON.Add(JSONRow);
    }
    JavaScriptSerializer serializer = new JavaScriptSerializer();
    return serializer.Serialize(JSON);
}

[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public string GetProspectsJSON(
    int AuctionID
)
{
    DataTable Results = GetProspects(AuctionID);
    return Helper.ToJSON(Results);
}

[DimitarParticipant]

Hi David,

I am sorry for oversighting that you use ASP.NET Web Service. Please note, however, that the DeserializeObject method is used in our example, not Serialize.

Best Regards,
Dimitar

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

[Author]

Posts