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.

Adding AllowScrolling=true grid columns appear compressed

Thread ID:

Created:

Updated:

Platform:

Replies:

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

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 12:32 PM

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 12:33 PM

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 05:35 AM

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.

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.

;