jQWidgets Forums
jQuery UI Widgets › Forums › Grid › No data to display
This topic contains 3 replies, has 2 voices, and was last updated by admin 4 years, 8 months ago.
-
AuthorNo data to display Posts
-
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?
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 StoevjQWidgets Team
https://www.jqwidgets.com/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,
AkhilHi 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 StoevjQWidgets Team
https://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.