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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. Horizontal scrolling not performing in grid

Horizontal scrolling not performing in grid

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

http://jsplayground.syncfusion.com/wsln00cg


5 Replies
GO Gomtesh January 8, 2016 08:40 AM UTC

I have update my sample 


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

GO Gomtesh replied to Gomtesh Hatgine January 8, 2016 08:45 AM UTC

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

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 11, 2016 06:36 AM UTC

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.

https://jsplayground.syncfusion.com/i3v2bf3e

Refer to the Help Document for ejGrid memebers.

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

Regards,
Seeni Sakthi Kumar S.

GO Gomtesh January 13, 2016 06:47 AM UTC

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





SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team January 14, 2016 07:46 AM UTC

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.

https://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.

Loader.
Up arrow icon