We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Horizontal Scroll with Pager

Thread ID:

Created:

Updated:

Platform:

Replies:

120782 Oct 14,2015 04:03 PM UTC Oct 16,2015 11:01 AM UTC JavaScript 4
loading
Tags: ejGrid
Rob ONeill
Asked On October 14, 2015 04:03 PM UTC

Hi,
I have a grid that needs to use paging, and the columns are created dynamically. But when there are large numbers of columns some are lost as they cannot fit on the page, and there is no horizontal scroll to be able to see them.
How do we implement horizontal scroll with paging.

Cheers ... Rob.

$(element).ejGrid({
   dataSource: tableRows, 
   columns: tableColumns, 
   allowKeyboardNavigation: true,
   allowSorting: true,
   allowResizing: true,
   allowGrouping: true,
   allowFiltering: true,
   filterSettings: {filterType: "excel"},
   allowPaging: true,
   pageSettings: { pageSize: 50 }
});

Ragavee U S [Syncfusion]
Replied On October 15, 2015 06:00 AM UTC

Hi Rob,

Thanks for contacting Syncfusion support.

We can achieve the requested behavior by using the scrolling feature for the grid. The scrolling feature can be enabled for the grid using the allowScrolling property of the ejGrid.

Please refer to the API Reference link.

http://help.syncfusion.com/js/api/ejgrid#members:allowscrolling
http://help.syncfusion.com/js/api/ejgrid#members:scrollsettings

We have created a sample, which can be downloaded from the below location.

JS Playground Link: http://jsplayground.syncfusion.com/pv0mlzz0

In the above sample, we have enabled allowScrolling property of the ejGrid.

If the “width” property of the grid columns is set, then the horizontal scroller will be enabled by default based on the content. Else, the grid columns will fit within the page and be displayed; and upon resizing any column, the horizontal scroller will be enabled accordingly.
Regards,
Ragavee U S.

Rob ONeill
Replied On October 15, 2015 10:06 AM UTC

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

Rob ONeill
Replied On October 15, 2015 11:12 AM UTC

To add when looking at the html via developer tools the grid is there, just the width is set to 0px, change that, and the grid appears, but the scrolling is not there. Hope that helps

Ragavee U S [Syncfusion]
Replied On October 16, 2015 11:01 AM UTC

Hi Rob,

We are sorry that we are unable to reproduce the reported issue at our end.

We have created a sample with the provided information, which can be downloaded from the below location.

Sample Link: http://jsplayground.syncfusion.com/rdsbxgbt

Could you please tell us the need to render the grid inside $watch? If you are want to change any of the grid property value when the “$viewContentLoaded” values changes, we suggest you to change the property value using setModel in $watch. Please refer the below code example.

var obj = $("#Grid").ejGrid("instance")
obj.option({pageSettings: { pageSize: 10 }


If the Grid is re rendered for the same id, then issues may arise. So please ensure that you have destroyed the Grid Control before rendering it to the same element using destroy method. 

Please refer to the following API document,

http://docs.syncfusion.com/js/api/ejgrid#methods:destroy

If you are still facing difficulties, please share below details,

1.       If you are rendering the grid inside any other control? If yes, please share the control details and corresponding code snippets.
2.       Is the grid rendered initially when the corresponding element is hidden?
3.       If any script error/ exception obtained, please expand the script error obtained in the browser console (stack trace) and share the screenshot
4.       If possible, reproduce the issue in the above provided sample.

Regards,
Ragavee U S.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;