I’m at a loss right now, I’m working on a very simple page that consists of a grid that fetches data based on a date from out mySQL DB.
There’s a similar page which works just fine that I’m using as a reference, but for the life of me I can’t get the grid to just display the data bound to it.
This is the function that’s called when the page is loaded, it calls an API that returns a HTTP response with all the data.
$scope.flowGrid = FlowProfilesService.flowProfile;
const start = async function() {
try {
$scope.loading = true;
var tempData = await FlowProfilesService.getAllFlowProfiles();
var date = tempData.data[0].rec_date;
$scope.formattedDate = date.split('T')[0];
$scope.dt = new Date($scope.formattedDate);
console.log($scope.formattedDate);
console.log($scope.dt);
var flowData = await FlowProfilesService.getFlowProfileByDate($scope.formattedDate);
$scope.gridData = flowData.data;
} catch (e) {
console.log("Could not retrieve data ", e);
} finally {
var gridInstance = $("#flowGrid").dxDataGrid("instance");
gridInstance.refresh();
$scope.loading = false;
}
}
All the variables are being populated correctly, there’s multiple valid rows in $scope.gridData
The properties of the grid
this.flowProfile = {
bindingOptions: {
dataSource: 'gridData',
},
allowColumnResizing: false,
height: 800,
columnAutoWidth: true,
columnChooser: {
enabled: true,
mode: "dragAndDrop"
},
rowAlternationEnabled: true,
paging: {
pageSize: 15
},
pager: {
showPageSizeSelector: true,
allowedPageSizes: [15, 25, 50],
showInfo: true
},
stateStoring: {
enabled: true,
type: "localStorage",
storageKey: "storage"
},
scrolling: {
mode: "virtual"
},
There’s zero errors popping up.
I’ve also tried .$apply() along with a timeout. They did nothing either.
Setting the dataSource after fetching the data also didn’t work.
I just don’t understand why this one page isn’t working like the rest of them?