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.

Horizontal scrolling not work to update syncfusion version

Thread ID:

Created:

Updated:

Platform:

Replies:

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

Hi, we're using syncfusion grid with scrolling. In this day we update the version of the 12.2.0.36 to 12.4.0.34. 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 12.2.0.36 but in the version 12.4.0.34 not work

aspx

<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>
                                                <Columns>
                                                    <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" />
                                                </Columns>
                                                <ToolbarSettings ShowToolbar="false" ToolbarItems="edit,delete,update,cancel,search"></ToolbarSettings>
                                                <ScrollSettings Width="900"></ScrollSettings>
                                            </ej:Grid>

Attached image with the error

Attachment: error_scrolling_eb1727c2.rar

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

Hi Roimer,

We are unable to reproduce the issue at our end.

We have prepared sample (in version 12.4.0.34) 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.

Regards,
Seeni Sakthi Kumar S.


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

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 04:52 PM

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

Attachment: PruebaSyncfusion2_1e25758d.rar

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On March 15, 2016 11:28 AM

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.


    <script>

        $('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"

        })

    </script>



Regards,

Seeni Sakthi Kumar S.


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.

;