I can not filter

[mustafaParticipant]

hello
I have a problem.I examine this example
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdropdownlist/index.htm#demos/jqxdropdownlist/bindingtojson.htm

Where am I doing wrong
thank you

function GetVessels() {
    var returnData = [];

    $.ajax({

        url: '/Vessel/GetVessels/',
        type: 'GET',
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
        async: false,
        success: function (result) {
            returnData = result;
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alertify.error("There was a problem function : GetVessels");
        }
    });
    return returnData;
}

var vessels = GetVessels();

 $('#dropVesselList').jqxDropDownList({
        source: vessels,
        promptText: "Select Vessel",
        displayMember: "Name",
        valueMember: "VesselID",
        height: "34px",
        filterable: true,
        renderer: function (index, label, value) { 
            var datarecord = vessels[index]; 
            return datarecord;
        },
        selectionRenderer: function (element, index, label, value) {
         
            return label;
        },
        width: "200px",
        selectedIndex: 0,
        theme: "web",
    });

[mustafaParticipant]

and I tried it but it did not work

   var vessels = GetVessels();
   
    var adaptersource =
              {
                  localdata: vessels,
                  datatype: "json",
                  datafields: [
                    { name: "Name" },
                    { name: "VesselID" }
                  ]
              };

    var dataAdapter = new $.jqx.dataAdapter(adaptersource);

    $("#dropVesselList").jqxDropDownList({
        selectedIndex: 0,
        source: dataAdapter,
        promptText: "Select Vessel",
        displayMember: "Name",
        valueMember: "VesselID",
        height: 22,      
        placeHolder: "",
        filterable: true,
        enableBrowserBoundsDetection: true,
        dropDownHeight: 200,
        theme: "web",
    });

search does not work

[NadezhdaParticipant]

Hello mustafa,

Please, make sure you are using the latest version of jQWidgets (3.7.0).

Best Regards,
Nadezhda

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

[mustafaParticipant]

hello
I did upgrade and worked on the main page

but does not work on the popup page and

and search click is not working

popup page html

<script src="/Assets/jqwidgets/scripts/jqx-all.js"></script>

<link href="/Assets/jqwidgets/css/jqx.base.css" rel="stylesheet" />
<link href="/Assets/jqwidgets/css/jqx.arctic.css" rel="stylesheet" />
<link href="/Assets/jqwidgets/css/jqx.metro.css" rel="stylesheet" />

<script src="/Assets/scripts/BeginLoad/CompanyBeginLoad.js"></script>
<script src="/Assets/scripts/ViewPage/CompanyContact.js"></script>
<script src="/Assets/scripts/ViewPage/Company.js"></script>

popup view load for ajax code and I am using botbox plugin
Could the problem botbox plugin?

function LoadPopupView(path,title, css, icon) {

    $.ajax({

        url: path,
        type: 'GET',
        datatype: 'html',
        async: false,
        contentType: 'application/html',
        success: function (data) {         
            bootbox.dialog({
                title: '<label style="margin-left:20px">'+title+'</label><img class='+icon+'></img>',
                animate:true,
                message: data,
              
                buttons: {
                    main: {
                        label: "Close",
                        className: "btn-primary"
                    }
                },
                className: css          
            });           
        }
    });

}

[mustafaParticipant]

I use regular popup div
<div id=”popupDiv”>/<div>
and its working
but if I use botbox plugin or bootstrap modal.. dropdown filter does not work
why it does not work bootstrap modal ?

[Peter StoevKeymaster]

Hi mustafa,

From your explanations, we do not understand your issue. I would suggest you to use our widgets with our jqxWindow. Other dialogs may restrict keyboard navigation, etc when opened. If the problem is some keyboard restriction done by the Bootstrap’s Dialog, you may do the following change:

   $.fn.modal.Constructor.prototype.enforceFocus = function () {
            $(document)
              .off('focusin.bs.modal') // guard against infinite focus loop
              .on('focusin.bs.modal', $.proxy(function (e) {
                  if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
                      if ($(e.target).parents().hasClass('jqx-popup'))
                          return true;
                      this.$element.trigger('focus')
                  }
              }, this));
        }

This will ensure that the Bootstrap’s dialog does not affect our popups.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[mustafaParticipant]

hello peter
ok
I’ll tell you more simple

does not work in the dropdownlist popup window Focus has the problem
I’m using bootstrap modal plugin
example
A similar problem
http://www.jqwidgets.com/community/reply/reply-to-jqxgrid-bootstrap-3-2-0-modal-filtering-input-text-box-is-not-focusing-5/

Where will I use this code ? Can you give full example?
thank you

  $.fn.modal.Constructor.prototype.enforceFocus = function () {
            $(document)
              .off('focusin.bs.modal') // guard against infinite focus loop
              .on('focusin.bs.modal', $.proxy(function (e) {
                  if (this.$element[0] !== e.target && !this.$element.has(e.target).length) {
                      if ($(e.target).parents().hasClass('jqx-popup'))
                          return true;
                      this.$element.trigger('focus')
                  }
              }, this));
        }

[Peter StoevKeymaster]

Hi mustafa,

Put the code in a script tag after you’ve added references to all files.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[logsParticipant]

I think it is too late to reply to this problem , but i will give the solution for anyone having same problem.
Its true that keyboard restriction done by the Bootstrap’s modal.
So what you need to do is to bind data to a jqwidget element after the bootsrap modal has been shown.
example JQXGRID:

$("#idModalBootstrap").on('shown.bs.modal', function (e) {
   $("#idJqwidgetElement").jqxGrid({source: DATA });
});

[Author]

Posts