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

Adding AllowScrolling=true grid columns appear compressed

Thread ID:

Created:

Updated:

Platform:

Replies:

121487 Dec 19,2015 05:29 PM UTC Dec 21,2015 10:35 AM UTC ASP.NET Web Forms 3
loading
Tags: Grid
Roimer Machacón Otero
Asked On December 19, 2015 05:29 PM UTC

Hi we're using the grid and need have scrolling for the columns, now when the grid is empty the columns appear compressed having a parent very big for use of space.

Here is the definition of the grid:

<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
                                                <ej:Grid ID="gvsDetalles" runat="server" AllowGrouping="false" AllowSelection="true" TabIndex="-1" Locale="es-ES"
                                                    Selectiontype="Single" AllowSorting="false" AllowPaging="False" AllowFiltering="false" RowSelected="filaSeleccionada"
                                                    AllowScrolling="false" AllowResizing="false">
                                                    <GroupSettings EnableDropAreaAutoSizing="False"></GroupSettings>
                                                    <Columns>
                                                        <ej:Column Field="lote" HeaderText="<%$ Resources:Generales, lote %>" IsPrimaryKey="true" Width="12%" />
                                                        <ej:Column Field="siembra" HeaderText="<%$ Resources:Generales, siembra %>" IsPrimaryKey="true" Width="12%" />
                                                        <ej:Column Field="idActividad" HeaderText="<%$ Resources:Generales, actividad %>" Width="12%" />
                                                        <ej:Column Field="actividad" HeaderText="<%$ Resources:Generales, actividad %>" Width="24%" />
                                                        <ej:Column Field="unidad" HeaderText="<%$ Resources:Generales, unidad %>" Width="12%" />
                                                        <ej:Column Field="rendimiento" HeaderText="<%$ Resources:Generales, rendimiento %>" Width="12%" />
                                                        <ej:Column Field="tipoLabor" HeaderText="<%$ Resources:Generales, observaciones %>" Width="12%" />
                                                        <ej:Column Field="tarifa" HeaderText="<%$ Resources:Generales, tarifa %>" Width="12%" />
                                                        <ej:Column Field="cantidadLabor" HeaderText="<%$ Resources:Generales, observaciones %>" Width="12%" />
                                                        <ej:Column Field="jornal" HeaderText="<%$ Resources:Generales, jornal %>" Width="12%" />
                                                    </Columns>
                                                </ej:Grid>
                                            </div>
                                        </div>

Roimer Machacón Otero
Replied On December 19, 2015 05:32 PM UTC

And here attached a image showing how to see in the screen.

Attachment: error_grid_648a964a.rar

Roimer Machacón Otero
Replied On December 19, 2015 05:33 PM UTC

Hi amend the definition of the grid:


<div class="row">
<div class="col-xs-12 col-md-12 col-lg-12">
<ej:Grid ID="gvsDetalles" runat="server" AllowGrouping="false" AllowSelection="true" TabIndex="-1" Locale="es-ES"
Selectiontype="Single" AllowSorting="false" AllowPaging="False" AllowFiltering="false" RowSelected="filaSeleccionada"
AllowScrolling="true" AllowResizing="false">
<GroupSettings EnableDropAreaAutoSizing="False"></GroupSettings>
<Columns>
<ej:Column Field="lote" HeaderText="<%$ Resources:Generales, lote %>" IsPrimaryKey="true" Width="12%" />
<ej:Column Field="siembra" HeaderText="<%$ Resources:Generales, siembra %>" IsPrimaryKey="true" Width="12%" />
<ej:Column Field="idActividad" HeaderText="<%$ Resources:Generales, actividad %>" Width="12%" />
<ej:Column Field="actividad" HeaderText="<%$ Resources:Generales, actividad %>" Width="24%" />
<ej:Column Field="unidad" HeaderText="<%$ Resources:Generales, unidad %>" Width="12%" />
<ej:Column Field="rendimiento" HeaderText="<%$ Resources:Generales, rendimiento %>" Width="12%" />
<ej:Column Field="tipoLabor" HeaderText="<%$ Resources:Generales, observaciones %>" Width="12%" />
<ej:Column Field="tarifa" HeaderText="<%$ Resources:Generales, tarifa %>" Width="12%" />
<ej:Column Field="cantidadLabor" HeaderText="<%$ Resources:Generales, observaciones %>" Width="12%" />
<ej:Column Field="jornal" HeaderText="<%$ Resources:Generales, jornal %>" Width="12%" />
</Columns>
</ej:Grid>
</div>
</div>

Saravanan Arunachalam [Syncfusion]
Replied On December 21, 2015 10:35 AM UTC

Hi Roimer,

Thanks for contacting Syncfusion Support.

We are unable to reproduce the reported issue while render the Grid inside the Tab but we have faced the issue “Grid exceeds the Tab control while enable the scroller of Gridbecuase if we render the Grid within Tab control, Grid control will render before Tab control which was the cause of the issue.

So we suggest you to remove the AllowScrolling and ScrollSettings from the Grid properties while initializing and apply the Grid scroller properties in the “ItemActive” event of Tab control to resolve this issue. Please refer the following code example.

<ej:Tab ID="DefaulttabContent" runat="server" ClientSideOnActive="onClientActive">

        . . .

</ej:Tab>

                       

<script type="text/javascript">

         function onClientActive(e) {

            //Apply the scroller property for Grid in ItemActive event of Tab

             if (e.activeIndex == 0)

                $(".e-grid").ejGrid({ allowScrolling: true, scrollSettings: { width: 700, height: 300 } });


         }

</script>


If still you are facing the issue, could you please share the following details?

       Essential studio product version.

       Confirm whether you have used ejTab or bootstrap tab.

       Did you bind the empty datasource to the Grid control?

       Share your view page code

       If possible reproduce the issue in the below sample

We have created a sample that you can download from the below link.

http://www.syncfusion.com/downloads/support/forum/121487/ze/URL_adaptor(ASP)_(2)1305586721

Regards,

Saravanan A.


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

;