lbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.sort.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.pager.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.edit.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownbutton.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxangular.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) {
            var url = "../sampledata/products.xml";

            // 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",
                id: 'ProductID',
                url: url
            };

            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>';
                }
            }

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


            // initialize jqxGrid
            $scope.gridSettings =
               {
                   width: 800,
                   source: dataAdapter,
                   pageable: true,
                   autoheight: true,
                   sortable: true,
                   ready: function()
                   {
                       // update DropDownButton's content once the Grid's binding is completed.
                       var index = $scope.gridSettings.apply('getselectedrowindex');
                       var row = $scope.gridSettings.apply('getrowdata', index);
                       if (row) {
                           var dropDownContent = '<div style="position: relative; margin-left: 3px; margin-top: 5px;">' + row['ProductName'] + '</div>';
                           $scope.dropDownButton.setContent(dropDownContent);
                       }
                   },
                   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.dropDownButton = {};
            $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.$on('jqxDropDownButtonCreated', function () {         
                $scope.gridSettings.apply('selectrow', 0);
            });
        });
    </script>
</head>
<body>
    <div ng-controller="demoController">
        <jqx-drop-down-button jqx-instance="dropDownButton" jqx-width="250" jqx-height="25">
             <jqx-grid jqx-settings="gridSettings" jqx-on-rowselect="rowSelect(event)"></jqx-grid>
        </jqx-drop-down-button>
    </div>
</body>
</html>