jQuery UI Widgets Forums Lists ComboBox Drop down arrow

This topic contains 12 replies, has 5 voices, and was last updated by  Peter Stoev 4 years ago.

Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • Drop down arrow #55766

    Freak
    Participant

    Hi,

    I am facing problem with combobox.I have a multiselect combobox and binding data as –

    $(function () {
        $.ajax({
            url: '/Test/GetLocations?t=' + Date.now(),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            async: true,
    
            success: function (result) {
                source= result.Storages;
                //var dataAdapter = new $.jqx.dataAdapter(source);
                $("#jqxStorage").jqxComboBox({ source: source, theme: 'arctic', showArrow: true, displayMember: "Name", multiSelect: true, width: 212, height: 25, selectedIndex: -1, placeHolder: "Select Storage..." });
                $("#jqxDestination").jqxComboBox({ source: source, theme: 'arctic', showArrow: true, displayMember: "Name", multiSelect: true, width: 212, height: 25, selectedIndex: -1, placeHolder: "Select Storage..." });
            },
            fail: function (result) {
                alert(result.Status);
            }
        });
    });

    It is binding data but not showing drop down arrow. If I type something in input box, then it is showing the arrow.
    Where I am doing wrong?

    Thanks,
    Freak

    • This topic was modified 6 years, 1 month ago by  Freak.
    Drop down arrow #55777

    Dimitar
    Participant

    Hello Freak,

    This code is insufficient for us to determine the source of the issue. Please provide us with a larger example, including the HTML and references to styles and scripts. And do you experience this behaviour when binding to a local source?

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Drop down arrow #55783

    Freak
    Participant

    Hi,

    Below is my HTML-

    
    <style>
        #assetsfileslink {
            background: #b5d7a9 url("../../Content/Images/Findinfolder.png") no-repeat 3px 6px;
        }
        #gridpagerlistAssetsGrid {
            width: 51px !important;
        }
    
        #destination_chosen {
            border: 1px solid #CCCCCC;
        }
    
        .deleteConfirmationWindow h3 {
            text-align: center;
        }
    
        .copyloactionpopup .jqx-window-content, #popupWindowForCopyTo {
            height: auto !important;
        }
    
        #dropdownlistArrowjqxComboBox {
            height: 100% !important;
        }
    </style>;
    <script src="Scripts/Copy.js"></script>;
    <table style="float:left;" class="results">
                <tr>
                    <td>
                        <div class="addfilsbutton">
                            <a class="greybutton" onclick="Copytoresults();" id="btnCopyTo"><img src="~/Content/Images/Copy.png" />Copy To</a>
                            <a class="greybutton" onclick="MoveToDestination();" style="margin-right:15px" id="btnMove"><img src="~/Content/Images/Copy.png" />Move To</a>
    
                            <a class="greybutton" id="btnDelete" onclick="DeleteAssets();"><img src="~/Content/Images/Recyclebin.png" />Delete</a>
                            <a class="greybutton" onclick="PurgeAssets();" id="btnPurge"><img src="~/Content/Images/Delete_Cross.png" />Purge</a>
                        </div>
                    </td>
                    <td>
    
                        <div class="holder" style="width: 180px !important; float: right !important;">
    
                        </div>
    
                    </td>
                </tr>
            </table>
            <div id="popupWindowForCopyTo" class="create-popup copyloactionpopup" style="display:none;">
                <div>
                    <div class="innerdiv copylocation">
                        <div><label class="copypoplabel"># files selected</label><label id="lblFilesCount"></label>&nbsp;<label id="lblFiles"></label></div>
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <label class="copypoplabel">Destination </label>
                                </td>
                                <td>
                                    <div id='jqxStorage'>
    
                                    </div>
                                </td>
                            </tr>
                        </table>
    
                        <br clear="all" />
                        <label class="copypoplabel"> </label><span class="addbutton" style="margin-top:10px; display:inline-block;"><input type="button" value="Submit" id="btnSubmit" class="addfilsicon" onclick="Copytoconfirmation();" /></span>
                    </div>
                </div>
            </div>
    
            <div id="popupWindowForMove" class="create-popup copyloactionpopup" style="display:none;">
                <div>
                    <div class="innerdiv copylocation">
                        <div><label class="copypoplabel">Files Selected</label><label id="lblFileName"></label></div>
                        <table cellpadding="0" cellspacing="0">
                            <tr>
                                <td>
                                    <label class="copypoplabel">Destination </label>
                                </td>
                                <td>
                                    <div id='jqxDestination'>
    
                                    </div>
                                </td>
                            </tr>
                        </table>
    
                        <br clear="all" />
                        <label class="copypoplabel"> </label><span class="addbutton" style="margin-top:10px; display:inline-block;"><input type="button" value="Submit" id="btnSubmit" style="background-color:#3695e5; color:white" class="addfilsicon" onclick="MoveToConfirmation();" /></span>
                    </div>
                </div>
            </div>

    Below is Copy.js –

    $(document).ready(function(){
    $("#popupWindowForCopyTo").jqxWindow({
            title: 'Choose copy location...', width: 430, height: 230, resizable: false, theme: 'arctic', animationType: 'none', showCloseButton: true, keyboardCloseKey: 123, isModal: true, autoOpen: false, modalOpacity: 0.01
        });
    
        $("#popupWindowForMove").jqxWindow({
            title: 'Choose move location...', width: 430, height: 230, resizable: false, theme: 'arctic', animationType: 'none', showCloseButton: true, keyboardCloseKey: 123, isModal: true, autoOpen: false, modalOpacity: 0.01
        });
    
        $.ajax({
            url: '/Ingest/GetStorageLocations?t=' + Date.now(),
            type: 'POST',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
    
            success: function (result) {
                $("#jqxStorage").jqxComboBox({ source: result.Storages, theme: 'arctic', displayMember: "Name", valueMember: "PKStorageLocationID", multiSelect: true, width: 212, height: 25, selectedIndex: -1, placeHolder: "Select Storage" });
                $("#jqxDestination").jqxComboBox({ source: result.Storages, theme: 'arctic', displayMember: "Name", valueMember: "PKStorageLocationID", multiSelect: true, width: 212, height: 25, selectedIndex: -1, placeHolder: "Select Storage..." });
            },
            fail: function (result) {
                ShowErrorNotifyMessage(result.status);
            }
        });
    })
    
    function Copytoresults() {
        $('#popupWindowForCopyTo').jqxWindow('open');
        $('#popupWindowForCopyTo').focus();
    }
    
    function MoveToDestination() {
       $('#popupWindowForMove').jqxWindow('open');
       $('#popupWindowForMove').focus();
    }
    

    Thanks,
    Freak

    • This reply was modified 6 years, 1 month ago by  Freak.
    Drop down arrow #55815

    Dimitar
    Participant

    Hi Freak,

    Here is what you can try:

    1) Make sure none of your custom CSS causes the issue (which element has the id dropdownlistArrowjqxComboBox?)

    2) Initialize the combobox after the window has been initialized, in its initContent callback function (example).

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Drop down arrow #55833

    Freak
    Participant

    Hi Dimitar,

    I tried both options but no luck.

    Thanks,
    Freak

    Drop down arrow #55868

    Dimitar
    Participant

    Hi Freak,

    How exactly did you change your code? And do you experience this behaviour when binding to a local source?

    Would you be able to create an example reproducing the issue which we can test locally to determine the source of the behaviour?

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Drop down arrow #78010

    vovo4ka
    Participant

    The same problem here!
    There are no arrows in two jqxComboBoxes in my jqxWindow.
    But if I press any key in input box – arrow key appear and everything works well as in first post.
    I have to press key for each jqxComboBox (

    p.s. removing multiSelect solves issue

    Drop down arrow #78022

    Dimitar
    Participant

    Hello vovo4ka,

    Please share a jsEditor/JSFiddle example that reproduces the issue you experience and we will take a look at it.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Drop down arrow #78030

    vovo4ka
    Participant

    I can’t … it has remote data and template for jqxWindow etc
    But I found that arrow button has height 0px after init
    If I change height to 25 for example – it solves issue
    $('#mycombobox').find('.jqx-combobox-arrow-normal').height(25);

    Drop down arrow #78255

    vovo4ka
    Participant

    btw if I call clearSelection arrow button becomes 0 height again (
    p.s. my combobox hidden… display:none

    • This reply was modified 4 years, 8 months ago by  vovo4ka.
    Drop down arrow #78264

    Dimitar
    Participant

    Hi vovo4ka,

    I guess that is why you experience the issue – it is not recommended to initialize widgets or call widget methods for HTML elements that are hidden (with display: none). Doing so may lead to unexpected behaviour.

    Best Regards,
    Dimitar

    jQWidgets team
    http://www.jqwidgets.com/

    Drop down arrow #85375

    mohamedazher
    Participant

    Hi,

    I can confirm that this issue exists.

    I do initialise the combobox in a hidden div, its a hidden section of the form, i cant think of any other way of doing this.

    However calling the render method after setting the source does seem to solve the issue.

    `$(“#widget”).jqxComboBox(‘render’);

    Regards,
    Mohamed Azher

    Drop down arrow #85382

    Peter Stoev
    Keymaster

    Hi Mohamed Azher,

    We have no example or docs with ComboBox created in a Hidden DIV. We do not support and never supported this. ComboBox and any other widget should be created from visible DIV tag. Then you can Hide/Show it as many times as you wish.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com

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

You must be logged in to reply to this topic.