jQuery UI Widgets Forums Grid No data to display

Tagged: , , ,

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

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • No data to display #112642

    Akhil_Menon
    Participant

    Hello,

    I’m trying to get my web service to bind with the jqxGrid.

    This is the code for my webservice:

    
    [WebMethod]
    [ScriptMethod(ResponseFormat = ResponseFormat.Json)]
    public string GetAllSupportLogTableRecords()
            {
                JavaScriptSerializer js = new JavaScriptSerializer();
                string SupportLogTable = String.Empty;
                DataTable SupportLogCatcher = new DataTable();
                SupportLogCatcher = PAPM.SupportLogDalVar.SupportLogTable();
                if (SupportLogCatcher != null)
                {
                    SupportLogTable = JsonConvert.SerializeObject(SupportLogCatcher);
                }
                else
                    SupportLogTable = js.Serialize("No records to display!");
                return SupportLogTable;
            }

    The web service works the way it should and gives me the output desired. I did invoke it separately to find out.

    This is the jquery code that I am using.

    
    <title id='Description'>Support Log</title>
        <link href="Scripts/JQWidgets/jqx.base.css" rel="stylesheet" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1 minimum-scale=1" />
        <script src="Scripts/JQWidgets/jquery-1.11.1.min.js"></script>
        <script src="Scripts/JQWidgets/jqxcore.js"></script>
        <script src="Scripts/JQWidgets/jqxbuttons.js"></script>
        <script src="Scripts/JQWidgets/jqxscrollbar.js"></script>
        <script src="Scripts/JQWidgets/jqxmenu.js"></script>
        <script src="Scripts/JQWidgets/jqxgrid.js"></script>
        <script src="Scripts/JQWidgets/jqxgrid.selection.js"></script>
        <script src="Scripts/JQWidgets/jqxgrid.columnsresize.js"></script>
        <script src="Scripts/JQWidgets/jqxdata.js"></script>
        <script src="Scripts/JQWidgets/demos.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
    
                
                // prepare the data
                var source =
                {
                    type: "GET",
                    datatype: "json",
                    datafields: [
                        { name: 'desc_counter' },
                        { name: 'Ticket_Id'},
                        { name: 'Date_of_entry'},
                        { name: 'Datetime'},
                        { name: 'Project_Id'},
                        { name: 'Source_of_entry'},
                        { name: 'Client_Name'},
                        { name: 'HandledBy'},
                        { name: 'Area_of_system'},
                        { name: 'Description_of_problem'},
                        { name: 'Resolution_of_problem'},
                        { name: 'Attachments'},
                        { name: 'Final_status'},
                        { name: 'Assisted_By'},
                        { name: 'DD_number'},
                        { name: 'Report_Date'},
                        { name: 'Assigned_To'},
                        { name: 'UpdatedDatetime'},
                        { name: 'Projected_date'},
                        { name: 'Sub_System'},
                        { name: 'Assigned_To_Rec'},
                        { name: 'HandledBy_Rec'},
                        { name: 'Assigned_ToUG'},
                        { name: 'Priority_Level'}
                    ],
                    id: 'desc_counter',
                    url: "GetSupportLogTableProxy.asmx/GetAllSupportLogTableRecordsProxy",
                    cache: false
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) { },
                    loadComplete: function (data) { },
                    loadError: function (xhr, status, error) { }
                });
    
                $("#grid").jqxGrid(
                    {
                        source: dataAdapter,
                        columnsresize: true,
                        columns: [
                            { text: 'Description Counter', datafield: 'desc_counter' },
                            { text: 'Ticket ID', datafield: 'Ticket_Id' },
                            { text: 'Date of Entry', datafield: 'Date_of_entry' },
                            { text: 'Date Time', datafield: 'Datetime' },
                            { text: 'Project ID', datafield: 'Project_Id' },
                            { text: 'Source of Entry', datafield: 'Source_of_entry' },
                            { text: 'Client Name', datafield: 'Client_Name' },
                            { text: 'Handled By', datafield: 'HandledBy' },
                            { text: 'Area of System', datafield: 'Area_of_system' },
                            { text: 'Description of Problem', datafield: 'Description_of_problem' },
                            { text: 'Resolution of Problem', datafield: 'Resolution_of_problem' },
                            { text: 'Attachments', datafield: 'Attachments' },
                            { text: 'Final Status', datafield: 'Final_status' },
                            { text: 'Assisted By', datafield: 'Assisted_By' },
                            { text: 'DD Number', datafield: 'DD_number' },
                            { text: 'Report Date', datafield: 'Report_Date' },
                            { text: 'Assigned To', datafield: 'Assigned_To' },
                            { text: 'Updated DateTime', datafield: 'UpdatedDatetime' },
                            { text: 'Projected Date', datafield: 'Projected_date' },
                            { text: 'Sub System', datafield: 'Sub_System' },
                            { text: 'Assigned to Rec', datafield: 'Assigned_To_Rec' },
                            { text: 'Handled by Rec', datafield: 'HandledBy_Rec' },
                            { text: 'Assigned to UG', datafield: 'Assigned_ToUG' },
                            { text: 'Priority Level', datafield: 'Priority_Level' },
                        ]
                    });
            });
        </script>

    When I build the solution, the grid loads with the column names but displays the message “No data to display”. My URL is correct. I have tested it out with an AJAX request. What am I missing here?

    No data to display #112650

    admin
    Keymaster

    Hi Akhil_Menon,

    Not sure what the dataAdapter returns as data. Did you test with dataAdapter’s loadComplete or downloadComplete? Another option is to handle the data request through normal AJAX and on success bind the Grid through the dataAdapter binding to local data.

    Best Regards,
    Peter Stoev

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

    No data to display #112658

    Akhil_Menon
    Participant

    Hello Peter,

    I tried binding the grid in my AJAX function like so –

    $(document).ready(function () {
    
                
    
                var dataViewer = $('#box2');
                
    
                $.ajax({
                    type: "GET",
                    dataType: "json",
                    cache: false,
                    async: true,
                    url: 'GetSupportLogTableProxy.asmx/GetAllSupportLogTableRecordsProxy',
                    success: function (data) {
                        // prepare the data
                        var source =
                        {
                            type: "GET",
                            datatype: "json",
                            datafields: [
                                { name: 'desc_counter' },
                                { name: 'Ticket_Id' },
                                { name: 'Date_of_entry' },
                                { name: 'Datetime' },
                                { name: 'Project_Id' },
                                { name: 'Source_of_entry' },
                                { name: 'Client_Name' },
                                { name: 'HandledBy' },
                                { name: 'Area_of_system' },
                                { name: 'Description_of_problem' },
                                { name: 'Resolution_of_problem' },
                                { name: 'Attachments' },
                                { name: 'Final_status' },
                                { name: 'Assisted_By' },
                                { name: 'DD_number' },
                                { name: 'Report_Date' },
                                { name: 'Assigned_To' },
                                { name: 'UpdatedDatetime' },
                                { name: 'Projected_date' },
                                { name: 'Sub_System' },
                                { name: 'Assigned_To_Rec' },
                                { name: 'HandledBy_Rec' },
                                { name: 'Assigned_ToUG' },
                                { name: 'Priority_Level' }
                            ],
                            id: 'desc_counter',
                            url: "GetSupportLogTableProxy.asmx/GetAllSupportLogTableRecordsProxy",
                            cache: false
                        };
    
                        var dataAdapter = new $.jqx.dataAdapter(source)
    
                        $("#grid").jqxGrid(
                            {
                                source: dataAdapter,
                                columnsresize: true,
                                localdata: data,
                                columns: [
                                    { text: 'Description Counter', datafield: 'desc_counter' },
                                    { text: 'Ticket ID', datafield: 'Ticket_Id' },
                                    { text: 'Date of Entry', datafield: 'Date_of_entry' },
                                    { text: 'Date Time', datafield: 'Datetime' },
                                    { text: 'Project ID', datafield: 'Project_Id' },
                                    { text: 'Source of Entry', datafield: 'Source_of_entry' },
                                    { text: 'Client Name', datafield: 'Client_Name' },
                                    { text: 'Handled By', datafield: 'HandledBy' },
                                    { text: 'Area of System', datafield: 'Area_of_system' },
                                    { text: 'Description of Problem', datafield: 'Description_of_problem' },
                                    { text: 'Resolution of Problem', datafield: 'Resolution_of_problem' },
                                    { text: 'Attachments', datafield: 'Attachments' },
                                    { text: 'Final Status', datafield: 'Final_status' },
                                    { text: 'Assisted By', datafield: 'Assisted_By' },
                                    { text: 'DD Number', datafield: 'DD_number' },
                                    { text: 'Report Date', datafield: 'Report_Date' },
                                    { text: 'Assigned To', datafield: 'Assigned_To' },
                                    { text: 'Updated DateTime', datafield: 'UpdatedDatetime' },
                                    { text: 'Projected Date', datafield: 'Projected_date' },
                                    { text: 'Sub System', datafield: 'Sub_System' },
                                    { text: 'Assigned to Rec', datafield: 'Assigned_To_Rec' },
                                    { text: 'Handled by Rec', datafield: 'HandledBy_Rec' },
                                    { text: 'Assigned to UG', datafield: 'Assigned_ToUG' },
                                    { text: 'Priority Level', datafield: 'Priority_Level' },
                                ]
                            });
                    },
                    error: function (error) {
                        dataViewer.html(JSON.stringify(error));
                    }
                });
            });

    The result is the JSON string from the Web Service. It didn’t bind to the columns of the grid. Could you please point out the corrections I need to make to the code? Could you also help me out with resources that I can use to test out the dataAdapter loadComplete and downloadComplete functionality?

    Regards,
    Akhil

    No data to display #112672

    admin
    Keymaster

    Hi Akhil,

    I think that this part of the code should be updated:

    ` var source =
    {
    type: “GET”,
    datatype: “json”,
    datafields: [
    { name: ‘desc_counter’ },
    { name: ‘Ticket_Id’ },
    { name: ‘Date_of_entry’ },
    { name: ‘Datetime’ },
    { name: ‘Project_Id’ },
    { name: ‘Source_of_entry’ },
    { name: ‘Client_Name’ },
    { name: ‘HandledBy’ },
    { name: ‘Area_of_system’ },
    { name: ‘Description_of_problem’ },
    { name: ‘Resolution_of_problem’ },
    { name: ‘Attachments’ },
    { name: ‘Final_status’ },
    { name: ‘Assisted_By’ },
    { name: ‘DD_number’ },
    { name: ‘Report_Date’ },
    { name: ‘Assigned_To’ },
    { name: ‘UpdatedDatetime’ },
    { name: ‘Projected_date’ },
    { name: ‘Sub_System’ },
    { name: ‘Assigned_To_Rec’ },
    { name: ‘HandledBy_Rec’ },
    { name: ‘Assigned_ToUG’ },
    { name: ‘Priority_Level’ }
    ],
    id: ‘desc_counter’,
    url: “GetSupportLogTableProxy.asmx/GetAllSupportLogTableRecordsProxy”,
    cache: false
    };`

    As this is done in AJAX success callback function, my suggestion is to bind to localdata instead of url. Binding to Array with localdata is demonstrated in this example: https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/bindingtoarray.htm?light

    Hope this helps you.

    Best regards,
    Peter Stoev

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

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

You must be logged in to reply to this topic.