jQuery UI Widgets › Forums › Plugins › AngularJS › jqxDropDown in jqxWindow: dropdown is not closed on focus loss

Tagged: , , , , , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 8 years, 7 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    jqxDropDown in jqxWindow: dropdown is not closed on focus loss Posts
  • October 13, 2016 at 6:53 am jqxDropDown in jqxWindow: dropdown is not closed on focus loss #88125

    badera
    Participant

    Dear all

    I like to use the functionality shown in example dropdownbutton.htm (angularjs-demos) but in a jqxWindow.
    The dropdown is correctly opened; but if we click somewhere else in the window (or on the page), the dropdown is not closed. We can even click to close the window and the dropdown is still open. What can I do to get the same dropdown close behavior as if jqxDropDown is not placed in a jqxWindow?

    Here is my code

    <!DOCTYPE html>
<html ng-app="demoApp">
<head>
    <title id="Description">jqxDropDownButton directive for AngularJS</title>
    <link rel="stylesheet" type="text/css" href="../../jqwidgets/styles/jqx.base.css"/>
    <script type="text/javascript" src="../../scripts/angular.min.js"></script>
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqx-all.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        var demoApp = angular.module("demoApp", ["jqwidgets"]);

        demoApp.controller("demoController", function ($scope) {
            $scope.dropDownButton = {};
            var initWidgets = false;
            var url = "../sampledata/products.xml";

            $scope.initDropDown = function () {
                // prepare the data
                var source =
                {
                    datatype: "xml",
                    datafields: [
                        {name: 'ProductName', type: 'string'},
                        {name: 'QuantityPerUnit', type: 'int'},
                        {name: 'UnitPrice', type: 'float'},
                        {name: 'UnitsInStock', type: 'float'},
                        {name: 'Discontinued', type: 'bool'}
                    ],
                    root: "Products",
                    record: "Product",
                    async: false,
                    id: 'ProductID',
                    url: url
                };

                var dataAdapter = new $.jqx.dataAdapter(source, {
                    downloadComplete: function (data, status, xhr) {
                    },
                    loadComplete: function (data) {
                    },
                    loadError: function (xhr, status, error) {
                    },
                    autoBind: true
                });

                $scope.dropDownSettings = {
                    width: 200,
                    height: 25,
                    created: function (args) {
                        $scope.dropDownButton = args.instance;
                        var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + dataAdapter.records[0]['ProductName'] + '</div>';
                        args.instance.setContent(dropDownContent);
                    }
                };

                $scope.initWidgets = function () {
                    if (initWidgets)
                        return;

                    initWidgets = true;

                    var cellsrenderer = function (row, columnfield, value, defaulthtml, columnproperties, rowdata) {
                        if (value < 20) {
                            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">' + value + '</span>';
                        }
                        else {
                            return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">' + value + '</span>';
                        }
                    };

                    // initialize jqxGrid
                    $scope.gridSettings =
                    {
                        width: 800,
                        source: dataAdapter,
                        pageable: true,
                        autoheight: true,
                        sortable: true,
                        created: function (args) {
                            $scope.gridSettings.apply('selectrow', 0);
                        },
                        altrows: true,
                        enabletooltips: true,
                        columns: [
                            {text: 'Product Name', columngroup: 'ProductDetails', datafield: 'ProductName', width: 250},
                            {text: 'Quantity per Unit', columngroup: 'ProductDetails', datafield: 'QuantityPerUnit', cellsalign: 'right', align: 'right', width: 200},
                            {text: 'Unit Price', columngroup: 'ProductDetails', datafield: 'UnitPrice', align: 'right', cellsalign: 'right', cellsformat: 'c2', width: 200},
                            {text: 'Units In Stock', datafield: 'UnitsInStock', cellsalign: 'right', cellsrenderer: cellsrenderer}
                        ]
                    };

                    $scope.rowSelect = function (event) {
                        var args = event.args;
                        var row = $scope.gridSettings.apply('getrowdata', args.rowindex);
                        if (row) {
                            var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['ProductName'] + '</div>';
                            $scope.dropDownButton.setContent(dropDownContent);
                        }
                    };
                }

            };

            $scope.jqxWindowSettings = {
                height: 500,
                width: 600,
                isModal: true,
                autoOpen: false,
                modalOpacity: 0.3,

                initContent: function () {
                    // $scope.initDropDown(); - I tried to init it here; but no success.
                }
            };

            $scope.initDropDown();

            // show button click handler.
            $scope.showWindow = function () {
                $scope.jqxWindowSettings.apply('open');
            };

            // Ok button click handler.
            $scope.Ok = function () {
                $scope.jqxWindowSettings.apply('close');
            };

            // cancel button click handler.
            $scope.Cancel = function () {
                $scope.jqxWindowSettings.apply('close');
            }
        });
    </script>
</head>
<body>
<div ng-controller="demoController">
    <jqx-window jqx-settings="jqxWindowSettings">
        <div>
            Modal Window
        </div>
        <div>
            <jqx-drop-down-button jqx-on-opening="initWidgets()" jqx-settings="dropDownSettings">
                <jqx-grid jqx-create="gridSettings" jqx-settings="gridSettings" jqx-on-rowselect="rowSelect(event)"></jqx-grid>
            </jqx-drop-down-button>
            <div style="float: right; margin-top: 400px;">
                <jqx-button jqx-on-click="Ok()" style="margin-right: 10px">Ok</jqx-button>
                <jqx-button jqx-on-click="Cancel()">Cancel</jqx-button>
            </div>
        </div>
    </jqx-window>
    <jqx-button jqx-on-click="showWindow()">Show Window</jqx-button>
</div>
</body>
</html>

    Can anybody help?

    Thanks in advance!
    – badera

    October 14, 2016 at 8:28 am jqxDropDown in jqxWindow: dropdown is not closed on focus loss #88188

    Hristo
    Participant

    Hello badera,

    We will investigate this scenario.
    You could use custom logic when clicking on the content of the Window then could use close method of the jqxDropDownButton.

    Best Regards,
    Hristo Hristov

    jQWidgets team
    http://www.jqwidgets.com

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.