Drop down arrow

[FreakParticipant]

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

[DimitarParticipant]

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/

[FreakParticipant]

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

[DimitarParticipant]

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/

[FreakParticipant]

Hi Dimitar,

I tried both options but no luck.

Thanks,
Freak

[DimitarParticipant]

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/

[vovo4kaParticipant]

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

[DimitarParticipant]

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/

[vovo4kaParticipant]

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);

[vovo4kaParticipant]

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

[DimitarParticipant]

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/

[mohamedazherParticipant]

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

[Peter StoevKeymaster]

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

[Author]

Posts