scroll is blocked when load data

[Manolo]

Hi,

I load data into a ListBox, and when a user click on item, I want show details from item selected.

It works fine, but when I load data, the scroll of listBox doesn't work.

I atach an example for test. You need check all all teams in dropdownlist and after, click on "generar Informe" to fill the list box with selected items.

After, if you click on list box item, you load an data, but then, the scroll of listbox doesn't work.

Also, when I click on List Item, when the page is reload, the selected item is the next item that I selected

Thanks

[Manolo]

Ups, the attached project

Attachment: Tab_f4737956.zip

[Kasithangam C]

Hi Manolo,

Query 1: the scroll of listbox doesn't work.

Inside the bootstrap class row, you have rendered two div elements with col md class. While specifying the offsets for the col md bootstrap class as 2 and 10 for the corresponding divs, the second column overlaps the first column. So, listbox scroller don’t work. To resolve this, please modify the column range value as shown in the below code:


<code>

<div class="row">

        <div class="col-md-3">

            <ej:ListBox runat="server" ID="lbCiudades" SelectMethod="GetSelectedTeams"  DataTextField="Nombre" DataValueField="Id"

                OnValueSelect="lbCiudades_ValueSelect">

            </ej:ListBox>

        </div>

        <div class="col-md-9">

            <uc1:DatosInformeGasTeam runat="server" ID="DatosInformeGasTeam" />

        </div>

       
    </div>
</code>

Now, listbox scroller will work fine. We have modified the sample based on this and please refer to the following sample:


Sample: Sample

Query 2:  when I click on List Item, when the page is reload, the selected item is the next item that I selected

We are able to reproduce this issue and logged defect report for this. A support incident to track the status of this issue has been created under your account. Please log on to our support website to check for further updates.

https://www.syncfusion.com/account/login?ReturnUrl=%2fsupport%2fdirecttrac%2fincidents  

Please let us know if you have any further query.

Regards,

Kasithangam

[Manolo]

OK, Thank you

[Manolo]

Ups.. two questions more

With this bootstrap configuration there is a lot of separation between controls. How can I reduce this separation?

And, now the grid is not scrolled, I like that the list box and grid has the same size that the page. If the grid need show more columns, I prefer scroll the grid, not the page.

I read that I need set the grid with to 100% but it doesn't work. Only works when I put the grid into div <div class="col-md-12">

I attach an image



Thanks again

[Kasithangam C]

Hi Manolo,

Query 1: With this bootstrap configuration there is a lot of separation between controls. How can I reduce this separation?

While specifying bootstrap column value as 3 and 9, there will be a space between two controls (listbox and grid). To resolve this issue, you can use the bootstrap class column value as 2 and 10. For the issue “Listbox control scroller doesn’t work”, please specify the width for listbox control by using “Width” property as shown in the below code example:

<code>

<div class="col-md-2">

            <ej:ListBox runat="server" ID="lbCiudades" SelectMethod="GetSelectedTeams" Width="190px"  DataTextField="Nombre" DataValueField="Id" OnValueSelect="lbCiudades_ValueSelect">

            </ej:ListBox>

        </div>

        <div class="col-md-10">

            <uc1:DatosInformeGasTeam runat="server" ID="DatosInformeGasTeam" />

        </div>

</code>

Query 2: The grid is not scrolled, I like that the list box and grid has the same size that the page. If the grid need show more columns, I prefer scroll the grid, not the page.

You have used “AllowPaging” property in grid control. This property is used to add pages based on the grid datas so scroller will not be displayed when you load more data’s in the grid. To resolve this issue, Remove “AllowPaging” property and set the “Height” property in grid control to display the scroller. Please refer to the following code example for the same:

<code>

<ej:Grid ID="gridOperacionesTerminadasTipoOperacion" runat="server" AllowFiltering="True" AllowScrolling="True" AllowSorting="True"

                ShowSummary="true" OnServerExcelExporting="gridOperacionesTerminadasTipoOperacion_ServerExcelExporting" Height="150px">

             

            </ej:Grid>

</code>

We have modified your sample based on this and please refer to the following sample:

Sample: Sample

Regards,

Kasithangam

[Manolo]

I,

Thanks for your answer, but in question 2, I refer to horizontal scroll, no vertical.

Also, I prefeer don't use fixed width. It's possible?

[Balaji Marimuthu]

Hi Manolo,

To achieve your requirement we suggest you to use the ScrollSettings width property alone in Grid. Refer to the sample and code example below.
Sample: Tab

<ej:Grid ID="gridOperacionesTerminadasTipoOperacion" runat="server" AllowFiltering="True" AllowScrolling="True" AllowSorting="True"

                ShowSummary="true" OnServerExcelExporting="gridOperacionesTerminadasTipoOperacion_ServerExcelExporting" >

                <ScrollSettings Width="80%" />

                . . .

            </ej:Grid>

Refer to the document and demo in following link:
http://help.syncfusion.com/aspnet/grid/scrolling
http://asp.syncfusion.com/demos/web/grid/scrolling.aspx

Regards,
Balaji Marimuthu