jQuery UI Widgets Forums Grid Grid Inserting 2000+ Blank Rows

This topic contains 6 replies, has 2 voices, and was last updated by  Dimitar 9 years, 3 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Grid Inserting 2000+ Blank Rows #68479

    David
    Participant

    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?

    Grid Inserting 2000+ Blank Rows #68483

    Dimitar
    Participant

    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/

    Grid Inserting 2000+ Blank Rows #68486

    David
    Participant

    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

    Grid Inserting 2000+ Blank Rows #68494

    David
    Participant

    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);
    }
    Grid Inserting 2000+ Blank Rows #68577

    Dimitar
    Participant

    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/

    Grid Inserting 2000+ Blank Rows #68728

    David
    Participant

    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);
    }
    Grid Inserting 2000+ Blank Rows #68797

    Dimitar
    Participant

    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/

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.