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: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Horizontal scrolling not work to update syncfusion version

Thread ID:





122064 Feb 12,2016 05:13 PM UTC Mar 15,2016 03:28 PM UTC ASP.NET Web Forms 4
Tags: Grid
Roimer Machacón Otero
Asked On February 12, 2016 05:13 PM UTC

Hi, we're using syncfusion grid with scrolling. In this day we update the version of the to Now testing the features we found that horizontal scrolling not working, multiple columns being unable to be displayed.

Here is the aspx code that working correctly in the version but in the version not work


<ej:Grid ID="gvsDetalles" runat="server" AllowGrouping="false" AllowSelection="true" TabIndex="-1" Locale="es-ES" AllowScrolling="true"
                                                Selectiontype="Single" AllowSorting="True" AllowPaging="True" AllowFiltering="false" BeforeBatchSave="actualizarRecursos" BatchDelete="limpiarCabeceraRecurso">
                                                <PageSettings PageSize="12" />
                                                <EditSettings AllowAdding="false" AllowEditing="True" AllowDeleting="True" EditMode="Batch"></EditSettings>
                                                <GroupSettings EnableDropAreaAutoSizing="False"></GroupSettings>
                                                    <ej:Column Field="idBalanceInformacionMetereologica" HeaderText="Id" IsPrimaryKey="true" Width="1" Visible="false" />
                                                    <ej:Column Field="fechaLectura" HeaderText="<%$ Resources:Generales, fecha %>" IsPrimaryKey="true" Format="{0:MM/dd/yyyy}" Width="120" />
                                                    <ej:Column Field="temperaturaMaxima" HeaderText="<%$ Resources:BalanceHidrico, temperaturaMaxima %>" Width="120" />
                                                    <ej:Column Field="temperaturaMinima" HeaderText="<%$ Resources:BalanceHidrico, temperaturaMinima %>" Width="120" />
                                                    <ej:Column Field="velocidadVientoPromedio" HeaderText="<%$ Resources:BalanceHidrico, velocidadVientoPromedio %>" Width="120" />
                                                    <ej:Column Field="velocidadVientoMaxima" HeaderText="<%$ Resources:BalanceHidrico, velocidadVientoMaxima %>" Width="120" />
                                                    <ej:Column Field="direccionVientoPromedio" HeaderText="<%$ Resources:BalanceHidrico, direccionVientoPromedio %>" Width="120" />
                                                    <ej:Column Field="direccionVientoMaxima" HeaderText="<%$ Resources:BalanceHidrico, direccionVientoMaxima %>" Width="120" />
                                                    <ej:Column Field="horaDireccionVientoMaxima" HeaderText="<%$ Resources:BalanceHidrico, horaDireccionVientoMaxima %>" Width="120" />
                                                    <ej:Column Field="direccionVientoMinima" HeaderText="<%$ Resources:BalanceHidrico, direccionVientoMinima %>" Width="120" />
                                                    <ej:Column Field="horaDireccionVientoMinima" HeaderText="<%$ Resources:BalanceHidrico, horaDireccionVientoMinima %>" Width="120" />
                                                    <ej:Column Field="humedadPromedio" HeaderText="<%$ Resources:BalanceHidrico, humedadPromedio %>" Width="120" />
                                                    <ej:Column Field="humedadMaxima" HeaderText="<%$ Resources:BalanceHidrico, humedadMaxima %>" Width="120" />
                                                    <ej:Column Field="horaHumedadMaxima" HeaderText="<%$ Resources:BalanceHidrico, horaHumedadMaxima %>" Width="120" />
                                                    <ej:Column Field="humedadMinima" HeaderText="<%$ Resources:BalanceHidrico, humedadMinima %>" Width="120" />
                                                    <ej:Column Field="horaHumedadMinima" HeaderText="<%$ Resources:BalanceHidrico, horaHumedadMinima %>" Width="120" />
                                                    <ej:Column Field="radiacionUltraVioletaPromedio" HeaderText="<%$ Resources:BalanceHidrico, radiacionUltraVioletaPromedio %>" Width="120" />
                                                    <ej:Column Field="radiacionUltraVioletaMaxima" HeaderText="<%$ Resources:BalanceHidrico, radiacionUltraVioletaMaxima %>" Width="120" />
                                                    <ej:Column Field="horaRadiacionUltraVioletaMaxima" HeaderText="<%$ Resources:BalanceHidrico, horaRadiacionUltraVioletaMaxima %>" Width="120" />
                                                    <ej:Column Field="radiacionUltraVioletaMinima" HeaderText="<%$ Resources:BalanceHidrico, radiacionUltraVioletaMinima %>" Width="120" />
                                                    <ej:Column Field="horaRadiacionUltraVioletaMinima" HeaderText="<%$ Resources:BalanceHidrico, horaRadiacionUltraVioletaMinima %>" Width="120" />
                                                    <ej:Column Field="radiacionSolarPromedio" HeaderText="<%$ Resources:BalanceHidrico, radiacionSolarPromedio %>" Width="120" />
                                                    <ej:Column Field="radiacionSolarMaxima" HeaderText="<%$ Resources:BalanceHidrico, radiacionSolarMaxima %>" Width="120" />
                                                    <ej:Column Field="horaRadiacionSolarMaxima" HeaderText="<%$ Resources:BalanceHidrico, horaRadiacionSolarMaxima %>" Width="120" />
                                                    <ej:Column Field="radiacionSolarMinima" HeaderText="<%$ Resources:BalanceHidrico, radiacionSolarMinima %>" Width="120" />
                                                    <ej:Column Field="horaRadiacionSolarMinima" HeaderText="<%$ Resources:BalanceHidrico, horaRadiacionSolarMinima %>" Width="120" />
                                                <ToolbarSettings ShowToolbar="false" ToolbarItems="edit,delete,update,cancel,search"></ToolbarSettings>
                                                <ScrollSettings Width="900"></ScrollSettings>

Attached image with the error

Attachment: error_scrolling_eb1727c2.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On February 15, 2016 09:08 AM UTC

Hi Roimer,

We are unable to reproduce the issue at our end.

We have prepared sample (in version and that can be downloaded from the following location.

Sample: http://www.syncfusion.com/downloads/support/forum/122064/ze/Grid_Test-1484938503

The provided code example and screenshots were not matched each other. So we suggest to share following information which would be helpful to analyse the issue and provide you solution as early as possible.

1)      Correct code example of Grid

2)      Ensure scripts and CSS referred from same version for the project

3)      Modify the attached sample and send to us

4)      Replication procedure for the issue.

Seeni Sakthi Kumar S.

Roimer Machacón Otero
Replied On March 14, 2016 08:44 PM UTC

Hi, attached to this comment the example with the error that occur.

What happens is the following: We've a tab of bootstrap, in each tab have a grid both grids use scrolling and stackedheaders.

Now the grid in the first tab work correctly, but the grid in the second tab that is initially hidden the columns of the grid appear compressed.

Watching in the console we can observe that width of the second grid is rendering with a little width (Attached image in the zip file).

Attachment: PruebaSyncfusion2_c17782bf.rar

Roimer Machacón Otero
Replied On March 14, 2016 08:52 PM UTC

Hi the syncfusion version used is in SO Windows 7, attached the file updated

Attachment: PruebaSyncfusion2_1e25758d.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 15, 2016 03:28 PM UTC

Hi Roimer  ,

While rendering gird in inactive tab, grid is in hidden state. Since grid is in hidden state , scroller doesn’t render properly. To overcome this problem, we need to manually refresh the grid scroller when the tab is get active. Refer to the following code example.


        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {//a[data-toggle="tab"] : Selector for tab

            var obj = $("#g2").ejGrid("instance")

            obj._refreshScroller({ requestType: 'refresh' }) //to refresh the scroller

            obj.getHeaderTable()[0].style.width = obj.getContentTable()[0].style.width = "1100px"




Seeni Sakthi Kumar S.


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.

Please sign in to access our forum

or the page will be automatically redirected to sign-in page in 10 seconds.

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