Vertical scrollbar not showing when datasource has more than itemsCount value defined in ejListBox

[Juan Jose Uribe]

Hi,

I have defined a listbox with itemsCount = 3 but not scrollbar appears when datasource is greater than that value.

this is my code:

Html listbox definition:

<div class="form-group">

        @Html.Label("Roles", "Rol", new { @class = "control-label" })

        <div>Use Ctrl + clic si necesita seleccionar varios roles.</div>

        <div id="Roles"></div>

        @Html.ValidationMessage("Roles", new { @class = "text-danger" })

    </div>

Javascript definition:

function TraeRoles() {

        $.ajax({

            url: "/contratoroles/TraeRoles?idPais=" + localStorage.getItem("codigoPais"),

            type: "GET",

            cache: true,

            success: function (result) {

                datasourceRoles = ej.parseJSON(result.lista);

                debugger;

                $("#Roles").ejListBox({

                    dataSource: datasourceRoles,

                    fields: { value: "IdTipoRol", text: "TipoRol" },

                    allowMultiSelection: true,

                    itemsCount: 3,

                    select: "NotifFacturacionSISiRolEsDeCartera",

                    unselect: "NotifFacturacionNOSiRolNoEsDeCartera",

                    change: "cambia"

                })

            },

            error: function (jqXHR, textStatus, error) {

                NotyAviso('error', error, false, true, false, true);

            }

        });

    }

In the attached file there are more information that could be useful.

I'll appreciate your help.

Kind regards,

Juan Uribe

Attachment: ejlistbox_becc39b5.zip

[Christopher Issac Sunder K]

Hi Juan Uribe, 

Thank you for contacting Syncfusion support. 

We have checked with the provide code and we are unable to reproduce the issue with ListBox. Please check the below sample for more details, 

http://jsplayground.syncfusion.com/jkqrswvi 

Please let us know the version you are using. However, you can dynamically refresh the scroller object of ListBox using create event if the issue still occurs. Here is the code, 

$('#role').ejListBox({ 

                    dataSource: dataroles, 

                    fields: { text: "CustomerID" ,value:"Address"}, 

                    allowMultiSelection: true, 

                    itemsCount: 3, 

                    create: "oncreate" 

            }); 

function oncreate(args) { 

                                    

                  this.scrollerObj.refresh(); // manually refresh only the scroller object of the Listbox 

          } 

Please let us know the version if you are facing the issue still. 

Thanks, 

Christo

[Juan Jose Uribe]

Hi,

I am still facing this problem. 

It is really strange since I am using other listbox in other page and it is working well.

I have looked for other code lines in my project where I use the listbox in order to see if I am breaking something in the listbox definition but, I did not found nothing weird.

I am attaching a screenshot of the search where the listbox is used.

Syncfusion version I am using is 15.2.0.46.

Kind regards,

Juan J.

Attachment: Lines_cd2047e2.zip

[Deepa Loganathan]

Hi Juan Uribe,  

 

Sorry for the inconvenience caused. 

We have replicated the reported issue by rendering the listbox component in bootstrap modal and form validation, we were able to reproduce the customer reported issue.  This issue because of listbox control was rendered while in hidden state.   

To resolve this issue, you can refresh the listbox control in the open event of dialog.  

If you are using bootstrap modal, you can refresh the listbox in the following way. 

Autodatas.Create.cshtml   

 

$('#myModal').on('shown.bs.modal', function (e) { // Event triggered after opened bootstrap modal 

        $("#Roles").ejListBox("refresh", true);  // Refresh the listbox 

      }); 

 

If you are using EJ1 dialog, you can refresh the listbox after opened the dialog using open event. 

https://help.syncfusion.com/api/js/ejdialog#events:open  

Please check and get back to us if you need any further assistance.  

Regards, 

Deepa L. 

[Juan Jose Uribe]

Yes!, it is working now. 

Thanks so much for your assistance.

Kind regards,

Juan J.