jQuery UI Widgets Forums Editors Button, RepeatButton, ToggleButton, LinkButton exposed scrollbar in jqxDropdownButton with jqxGrid issue

This topic contains 4 replies, has 2 voices, and was last updated by  klien54 9 years, 3 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • klien54
    Participant

    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 Stoev
    Keymaster

    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


    klien54
    Participant

    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 Stoev
    Keymaster

    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


    klien54
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.