Scrollbars

[Jorge Pampin]

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]

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]

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]

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]

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]

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]

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]

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.