Facing a problem today, that jqxGrid shows : No data to display.
Downloaded and unpacked today v7.1.0.
Testing with browser Mozilla
Here is JSON, which generated by API:
{"data":[{"id":46,"dateChanged":"2019-03-02 06:30:42","isHidden":0,"isBusiness":0,"name1":"System","name2":"Administrator","sex":0,"dateOfBirth":"1970-01-01"},{"id":47,"dateChanged":"2019-03-02 06:49:25","isHidden":0,"isBusiness":0,"name1":"System 1","name2":"Administrator 1","sex":1,"dateOfBirth":"1980-01-01"}]}
Here is code, exactly as shown in demo in order to populate grid:
<script type="text/javascript" src="/AA/assets/jqx/jquery.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxcore.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxdata.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxbuttons.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxscrollbar.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxmenu.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.selection.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxlistbox.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxdropdownlist.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.pager.js"></script>
<script type="text/javascript" src="/AA/assets/jqx/jqxgrid.columnsresize.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var customerSource =
{
datatype: 'json',
datafields: [
{name: 'id'},
{name: 'name1'},
{name: 'name2'}
],
id: 'id',
url: '/api/customer/get/list',
root: 'data'
};
var customerAdapter = new $.jqx.dataAdapter(customerSource,
{
formatData: function (data) {
return {};
}
}
);
customerAdapter.dataBind();
$("#jqxgrid").jqxGrid(
{
source: customerAdapter,
columnsresize: true,
autoheight: true,
autowidth: true,
columns: [
{text: 'id', datafield: 'id', width: 180},
{text: 'First Name', datafield: 'name1', width: 180},
{text: 'Last Name', datafield: 'name2', width: 180}
]
});
});
</script>
</head>
<body>
<div id="jqxgrid"></div>
</body>
Am I doing something wrong or shall i use another library?
Thank You,
Roman.
In the end, problem was in PHP generating JSON. I didn't noticed earlier but it adds to URI some parameters that was not processed correctly. Fixed by changing the PHP generating JSON script!
Related
<script type="text/javascript">
$(document).ready(function(){
var $grid = $('#file-list');
$grid.jqGrid({
height: '100%',
width: '600',
forceFit: true,
url: '/downloadfolder/gridFile',
datatype: 'json',
colNames: [
'id',
'Type',
'Name',
'Size',
'Link'
],
});
});
</script>
I create request use httpwebrequest and I get content html response
but content that I want to get in script tag
Somebody can I get this content
I am using angular ui grid. I am trying to export the grid into a pdf format. I am using angular translation and one of the languages that I have to translate to is Japanese. But when I try to export grid columns which are in japanese into pdf format the titles disappear. Please let me know what's the problem.
Here is the link to plunker - http://plnkr.co/edit/6foYrcyv1Q2oE4VVYDss?p=preview
As you can see when we try to export the grid into pdf format Gender, company and Name titles disappear.
app.js
var app = angular.module("app", ['ngTouch', 'ui.grid', 'pascalprecht.translate','ui.grid.exporter']);
app.controller("MainController", mainController);
function mainController($scope, $http, $translate, $window){
$scope.langs = ['en', 'de', 'ja'];
$scope.lang = 'ja';
$scope.changeLanguage = changeLanguage;
$scope.gridOptions = {
columnDefs: [
{ displayName: 'NAME', field: 'name', headerCellFilter: "translate" },
{ displayName: 'GENDER', field: 'gender', headerCellFilter: 'translate' },
{ displayName: 'COMPANY', field: 'company', headerCellFilter: 'translate', enableFiltering: false }
],
enableGridMenu: true,
exporterPdfDefaultStyle: {fontSize: 9},
exporterPdfTableStyle: {margin: [10, 10, 20, 40]},
exporterPdfTableHeaderStyle: {fontSize: 10, bold: true, italics: true, color: 'red'},
exporterPdfHeader: { text: "Data", style: 'pdfStyle' },
gridMenuTitleFilter: getTranslation,
exporterHeaderFilter : $translate.instant
};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
function getTranslation(title){
return $translate.instant(title);
}
function changeLanguage() {
$translate.use($scope.lang);
}
}
app.config(function ($translateProvider){
$translateProvider.translations('en', {
'GENDER': 'Gender',
'NAME': 'Name',
'COMPANY': 'Company'
});
$translateProvider.translations('de', {
'GENDER': 'Geschlecht',
'NAME': 'Name',
'COMPANY': 'Unternehmen'
});
$translateProvider.translations('de', {
'GENDER': '性別',
'NAME': '名',
'COMPANY': '会社'
});
$translateProvider.preferredLanguage('de');
});
index.html
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="http://ui-grid.info/release/ui-grid-unstable.js"></script>
<script src="https://rawgithub.com/PascalPrecht/bower-angular-translate/master/angular-translate.min.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid-unstable.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="MainController">
<select ng-change="changeLanguage()" ng-options="l for l in langs" ng-model="lang"></select>
<br>
<div class="grid" ui-grid="gridOptions" ui-grid-exporter></div>
<script src="app.js"></script>
</div>
</body>
</html>
main.css
.grid {
width: 500px;
height: 250px;
}
In the below jsp code the fields are hard code but can i get the fields by using loop from a list which may grow dynamically
List list=[userid,firstname,lastname,email];
for every new request this list may grow or shrink dynamically depends on the columns of the table present in database ,so is there any way to get the field name without hard coding..
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<!-- Include one of jTable styles. -->
<link href="css/metro/crimson/jtable.css" rel="stylesheet" type="text/css" />
<link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet" type="text/css" />
<!-- Include jTable script file. -->
<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"></script>
<script src="js/jquery.jtable.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#PersonTableContainer').jtable({
title: 'Table of people',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
actions: {
listAction: 'CRUDController?action=list',
createAction:'CRUDController?action=create',
updateAction: 'CRUDController?action=update',
deleteAction: 'CRUDController?action=delete'
},
fields: {
userid: {
title:'S.NO',
key: true,
list: true,
create:true
},
firstName: {
title: 'First Name',
width: '30%',
edit:false
},
lastName: {
title: 'Last Name',
width: '30%',
edit:true
},
email: {
title: 'Email',
width: '20%',
edit: true
}
}
});
$('#PersonTableContainer').jtable('load');
});
</script>
</head>
<body>
<div style="width:60%;margin-right:20%;margin-left:20%;text-align:center;">
<div id="PersonTableContainer"></div>
</div>
</body>
</html>
this can be achieved by iterating over a list
<%
HttpSession sec = request.getSession();
List<String> columnsList=(List<String>)sec.getAttribute("columnsList");
%>
<script type="text/javascript">
var jsArray = [<%for (int i = 0; i < columnsList.size(); i++) {%>"<%=columnsList.get(i)%>"<%=i + 1 < columnsList.size() ? ",":""%><%}%>];
var fields={};
var arrayLength = jsArray.length;
for(var i=0;i<arrayLength;i++)
{
fields[jsArray[i]] = {
title: jsArray[i],
width: '40%',
};
}
$(document).ready(function() {
$('#PersonTableContainer').jtable({
title : 'Table of people',
paging : true, //Enable paging
sorting: true, //Enable sorting
defaultSorting: 'Name ASC', //Set default sorting
pageSize : 10, //Set page size (default: 10)
actions : {
listAction : 'DATA?action=list'
},
fields : fields
});
//Load all records when page is first shown
$('#PersonTableContainer').jtable('load');
});
</script>
I am a newbie with ExtJS 4. I am trying to display a result list which fetches results from a remote store, without much success.
Below is the view file
Ext.define('Crm.view.CompanyList', {
extend: 'Ext.grid.Panel',
alias: 'widget.companyList',
store : 'Crm.store.Companies',
title : 'Company List',
initComponent: function(){
this.columns = [ {
text : 'ID',
width : 150,
dataIndex : 'id'
}, {
text : 'LastName',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'lastName'
}, {
text : 'First Name',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'firstName'
}, {
text : 'Street',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'street'
} ];
this.dockedItems = [ {
xtype : 'pagingtoolbar',
store : 'Companies',
dock : 'bottom',
displayInfo : true
} ];
this.callParent();
}
});
and below is the Model
Ext.define('Crm.model.Company',{
extend : 'Ext.data.Model',
fields : [
{name:'id',type:'string'},
{name:'lastName',type:'string'},
{name:'firstName',type:'string'},
{name:'street',type:'string'}
]
});
This is how the store is defined
Ext.define('Crm.store.Companies', {
extend: 'Ext.data.Store',
requires: 'Crm.model.Company',
model: 'Crm.model.Company',
autoLoad: {start: 0, limit: 5},
pageSize: 5,
remoteSort: true,
sorters: [{
property : 'lastName',
direction: 'asc'
}],
proxy: {
type: 'jsonp',
url : 'http://extjsinaction.com/crud.php?model=Employee&method=READ',
reader: {
type: 'json',
root: 'data',
idProperty : 'id',
// successProperty : 'meta.success',
totalProperty : 'meta.total'
}
}
});
and finally the HTML file which is expected the render the Grid in browser
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<script type="text/javascript" src="Crm/view/CompanyList.js" ></script>
<script type="text/javascript" src="Crm/model/Company.js" ></script>
<script type="text/javascript" src="Crm/store/Companies.js" ></script>
</head>
<body>
<script type="text/javascript" >
Ext.onReady(function() {
Ext.create('Crm.view.CompanyList', {
});
);
</script>
</body>
</html>
When I run this in browser, I get the below error in browser console
Uncaught TypeError: Cannot read property 'buffered' of undefined ext-all-dev.js:145555
Can someone please guide me to resolve this. Thank you.
The main reason your code fails is that the grid does not have a store. You configure store as string (class name) but this approach works only if you use MVC with Ext.Application when Ext creates the store for you.
You can make the above working by creating the store in initComponent of the grid:
this.store = Ext.create('Crm.store.Companies', {});
For long run I recommend to use Sencha Cmd and MVC (MVVM for Ext 5) architecture.
I run this code and the dropdown won't drop down -- no items get displayed.
Looking in the debugger I see that the store has no items.
When I comment out the 'url' and uncomment 'data' (which contains the exact json string produced by the .cfm page) the dropdown works as expected.
Anyone know what's going on here?
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />
<script src="ext-3.1.0/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.0/ext-all-debug.js"></script>
<script>
if (Ext.BLANK_IMAGE_URL.substr(0,5) != 'data:')
{
Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';
}
Ext.onReady(function()
{
var testStore = new Ext.data.JsonStore({
url: 'combotest.cfm',
//data: {"ROWS":[{"NAME":"one"},{"NAME":"two"},{"NAME":"three"}]},
root: 'ROWS',
fields: ['NAME'],
autoLoad: true
});
var test_form = new Ext.FormPanel(
{
renderTo: Ext.getBody(),
frame: true,
title: 'Form',
width: 500,
items: [
{
xtype: 'combo',
fieldLabel: 'Combo Box',
triggerAction: 'all',
mode: 'local',
store: testStore,
displayField: 'NAME',
width: 350
}
]
});
});
</script>
</head>
<body>
</body>
</html>
A colleague figured it out. The .cfm page was returning debug info in addition to the json string. Adding
<cfsetting showdebugoutput="FALSE">
to the end of the .cfm page cleared it up.