exposed scrollbar in jqxDropdownButton with jqxGrid issue

[klien54Participant]

Hello,

I have a scroll-bar issue of jqxDropDownButton with jqxGrid.
What I want to make was a dropDownButton which contains grid in itself.
However, when I change a source of grid after initializing it, a scroll-bar has appeared on the screen.
It is from the grid that is hidden at the moment, but only a scroll-bar is exposed strangely.

Here is my sample below,
http://jsfiddle.net/klien54/rt64xujx/1/

In the sample, please click the button “Change Grid” and you will find the scroll-bar on it.

My code is here,

<div style="float:left; margin-right: 10px;" id="dropDownButton">
    <div id='jqxGrid'>            
    </div>
</div>
<div>
<input type="button" id="changedata" value="Change Grid"/>
</div>

 $("#dropDownButton").jqxDropDownButton({
     width: 150,
     height: 18,
     theme: 'energyblue'
 });

var gridData = [
                {value: 'SYSTEM', label: 'SYSTEM'}
            ];

var source = {
                datatype: 'local',
                datafields: [
                    {name: 'value', type: 'string'},
                    {name: 'label', type: 'string'}
                ],
                localData: gridData
            };

 $("#jqxGrid").jqxGrid({
      width: 200,
      height: 50,
      source: source,
//    autoheight: false,
      selectionmode: 'checkbox',
      columnsresize: true,
      columns: [{text: 'ALL', datafield: 'label', cellsalign: 'left', align: 'center'}]
 });

$("#changedata").jqxButton({
    width: 100,
    height: 25
}).on('click', function () {
    
    gridData = [
                {value: 'FAB', label: 'FAB'},
                {value: 'INFRA', label: 'INFRA'},
                {value: 'SYSTEM', label: 'SYSTEM'}
            ];
    
    source = {
                datatype: 'local',
                datafields: [
                    {name: 'value', type: 'string'},
                    {name: 'label', type: 'string'}
                ],
                localData: gridData
            };
    
    $("#jqxGrid").jqxGrid('source', source);
});

I’m looking forward to your reply.
Thanks in advance for your help.

Best regards,
klien54

[Peter StoevKeymaster]

Hi klien54,

I do not see any problem in this fiddle. The Grid does not scroll Row By Row and it’s scrollbar’s Max Value depends on the Grid’s Total Height, not only the number of Rows. Before changing the source, there are still several Pixels that overflow so a Vertical Scrollbar is normally to be displayed in this case.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[klien54Participant]

Hello Peter,

I think my sample made you confused.
What I want you to do in the sample is just click the button “Change Grid” without opening the dropdown at the beginning.
The button will change the source of grid.
At that moment, you will find scroll-bar appeared on the button.

1. Initialize Grid in dropdownbutton. (please don’t open the dropdown)
2. Change the source of grid. (click the button)
3. Only a scroll-bar has appeared, not grid.

For your better understanding, I changed my sample little bit without the button.
http://jsfiddle.net/klien54/rt64xujx/2/
This sample automatically change the source of grid right after initializing grid.
The scroll-bar is shown at the beginning, and it will move to the right position after opening the dropdown.

Best regards,
klien54

[Peter StoevKeymaster]

Hi klien54,

Use the DropDown’s initContent to create its content.

http://jsfiddle.net/ay5c0xbs/

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[klien54Participant]

Hi Peter,

I’m really grateful for your prompt help.
The DropDown’s initContent API performs perfectly in my code.
I hope you will introduce this useful option on your API documentation in the near future.
Thanks again.

Best Regards,
klien54

[Author]

Posts