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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Scrollbars

Thread ID:

Created:

Updated:

Platform:

Replies:

121881 Feb 3,2016 08:29 AM UTC Mar 3,2016 09:36 AM UTC ASP.NET Web Forms 7
loading
Tags: Grid
Jorge Pampin
Asked On February 3, 2016 08:29 AM UTC

Hello,

How to configure a Grid (and TreeGrid) with scrollbars into a div that changes its size depen on the size of the widow or it changes the size when the window is resized?

Thanks!

Jayaprakash Kamaraj [Syncfusion]
Replied On February 4, 2016 12:20 PM UTC

Hi Jorge,
We have achieved your requirement “Grid with scrollbars into a div that changes its size depend on the size of the widow” using setDimension method in window.onresize event. Please refer to the below code example, Help document and sample.
Code Example:

<script type="text/javascript">

    window.onresize = function () {

        var gridObj = $("#<%= Grid1.ClientID %>").ejGrid("instance")

        gridObj.setDimension(window.innerWidth, window.innerHeight); // if you want to Grid to adopt with div then you need to give gridObj.setDimension($("div").innerWidth(),$("div").innerHeight)

        gridObj.getContent().ejScroller("refresh");

    }



</script>


Help documentation: http://help.syncfusion.com/js/api/ejgrid#methods:dimension

Sample: http://www.syncfusion.com/downloads/support/forum/121881/ze/SyncfusionASPNETApplication5-492010528

Query : How to configure a TreeGrid with scrollbars into a div that changes its size depen on the size of the widow or it changes the size when the window is resized?

TreeGrid can be made responsive with scrollbar, which resizes on resizing browser window, with the help of “EnableResize” property. Please refer the below code example for details.

<ej:TreeGrid ID="Treegrid" runat="server" EnableResize="true" //… >

//…

</ej:TreeGrid>

We have also prepared a sample based on this and you can find the sample under the following location.
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/ResponsiveTreeGrid1278720700
Regards,
Jayaprakash K.


Jorge Pampin
Replied On February 23, 2016 09:30 AM UTC

Hello,

In the first sample, the grid doesn't change the height property properly. You can reproduce it setting a fixed value:

   gridObj.setDimension(window.innerWidth,100);

Thanks!

Jayaprakash Kamaraj [Syncfusion]
Replied On February 24, 2016 09:49 AM UTC

Hi Jorge,
We are sorry for the inconvenience.  
In the previously attached code, we have wrongly mentioned setdimension parameter as width and height. In the setDimension method, we need to pass parameter as height and width manner and we suggest the same Please refer to the below code example and sample.
Code example:

<script type="text/javascript">

window.onresize = function () {

        var gridObj = $("#<%= Grid1.ClientID %>").ejGrid("instance")

    gridObj.setDimension(100, window.innerWidth);// height and width

    }



</script>



Sample: http://www.syncfusion.com/downloads/support/forum/121881/ze/SyncfusionASPNETApplication5-1369908599
Regards,
Jayaprakash K.

Jorge Pampin
Replied On February 29, 2016 10:13 AM UTC

Hello,

When the grid is resized to 1920×1080 pixels, the last column is not shown correctly. I've attached two samples.

Thanks!

Attachment: Columns_f24535a3.rar

Jayaprakash Kamaraj [Syncfusion]
Replied On March 1, 2016 10:49 AM UTC

Hi Jorge,
We were unable to reproduce the reported  issue while using setDimension method. Please try your sample with default responsive support of ejGrid instead of using setDimension method. To enable response in ejGrid, we need to enable isResponsive property as true and set the minWidth property. Please refer to the below code example, help documentation and sample.
Code Example:

<ej:Grid ID="Grid1" 

            DetailsTemplate="#tabGridContents" 

           MinWidth="700" IsResponsive="true"

            allowFiltering="true"
               runat="server">
….


Help Documentation for IsResponsive: http://help.syncfusion.com/js/api/ejgrid#members:isresponsive
Help Documentation for MinWidth: http://help.syncfusion.com/js/api/ejgrid#members:minwidth
Help Documentation for Responsive: http://help.syncfusion.com/js/grid/responsive
Sample: http://www.syncfusion.com/downloads/support/forum/121881/ze/SyncfusionASPNETApplication564382789
Regards,
Jayaprakash K.

Jorge Pampin
Replied On March 2, 2016 06:04 PM UTC

Hello,

That works. But if you set AllowResize to True and the horizontal scroll is shown, the grid doesn't fit the height.

Thanks!

Jayaprakash Kamaraj [Syncfusion]
Replied On March 3, 2016 09:36 AM UTC

Hi Jorge,
Thanks for the update.

We have tested the allowResizing property with IsResponsive in Grid, but we were unable to reproduce the issue. Please share the following information to find the cause of the issue and provide a solution,                                                                          

1.       An issue reproducing sample if possible or sample hosted link or replicate the issue in the following sample.

2.       Syncfusion Essential studio, browser and operating system version.

3.       Client side codes of the sample.

4.       Attach a screenshot of the issue.

Sample: http://www.syncfusion.com/downloads/support/forum/121881/ze/SyncfusionASPNETApplication5386066429

Regards,

Jayaprakash K.


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

;