使用CORS使用ASP.NET Core WebAPI数据源填充jqwidgets dataAdapter

Question

I'm trying to fill the jqx.dataAdapter from a asp.net core webapi project using CORS and am able to see the data pass back across to the JQWidgets project until I try to fill the DataAdapter. The jqx.dataAdapter.records does not fill however the jqx.dataAdapter.recordids will fill with the 8 expected rows.

WebAPI project:

// GET api/changelog
[HttpGet]
public JsonResult Get()
{
    IEnumerable<ApplicationChangeEntryExtension> results = null;
    try
    {
       results = (from x in db.tblApplicationChangeLogEntries
                  select new ApplicationChangeEntryExtension()
                  {
                      ID = x.ID,
                      Application = x.Application,
                      Version = x.Version,
                      ReleaseCandidate = x.ReleaseCandidate,
                      IsReleaseCandidate = x.IsReleaseCandidate,
                      CustomerContent = x.CustomerContent,
                      InternalContent = x.InternalContent,
                      DevDate = x.DevDate,
                      TestDate = x.TestDate,
                      PreReleaseDate = x.PreReleaseDate,
                      PreProductionDate = x.PreProductionDate,
                      DeployDate = x.DeployDate
                  });
    }
    catch(Exception exc)
    {
        Console.WriteLine(exc);
    }
    return Json(results);
}

jqwidgets project:

$('#ChangeLogLink').on('click', function (event) {
    $('#popupwindowChangeLog').jqxWindow({
        showCollapseButton: false,
        showCloseButton: true,
        draggable: false,
        isModal: true,
        autoOpen: false,
        height: 500,
        width: 850,
        theme: _Theme,
        modalOpacity: 0,
        initContent: function () {
            var _source = {
                type: 'GET',
                datatype: 'json',
                root: 'results',
                datafields: [
                    { name: 'ID', type: 'integer' },
                    { name: 'Application', type: 'string' },
                    { name: 'Version', type: 'string' },
                    { name: 'ReleaseCandidate', type: 'integer' },
                    { name: 'IsReleaseCandidate', type: 'boolean' },
                    { name: 'CustomerContent', type: 'string' },
                    { name: 'InternalContent', type: 'string' },
                    { name: 'DevDate', type: 'date' },
                    { name: 'TestDate', type: 'date' },
                    { name: 'PreReleaseDate', type: 'date' },
                    { name: 'PreProductionDate', type: 'date' },
                    { name: 'DeployDate', type: 'date' }
                ],
                url: 'http://localhost:2512/api/changelog',
                id: 'ID'
            };

            var _dataAdapter = new $.jqx.dataAdapter(_source);

            $("#divChangeLogListContainer").html('<div id="divChangeLogList"></div>');
            $("#divChangeLogList").jqxDataTable({
                source: _dataAdapter,
                width: '100%',
                height: '100%',
                theme: _integronTheme,
                pageable: true,
                pagerButtonsCount: 5,
                sortable: true,
                filterable: false,
                columnsResize: true,
                pageSize: 25,
                altRows: true,
                columns: [
                    { text: 'ID', datafield: 'ID'},
                    { text: 'Application', datafield: 'Application'},
                    { text: 'Version', datafield: 'Version'},
                    { text: 'Release Candidate', datafield: 'ReleaseCandidate'},
                    { text: 'Is Release Candidate', datafield: 'IsReleaseCandidate'},
                    { text: 'Customer Content', datafield: 'CustomerContent'},
                    { text: 'Internal Content', datafield: 'InternalContent'},
                    { text: 'Customer Order #', datafield: 'CustomerOrderID'},
                    { text: 'Dev Date', datafield: 'DevDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'Test Date', datafield: 'TestDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'PreRelease Date', datafield: 'PreReleaseDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'PreProduction Date', datafield: 'PreProductionDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'},
                    { text: 'Deploy Date', datafield: 'DeployDate', cellsformat: 'M/d/yyyy', cellsalign: 'center', align: 'center'}
                ]
            });
        }
    });
    $('#popupwindowChangeLog').jqxWindow('open');

});

Answer 1

I think you miss the autoBind parameter when creating the data adapter, or calling its dataBind() method.

Alternatively you can also create the data table using asynchronous loading.

See examples for each method at jqwidgets.com