jQuery UI Widgets Forums Plugins AngularJS Angular ComboBox Remote Search

This topic contains 4 replies, has 2 voices, and was last updated by  medtrak 8 years, 8 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • Angular ComboBox Remote Search #81492

    medtrak
    Participant

    Hello,

    I have created a directive for the angular combo box but I can’t get the remote search feature to work. When the dataAdapter.dataBind() event fires, it does jump into the “formatData” function of the data adapter. However, each time, the data.search is null.

    I have tried $scope.diagnosisSettings.apply(‘searchString’) and $scope.diagnosisSettings.jqxComboBox(‘searchString’) and both return null. From what I can tell I am calling everything correctly. I am able to hard code data.search = “123” and it acts correctly so the problem is getting the searchString value.

    Please advise. All related code is below.

    Thank you.

    **DIRECTIVE
    var eligPortalDiagnosisList = function () {
    return {
    restrict: ‘E’,
    scope: {
    ngModel: ‘=’
    },
    templateUrl: ‘/pages/diagnosis-list.html’,
    controller: DiagnosisController
    };
    }

    **DIRECTIVE TEMPLATE
    <div>
    <jqx-combo-box jqx-create=”createDiagnosisWidget” ng-model=”ngModel” jqx-settings=”diagnosisSettings”></jqx-combo-box>
    </div>

    **CONTROLLER
    var DiagnosisController = function ($scope) {
    // hide widget on page load
    $scope.createDiagnosisWidget = false;
    var dataAdapter = new $.jqx.dataAdapter(
    {
    datatype: ‘json’,
    datafields:
    [
    { name: ‘DiagnosisCode’ },
    { name: ‘DiagnosisDescription’ }
    ],
    url: ‘/Helper/GetDiagnosisList’
    },
    {
    autoBind: true,
    formatData: function (data) {
    if ($scope.diagnosisSettings != null && $scope.diagnosisSettings != undefined) {
    data.search = $scope.diagnosisSettings.apply(‘searchString’);
    }
    return data;
    }
    }
    );
    $scope.diagnosisSettings = {
    source: dataAdapter,
    displayMember: “DiagnosisDescription”,
    valueMember: “DiagnosisCode”,
    width: ‘100%’,
    remoteAutoComplete: true,
    minLength: 2,
    renderer: function(index, label, value) {
    return value + ” – ” + label;
    },
    renderSelectedItem: function(index, item) {
    return item.value + ” – ” + item.label;
    },
    search: function(searchString) {
    dataAdapter.dataBind();
    }
    };
    // show widget
    $scope.createDiagnosisWidget = true;
    }

    Angular ComboBox Remote Search #81498

    Dimitar
    Participant

    Hello medtrak,

    The following is not a correct way of getting the searchString property:

    $scope.diagnosisSettings.apply('searchString');

    Please try the following modification to your code:

    formatData: function(data) {
        if ($scope.diagnosisSettings != null && $scope.diagnosisSettings != undefined) {
            data.search = $scope.diagnosisSettings.jqxComboBox('searchString');
        }
        return data;
    }

    Best Regards,
    Dimitar

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

    Angular ComboBox Remote Search #81520

    medtrak
    Participant

    Thanks for the reply. However, as stated in my original post, I have tried that and still get an empty value for data.search

    If I put an id on the <jqx-combo-box> element in the directive, then I am able to get the value by using data.search = $(‘#id’).jqxComboBox(‘searchString’);
    However, I do not want to do that because I have two of these directives on my page.

    That leads me to believe there is something wrong with the $scope or the diagnosisSettingsproperty.

    Is there anything else that I can try?

    Thanks so much!

    Angular ComboBox Remote Search #81553

    Dimitar
    Participant

    Hi medtrak,

    I am not sure what causes the issue you experience. Here is a complete, working, example, based on the jQuery-only demo Remote Search, but using AngularJS instead. Please review it and check for any inconsistencies with your own code. Please also make sure you are using the latest version of jQWidgets (4.0.0).

    <!DOCTYPE html>
    <html ng-app="demoApp" lang="en">
    <head>
        <link rel="stylesheet" href="../../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.min.js"></script>
        <script type="text/javascript" src="../../../scripts/jquery-1.11.1.min.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../../scripts/demos.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxdata.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxbuttons.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxscrollbar.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxlistbox.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxcombobox.js"></script>
        <script type="text/javascript" src="../../../jqwidgets/jqxangular.js"></script>
        <script type="text/javascript">
            var demoApp = angular.module("demoApp", ["jqwidgets"]);
            demoApp.controller("demoController", function ($scope)
            {
                var source = {
                    datatype: "jsonp",
                    datafields: [{
                        name: 'countryName'
                    }, {
                        name: 'name'
                    }, {
                        name: 'population',
                        type: 'float'
                    }, {
                        name: 'continentCode'
                    }, {
                        name: 'adminName1'
                    }],
                    url: "http://api.geonames.org/searchJSON",
                    data: {
                        featureClass: "P",
                        style: "full",
                        maxRows: 12,
                        username: "jqwidgets"
                    }
                };
    
                var dataAdapter = new $.jqx.dataAdapter(source, {
                    formatData: function (data)
                    {
                        var searchString = $scope.comboboxSettings.jqxComboBox('searchString');
                        if (searchString != undefined)
                        {
                            data.name_startsWith = searchString;
                            return data;
                        }
                    }
                });
    
                // Create a jqxComboBox
                $scope.comboboxSettings = {
                    width: 250,
                    height: 25,
                    source: dataAdapter,
                    remoteAutoComplete: true,
                    autoDropDownHeight: true,
                    selectedIndex: 0,
                    displayMember: "name",
                    valueMember: "countryName",
                    renderer: function (index, label, value)
                    {
                        var item = dataAdapter.records[index];
                        if (item != null)
                        {
                            var label = item.name + "(" + item.countryName + ", " + item.adminName1 + ")";
                            return label;
                        }
                        return "";
                    },
                    renderSelectedItem: function (index, item)
                    {
                        var item = dataAdapter.records[index];
                        if (item != null)
                        {
                            var label = item.name;
                            return label;
                        }
                        return "";
                    },
                    search: function (searchString)
                    {
                        dataAdapter.dataBind();
                    }
                };
            });
        </script>
    </head>
    <body ng-controller="demoController">
        <jqx-combo-box jqx-settings="comboboxSettings"></jqx-combo-box>
    </body>
    </html>

    Best Regards,
    Dimitar

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

    Angular ComboBox Remote Search #81567

    medtrak
    Participant

    Thank you. Upgrading to v4.0.0 did the trick.

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

You must be logged in to reply to this topic.