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');
});
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.