Using an syncfusion grid to render a table of data. When filtering the "Line Approved Date", the mini window remains in a loading state indefinitely.
The filter function is working for the other columns. Any ideas on how to make it so that the dates appear in filter window?
Here is some code for context:
//note - order of grouping header columns is hard coded
function GetColumns() {
var output = [
{
field: "LineApprovedDate",
headerText: "Line Approved Date",
type: "date",
format: { type: 'date', format: 'MM/dd/yyyy' },
clipMode: 'EllipsisWithTooltip',
width: 70
}
];
return output;
}
window.groupingHeader = function (args) {
'<table class="e-table history-grid-group-headers" style="background: #fafafa;">' + '<tbody>' +
'<td class="e-rowcell group-headercell" role="gridcell" aria-colindex="12">'
+ (item.LineApprovedDate === null ? "" : moment(item.LineApprovedDate).format("MM/DD/YYYY"))+ '</td>' +
'</tr >' + '</tbody></table>';
return groupHeader;
}
//grid configurations
window.SetupGrid = function () {
SetUpGroupingHeaderData();
var opts = {
dataSource: coData,
allowSorting: true,
allowFiltering: true,
filterSettings: { type: 'Excel' },
allowGrouping: true,
groupSettings: {
captionTemplate: '#groupingheader-template',
showDropArea: false,
columns: ["PoLineNumber"]
},
enableHover: false,
allowSelection: false,
height: GetHistoryGridHeight(),
width: '100%',
columns: GetColumns(),
showColumnMenu: true,
columnMenuItems: ['SortAscending', 'SortDescending', 'AutoFit', 'AutoFitAll', 'Filter'],
enableVirtualization: true,
allowResizing: true,
resizeStop: function (args) {
var index = args.column.index;
$('.history-grid-group-headers td:nth-of-type(' + index + ')').outerWidth(args.column.width);
},
clipMode: "EllipsisWithTooltip",
gridLines: "Both",
}
Checking the data from the API call showed that the date related data was being received as a string. Adding the following function converts the date related data to a date type.
data.forEach(function (d) {
if (d.LineApprovedDate != null) {
d.LineApprovedDate = new Date(d.LineApprovedDate);
}
})