Table displays but getting "No Data"

[MatthewVParticipant]

I just built a DataTable and all the column headers show but I just get “No Data to Display”. I have checked the URL I have set for the JSON data and when I hit it directly in the browser I get data back. So why can’t jqWidets display at?

<script type="text/javascript">
    $(document).ready(function()
    {
        var url = "~/Timesheet/TimesheetWeeklyOverview";

        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'HoursWorked', type: 'number' },
                { name: 'ProjectCode', type: 'string' },
                { name: 'ProjectDescription', type: 'string' },
                { name: 'TaskCode', type: 'string' },
                { name: 'TaskDescription', type: 'string' },
                { name: 'WeekdayName', type: 'string' },
                { name: 'WorkDescription', type: 'string' }
            ],
            id: 'ID',
            url: url
        };

        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#TimesheetWeeklyOverview").jqxDataTable(
        {
            width: 850,
            pagerButtonsCount: 10,
            source: dataAdapter,
            columnsResize: true,
            columns: [
                { text: 'Hours Worked', dataField: 'HoursWorked' },
                { text: 'Project Code', dataField: 'ProjectCode' },
                { text: 'Project Description', dataField: 'ProjectDescription' },
                { text: 'Task Code', dataField: 'TaskCode' },
                { text: 'Task Description', dataField: 'TaskDescription' },
                { text: 'Day Worked', dataField: 'WeekdayName' },
                { text: 'Work Description', dataField: 'WorkDescription' }
            ]
        });
    });
</script>

        //AJAX: /Timesheet/TimeshetWeeklyOverview
        [Route("TimesheetWeeklyOverview", Name = "Timesheet Weekly Overview")]
        public JsonResult TimesheetWeeklyOverView()
        {
            using (var db = new JobSightDbContext())
            {
                var model = db.Timesheets
                               .Include(timesheet => timesheet.TimesheetHeader)
                               .Include(timesheet => timesheet.Project)
                               .Include(timesheet => timesheet.Task)
                               .Select(timesheet => new TimesheetWeeklyOverviewVM()
                               {
                                   HoursWorked = timesheet.TimeWorked,
                                   ID = timesheet.ID,
                                   ProjectCode = timesheet.Project.Code,
                                   ProjectDescription = timesheet.Project.Description,
                                   TaskCode = timesheet.Task.Code,
                                   TaskDescription = timesheet.Task.Description,
                                   StartDateTime = timesheet.StartDateTime,
                                   WorkDescription = timesheet.WorkDescription
                               }).ToList();

                return Json(model, JsonRequestBehavior.AllowGet);
            }
        }

    public class TimesheetWeeklyOverviewVM
    {
        public int ID { get; set; }
        public string ProjectCode { get; set; }
        public string ProjectDescription { get; set; }
        public string TaskCode { get; set; }
        public string TaskDescription { get; set; }
        public DateTime StartDateTime { get; set; }
        public decimal HoursWorked { get; set; }
        public string WorkDescription { get; set; }

        public string WeekdayName
        {
            get
            {
                return StartDateTime.DayOfWeek.ToString("D");
            }
        }
    }

[ChristopherParticipant]

Hi MatthewV,

can you provide us with a sample of your data so we can use to test your dataTable. The reason for your problem is probably incorrect JSON data.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[MatthewVParticipant]

Here is the JSON being returned by the URL called:

[{"ID":1,"ProjectCode":"CSSI0100002","ProjectDescription":"In-Building - NH Overhead","TaskCode":"INTPROGRA","TaskDescription":"Internal Software Programming","StartDateTime":"\/Date(1468728000000)\/","HoursWorked":6.50,"WorkDescription":"Test","WeekdayName":"0"}]

[MatthewVParticipant]

Incase it matters here are the included jquaery scripts:

            bundles.Add(new StyleBundle("~/Styles/jQWidgetsDataTable")
                   .Include("~/StaticContent/StyleSheets/jQWidgets/jqx.base.css"));

` bundles.Add(new ScriptBundle(“~/Scripts/jQWidgetsDataTable”)
.Include(“~/StaticContent/JavaScripts/jQWidgets/jqxcore.js”,
“~/StaticContent/JavaScripts/jQWidgets/jqxdatatable.js”,
“~/StaticContent/JavaScripts/jQWidgets/jqxdata.js”,
“~/StaticContent/JavaScripts/jQWidgets/jqxbuttons.js”,
“~/StaticContent/JavaScripts/jQWidgets/jqxscrollbar.js”));

[MatthewVParticipant]

Any help please?

[ChristopherParticipant]

Hi MatthewV,

we tested your javascript code with the provided json data and is working properly. The problem must be in your Ajax call. Check the format of the JSON file returned from the “TimesheetWeeklyOverView” method.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[MatthewVParticipant]

What format are you expecting? It is returned in the standard ASP.Net 4.6.1 JSON Result format.

[ChristopherParticipant]

Hi MatthewV,

Why don’t you try to save the JSON data that you retrieve from the AJAX request in a .txt file and pass the address to it to the “url” parameter. You should also add these properties to the jqxDataAdapter:

var dataAdapter = new $.jqx.dataAdapter(source, {
                downloadComplete: function (data, status, xhr) { },
                loadComplete: function (data) { },
                loadError: function (xhr, status, error) { }
});

Also another reason for your problem might be because the server is expecting a POST request while your request is a GET(this is the default).

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[MatthewVParticipant]

Hi Chris,
I took the ouput from the Good URL and placed it in a txt file at the root of c and put that path in for “URL” then I added the additional code from your last post but I have the same problem. As an experiment I change back the URL and set an alert for the loadError function and I get the message “Not Found”

loadError: function (xhr, status, error) { alert(error) }

I don’t understand how this can be failing, I can not see anything missing from my code and your example and your product is supposed to work with asp.net. You said to check the format but what I posted is the exact format so is there a problem with the default format asp.net send back for a Jason respond?

[ChristopherParticipant]

Hi MatthewV,

Check if you’re using the latest version of JQWidgets(4.1.2). The problem is in your backend code. Check again your AJAX method if it returns the same JSON format as the one you’ve provided. Here is your code working with your data(the one you’ve provided), served as a local json object:
https://www.jseditor.io/?key=xb-datatable-example

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[MatthewVParticipant]

Thanks I will take a look at your code example and see what I can’t figure out.

[Author]

Posts