jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid does not render when filterable
Tagged: jqxGrid filterable
This topic contains 1 reply, has 1 voice, and was last updated by Ivalde 10 years, 1 month ago.
-
Author
-
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>The problem was found to be missing references to jqxlistbox.js and jqxdropdownlist.js.
Case closed.
-
AuthorPosts
You must be logged in to reply to this topic.