Hi,
I have managed to get it working when the table is populated on the page load, but get a strange result, there is no grid(no columns or rows), just the pager, when the table is loaded by an angularjs async call (broadcast / on). I have attached a zip word doc that contains 2 images of our screen, one when scrolling is not working, and the other when scrolling is not working.
To put into more context we are using angularjs to render the grid. When the data is already available we wait for the page to load (using $scope.$watch("$viewContentLoaded")), and then populate the grid at that point which renders the grid ok. When the data is being fetched by a web api call the page loads, and then when the data is retrieved by the web api call the page receives that data (using $scope.$on("chartDataRetrieved")), and then creates the grid is the same way. It is this way that doesn't render the grid.
Can you help on this ?
HTML
<div ng-controller="tableViewController">
<div class="se-pre-con" ng-show="isLoading">
<i class="fa fa-spinner fa-pulse fa-4x" id="tableProgressIndicator"></i>
</div>
<div ng-show="showError">
<p ng-cloak ng-bind="errorMessage" class="errorChart"></p>
</div>
<div class="center-align">
<span class="chartViewTitle">{{tableTitle}}</span>
<span class="chartViewSubtitle">{{tableSubtitle}}</span>
</div>
<div ng-show="showTable">
<div id="chartTableGrid" ma-dynamic-grid-population></div>
</div>
</div>
CONTROLLER
angular.module('reportingModule')
.controller('tableViewController', ["$scope", "$rootScope", "chartDetailsFormService", "dashboardChartService", "$timeout", function ($scope, $rootScope, chartDetailsFormService, dashboardChartService, $timeout) {
$scope.isLoading = false;
$scope.showTable = false;
$scope.showError = false;
$scope.tableTitle = "";
$scope.tableSubtitle = "";
$scope.$watch("$viewContentLoaded", function () { // cant use ng-init as other controllers havent been instanciated when it executes.
$scope.isLoading = true;
if ($scope.$parent.isPlotChart) {
$scope.tableTitle = chartDetailsFormService.getChartTitle();
$scope.tableSubtitle = chartDetailsFormService.getChartSubtitle();
} else if ($scope.$parent.isMaximisedChart) {
var chartTableData = dashboardChartService.getChartTableData($rootScope.chartInContextId);
if (chartTableData.chartData.chartSeriesCollection.length > 0) {
populateTable(chartTableData);
} else {
showError(chartTableData.errorMessage);
}
}
});
$scope.$on("chartDataRetrieved", function (event, chartTableData) {
populateTable(chartTableData);
});
$scope.$on("chartDataError", function (event, chartTableData) {
showError(chartTableData.errorMessage);
$scope.isLoading = false;
});
$scope.$on("hideChart", function (event) {
hideTable();
});
function populateTable(chartTableData) {
$scope.tableTitle = chartTableData.title;
$scope.tableSubtitle = chartTableData.subtitle;
setDates(chartTableData.tableData.tableRows);
var columns = setColumns(chartTableData.tableData.tableColumns);
$scope.$broadcast("dynamicGridPopulation", columns, chartTableData.tableData.tableRows);
$scope.showTable = true;
$scope.showError = false;
$scope.errorMessage = null;
$scope.isLoading = false;
}
function setDates(tableRows) {
for (var i = 0; i < tableRows.length; i++) {
tableRows[i].dateTime = new Date(tableRows[i].dateTime);
}
}
function setColumns(tableColumns) {
var columns = [];
var dateTimeFormat = "{0:" + getLocaleDateString(window.browserLang) + " HH:mm:ss}";
columns.push({ field: "dateTime", headerText: chartResources.dateTimeHeader, format: dateTimeFormat, width: 150 });
columns.push({ field: "instance", headerText: chartResources.instanceHeader, width: 200 });
for (col in tableColumns) {
columns.push({ field: col, headerText: tableColumns[col], width: 200 });
}
return columns;
}
function showError(errorMessage) {
$scope.showTable = false;
$scope.showError = true;
$scope.tableTitle = "";
$scope.tableSubtitle = "";
$scope.tableRows = [];
$scope.tableColumns = [];
$scope.errorMessage = errorMessage;;
$scope.isLoading = false;
}
function hideTable() {
$scope.showTable = false;
$scope.showError = false;
$scope.tableTitle = "";
$scope.tableSubtitle = "";
$scope.tableRows = [];
$scope.tableColumns = [];
$scope.errorMessage = null;
}
}]);
DIRECTIVE
angular.module("ma.directives")
.directive("maDynamicGridPopulation", [function () {
return {
restrict: "A",
link: function (scope, element, attributes) {
scope.$on("dynamicGridPopulation", function (event, tableColumns, tableRows) {
$(element).ejGrid({
dataSource: tableRows,
allowKeyboardNavigation: true,
allowSorting: true,
allowResizing: true,
allowGrouping: true,
allowFiltering: true,
filterSettings: { filterType: "excel" },
allowPaging: true,
pageSettings: { pageSize: 5 },
allowScrolling: true,
columns: tableColumns
});
});
}
}
}
]);
Attachment:
grid_scrolling_c94b76e.zip
