jQWidgets Forums

jQuery UI Widgets Forums Grid Grid does not render when filterable

This topic contains 1 reply, has 1 voice, and was last updated by  Ivalde 10 years, 1 month ago.

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

  • Ivalde
    Participant

    What can the reason be for this AngularJS based jqxGrid not rendering when filterable is included in the $scope.gridSettings?

    <?php
    ?>
    <!DOCTYPE html>
    <html ng-app=”demoApp”>
    <head>
    <title id=”Description”>jqxGrid Binding to JSON using AngularJS</title>
    <link rel=”stylesheet” type=”text/css” href=”../../jqwidgets/styles/jqx.base.css” />
    <script type=”text/javascript” src=”../../jqwidgets/scripts/angular.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/scripts/jquery-1.11.1.min.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxcore.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/jqxcheckbox.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxmenu.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxscrollbar.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxgrid.filter.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.selection.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/jqxangular.js”></script>
    <script type=”text/javascript” src=”../../jqwidgets/scripts/demos.js”></script>
    <script type=”text/javascript”>
    var demoApp = angular.module(“demoApp”, [“jqwidgets”]);
    demoApp.controller(“demoController”, function ($scope, $http) {
    $scope.createWidget = false;
    $http({
    method: ‘get’,
    url: ‘../../concrete/themes/elemental/domains/grid_data.php’
    }).success(function (data, status) {
    var source =
    {
    datatype: “json”,
    datafields: [
    { name: ‘Code’},
    { name: ‘Name’}
    ],
    id: ‘Code’,
    localdata: data
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $scope.gridSettings =
    {
    width: 500,
    source: dataAdapter,
    columnsresize: true,
    filterable: true,
    sortable: true,
    columns: [
    { text: ‘Code’, datafield: ‘Code’, width: 250 },
    { text: ‘Name’, datafield: ‘Name’, width: 250 }
    ]
    };
    $scope.createWidget = true;
    }).error(function (data, status) {
    // Some error occurred
    });
    });
    </script>
    </head>
    <body>
    <div ng-controller=”demoController”>
    <jqx-grid jqx-create=”createWidget” jqx-settings=”gridSettings”></jqx-grid>
    </div>
    </body>
    </html>


    Ivalde
    Participant

    The problem was found to be missing references to jqxlistbox.js and jqxdropdownlist.js.

    Case closed.

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

You must be logged in to reply to this topic.