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
close icon

Scrollbars

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!

7 Replies

JK Jayaprakash Kamaraj Syncfusion Team 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.



JP Jorge Pampin 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!


JK Jayaprakash Kamaraj Syncfusion Team 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.


JP Jorge Pampin 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


JK Jayaprakash Kamaraj Syncfusion Team 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.


JP Jorge Pampin 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!


JK Jayaprakash Kamaraj Syncfusion Team 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.


Loader.
Live Chat Icon For mobile
Up arrow icon