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.

Horizontal scrolling not performing in grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121620 Jan 8,2016 01:25 AM Jan 14,2016 02:46 AM JavaScript 5
loading
Tags: ejGrid
Gomtesh
Asked On January 8, 2016 01:25 AM

i have made one sample in jsplayground but its not performing horizontal scrolling

http://jsplayground.syncfusion.com/wsln00cg


Gomtesh
Replied On January 8, 2016 03:40 AM

I have update my sample 


http://jsplayground.syncfusion.com/4clk2oka

Gomtesh
Replied On January 8, 2016 03:45 AM

I have update my sample 


http://jsplayground.syncfusion.com/4clk2oka

I have updated sample because i have to do the functionality without loading ej.web.all.min.js for that i have added all corresponding required js in custom scripts

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On January 11, 2016 01:36 AM

Hi Gomtesh,

In the provided sample, wrong API for scrolling has been given and that is the cause of the problem. You have given e-allowscolling instead of e-allowscolling.

<body>

    <div class="row" ng-controller="PhoneListCtrl">

        <div id="RFQOutboxList" ej-grid e-datasource="RFQOutboxListData" e-columns="RFQOutboxListColumns"

             e-allowscrolling="true" e-scrollsettings="RFQOutboxListScrollSettings">

        </div>

    </div>

    <script>

        angular.module('listCtrl', ['ejangular'])

          .controller('PhoneListCtrl', function ($scope) {

              var columns = [{ field: "RFQNo" },

                               ..  . .  . . .

              { field: "DeliveryDate" }

        ];

        $scope.RFQOutboxListData = data;

        $scope.RFQOutboxListColumns = columns;

        $scope.RFQOutboxListScrollSettings = { width: "auto", height: 300 };

        });

    </script>
</body>


Since, e-allowscrolling is a Boolean property it can be either true/false. Instead of an object, assign them a Boolean value. So, assign them a Booleans value instead of an object. We have also noticed that your sample contain only two records and scroller height is 300px. If the ejGrid content is lesser than the scroller height, the horizontal scroller will not render. We have also noticed that your sample contain only two records but your scroller height is 300px. If the ejGrid content is lesser than the scroller height, the horizontal scroller will not render. We have modified your sample that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/i3v2bf3e

Refer to the Help Document for ejGrid memebers.

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

Regards,
Seeni Sakthi Kumar S.

Gomtesh
Replied On January 13, 2016 01:47 AM

Hi Seeni,

I have used grid in bootstrap tabs for that i have made sample.
the grid scrolling not working for bootstrap tabs

please check the sample i have created..  Sample

http://jsplayground.syncfusion.com/5veni0bs





Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On January 14, 2016 02:46 AM

Hi Gomtesh,

If the width of the columns are not defined, Grid will calculate and define the width based on the element width. But, for hidden element (Grid inside inactive tab), width cannot be calculated, and that is the cause of the problem. So please remove the allowScrolling and scrollSettings property of Grid (id #Div4), which is in inactive tab. When switching to the particular inactive tab, define the scroll width using Bootstrap events. Refer to the following code example.

    <div class="tab-content tab-border">

        <div class="tab-pane active" style="margin-top:10px;" id="Inbox" ng-controller="PhoneListCtrl">

            <div id="Div1" ej-grid e-datasource="RFQOutboxListData" e-columns="RFQOutboxListColumns"

                 e-allowscrolling="true" e-scrollsettings="RFQOutboxListScrollSettings">

            </div>

        </div>

        <div class="tab-pane" id="Outbox" ng-controller="PhoneListCtrl">

            <div id="Div4" ej-grid e-datasource="RFQOutboxListData" e-columns="RFQOutboxListColumns">

            </div>


        </div>

    </div>           


           $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {


                var obj = $("#Div4").ejGrid("instance");

                $("#Div4").ejGrid({ scrollSettings: { width: "100%" } });

                $("#Div4").ejGrid({ scrollSettings: { width: 500 } });


            })


We have modified your sample that can be referred from the following jsPlayground.

http://jsplayground.syncfusion.com/bl2rietc

In the provided sample, you have referred the ej script files multiple times, which will result in conflict. So please avoid this.

Regards,
Seeni Sakthi Kumar 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.

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.

;