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.

How to scrolling depending on row size of the grid

Thread ID:

Created:

Updated:

Platform:

Replies:

121381 Dec 8,2015 07:02 AM Dec 9,2015 12:36 AM JavaScript 2
loading
Tags: ejGrid
Gomtesh
Asked On December 8, 2015 07:02 AM

I have refered link for scrolling grid
http://jsplayground.syncfusion.com/Sync_xggq0wva
Sample

but i have to allow scrolling if record more than 6 other wise i don want scrolling

using angulaJS

Gomtesh
Replied On December 8, 2015 07:42 AM

I want to do functionality just like frozen rows but see all remaining records after scrolling

Balaji Marimuthu [Syncfusion]
Replied On December 9, 2015 12:36 AM

Hi Gomtesh,

Thanks for contacting Syncfusion support.

Your requirement is achieved by using the DataBound client side event in Grid, which triggered the grid is bound with data during initial rendering. Refer to the code example and sample as below.

http://jsplayground.syncfusion.com/bufpqxxg


<div id="Grid" ej-grid e-datasource="data" e-databound="databound">

                    <div e-columns>

                        <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div>

                        <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div>

                        <div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="110"></div>

                        <div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="120"></div>

                        <div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="120"></div>

                        <div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="120"></div>


                    </div>
                </div>

    $scope.databound = function (args) {

                if (this.model.dataSource().length > 6)

                    $("#Grid").ejGrid({

                        scrollSettings: { width: 500, height: 500 },

                        allowScrolling: true,

                    });
            }



Help document: http://help.syncfusion.com/js/api/ejgrid#events:databound
http://help.syncfusion.com/js/api/ejgrid#members:scrollsettings

Either way to disable scrolling:

Based on the scrollSettings height and width property only, the scrollbar will be displayed in Grid that is the default behavior. So if you use 6 records in Grid, you can set the scrollSettings height to total row height of 6 records ( default row height 33px & total height 6*33 = 198).

Sample: http://jsplayground.syncfusion.com/zfoyniro


<div id="Grid" ej-grid e-datasource="data" e-databound="databound" e-allowscrolling="true" e-scrollsettings-width="700" e-scrollsettings-height="198">

                    <div e-columns>

                        <div e-column e-field="EmployeeID" e-headertext="Employee ID" e-textalign="right" e-width="90"></div>

                        <div e-column e-field="LastName" e-headertext="Last Name" e-textalign="left" e-width="90"></div>

                        <div e-column e-field="FirstName" e-headertext="FirstName" e-textalign="left" e-width="90"></div>

                        <div e-column e-field="Title" e-headertext="Title" e-textalign="left" e-width="90"></div>

                        <div e-column e-field="City" e-headertext="City" e-textalign="left" e-width="90"></div>

                        <div e-column e-field="Country" e-headertext="Country" e-textalign="left" e-width="90"></div>


                    </div>
                </div>


Query: I want to do functionality just like frozen rows but see all remaining records after scrolling
We are not clearly understand your requirement, so could you please try the above methods and if we misunderstood your requirement please share more information about your requirement that will be helpful to provide the better solution at the earliest.

Regards,
Balaji Marimuthu

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.

;