I'm trying to build a grid using jQWidgets (jqxGrid) with a column which displays values from a foreign data source, using jqx.dataAdapter, but the browser crashes when I try to call the dataBind() method.
Here's my (browser crashing!) jsfiddle:
http://jsfiddle.net/qYyRs/6/
Partial code:
var Area_DataSource = {
datatype: 'array',
localdata: Area_Data,
async: false,
datafields: [{
name: 'Id'
}, {
name: 'Name'
},{
name: 'PlantId'
},{
name: 'PlantName',
value: 'PlantId',
values: {
value: 'Value', // the problematic field
name: 'Name',
source: Plant_DataAdapter.records
}
}]
};
var Area_DataAdapter = new $.jqx.dataAdapter(Area_DataSource);
Area_DataAdapter.dataBind(); // booom!
Base example from jQWidgets website:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/index.htm#demos/jqxgrid/gridkeyvaluescolumnwitharray.htm
This is a confirmed issue:
http://www.jqwidgets.com/community/topic/browser-crashes-foreign-datafield-in-jqx-dataadapter/
"We debugged the issue and confirm it. It will be resolved in jQWidgets
2.8.
Best Regards, Peter Stoev
jQWidgets Team http://www.jqwidgets.com"
Related
I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/
Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable
I have strange problem with loading form panel with json request response.
In previous projects I used to load detail panel from grid store by using loadRecord(record)
The store has associated model so record's embedded objects are mapped to model's properties and form renders those fields without any problem.
Once I had to load form directly with response from form.load() I can't see properties from record's embedded objects.
For example from json
{
"message":null,
"success":true,
"data":{
"code":"1",
"name":"Canon Canada",
"modifiedBy":null,
"modifiedAt":null,
"address":{
"street":"6390 Dixie",
"suite":null,
"city":"Mississauga",
"provinceCode":"ON",
"postalCode":"L5T1P7"
},
...
}
}
I see rendered 'code' and 'name' properties, but not 'street' and 'city'.
Here is form.Panel code
Ext.define('App.view.billto.BillToDetailForm' ,{
extend : 'Ext.form.Panel'
,layout: 'form'
,alias : 'widget.BillToDetailForm'
,autoHeight: true
,bodyPadding: 10
,fieldDefaults: MainAppViewConfig.fieldDefaults
,defaults: {xtype: 'fieldcontainer',layout:'hbox', anchor: '100%'}
,items : [ { defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'code', fieldLabel:'Bill To Code'}
,{name: 'name',fieldLabel: 'Name'}]}
,{ defaults: {xtype: 'textfield', allowBlank: false},
items: [{name: 'address.suite', fieldLabel:'Suite'}
,{name: 'address.street', fieldLabel:'Street'}]}
...
]
,loadContentForCode: function(code){
//this.getForm().trackResetOnLoad = true;
this.getForm().load({ method: 'GET',url: 'billtoDetail',
params:{'code':code},
waitMsg: 'Loading...',
/*success:function(form, action) {
console.log('BillToDetailForm:loadContentForCode callback on success '+this);
var responseObj = Ext.JSON.decode(action.response.responseText,true);
var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
form.loadRecord(billToModel);
}*/
});
}
});
As you can see I even did unsuccessful attempt to reload form in success handler.
Also I have noticed that var billToModel = Ext.create('MPS.model.BillToModel',responseObj.data);
hasn't properly populated model's fields 'street' and 'city'. That's also might be the cause of the problem.
Ext.define('MPS.model.BillToModel', {
extend: 'Ext.data.Model'
,idProperty:'code'
,fields: [
{name: 'code', type: 'string'},
{name: 'name', type: 'string'},
{name: 'street',mapping:'address.street', type: 'string'},
{name: 'city', mapping:'address.city', type: 'string'},
...
]
});
Could you please point the real cause of the problem or advice any solution.
Thank you.
I just made fiddle for you. Take a look how it is working and try the same with your code:
Sencha Fiddle - How associated data works
If this something that you are looking for just mark as answered.
When an account is chosen, I would like to show all related contacts in contactGrid.
I can do this with XhrGet, but I would like to be using JsonRest.
Here is how I setup the Grid:
function contactTabSetup() {
var structure = [{ field: 'id', name: 'Id', width: '5em' },
{ field: 'firstName', name: 'First Name', width: '12%' },
{ field: 'lastName', name: 'Last Name', width: '12%' },
{ field: 'email', name: 'Email', width: '12%' },
{ field: 'description', name: 'Description' },
{ field: 'mobileNumber', name: 'Mobile Phone', width: '12%' }];
var contactGrid = new Grid({
id: 'contactGrid',
pageSize: 20,
cacheClass: Cache,
structure: structure,
noDataMessage: "No contacts found",
modules: [SingleSort]}, contactTab);
contactGrid.startup();
}
Here is how I want to populate the grid:
function contactLoad(acctIds) {
var grid = registry.byId("contactGrid");
grid.model.clearCache();
grid.setStore(JsonRest({target:"//localhost:8080/program/contacts/byAccount/" + acctIds}));
grid.body.refresh();
}
The correct Json response is being returned (as viewed on console):
{
"description": "Mike is a cool guy",
"email": "mike#mike.net",
"firstName": "Mike",
"id": 1503,
"lastName": "Smith",
"mobileNumber": "555-555-5555"
}
... but I can't get the grid to show the new data.
Any help would be appreciated!
Thank you
I tried many additional ways, without success...
This is where I am stuck - not sure what else to try.
I make the JsonRest call, get back the Json Object, and print it out to console.
Seeing that the json response looks good I try to setStore and this error is thrown: "s.query is not a function in dojo.js" (line 382). Is this a bug, or am I missing something? Thank you.
// s.query is not a function in dojo 10.0.1
grid.model.clearCache();
var store = new JsonRest({target:"//localhost:8080/program/contacts/byAccount"});
store.get(acctIds).then(function(items){
console.log(items);
grid.setStore(items);
});
grid.body.refresh();
I found it. Change:
grid.setStore(items);
to
grid.setStore(new ItemFileReadStore({data: {items : result}}));
Does anyone know how to just use JsonRest and not also include ItemFileReadStore?
Thank you,
Chris
My little piece of advice is to try to set store up once and use filter instead.
grid.filter({"acctId":"..."});
The second thing is that store sometimes requires idAttribute definition i.e.
JsonRestStore({target:"...", idAttribute:"id"});
I need to periodically add new data in the grid's store. The store is defined by the following code:
this.reader = new Ext.data.JsonReader({
idProperty: 'id',
fields: this.lesFields
});
this.ds = new Ext.data.GroupingStore({
reader: this.reader,
data: this.leData,
sortInfo: {field: 'dendisc', direction: 'ASC'},
groupField: 'categorie'
});
When I need to append some new data, I do this using this.getStore().loadData(this.leData). Technically the data does appear in the grid's store, but I see on the display only zeros (in the int fields) and blank strings (in the string fields). I did some researches in Chrome's console and I found out that the data property and the json property are not the same in this.getStore().data. In json there is the array with valid data, but in data there are only zeros and blank strings.
Am I missing something? Would the handleAs:'json' property save the situation?
JsonReader requires root to be defined. root points the sub-property which contains the records.
here a sample taken from ext documentation:
var myReader = new Ext.data.JsonReader({
idProperty: 'id'
root: 'rows',
totalProperty: 'totalRows',
fields: [
{name: 'id' },
{name: 'name' }
]
});
and a sample data to be read:
{
success: true,
totalRows: 100,
rows: [ // root
{ id: 1, name: 'Alf' },
{ id: 2, name: 'Ben' },
{ id: 3, name: 'Cod' },
...
]
}
I am not that used to GroupingStores but I think the Reader expect a json object like { Id:0, Name: 'MyName' } or a Array of such objects and then try to match them against the registered fieldnames. But I don't know what there is in your arrays so this is just a guess
I have a ExtJS (4.0) grid and it works fine. Now I want it to advance it a bit by adding filters to it. I want users to be able to filter items by the status.
I have created the following store:
var status_store = Ext.create('Ext.data.Store', {
model: 'Statuses',
proxy: {
type: 'ajax',
url: '/json/statuses/',
reader: 'json'
}
});
and I can see it loads, /json/statuses/ will return the following json object:
[
{
"name": "OK",
"isActive": true
},
{
"name": "Outdated",
"isActive": true
},
{
"name": "New",
"isActive": true
}
]
Now I define the filters:
var filters = {
ftype: 'filters',
encode: encode,
local: local,
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name'
}]
};
and add the filter to my column definition:
{text: 'Status', width: 120, dataIndex: 'status', sortable: true, filterable: true, filter: {type: 'list'}},
What happens is I get the following error when the grid loads:
Uncaught TypeError: Object json has no method 'read' (ext-all-debug.js:25702)
and when I click on the column header for the menu:
Uncaught TypeError: Object status_store has no method 'on' (ListMenu.js:69)
How can I fix this or am I doing something conceptually wrong?
Here is the full quote of my code just in case: http://pastebin.com/SNn6gFJz
Thanks for Diagnosing the problem. The 4.1 fix is this modify ListMenu.js
in the else part of the constructor
replace
me.store.on('load', me.onLoad, me);
with
// add a listener to the store object
var storeObject = Ext.StoreMgr.lookup(me.store);
storeObject.on('load', me.onLoad, me);
me.store = storeObject;
filters: [{
type: 'list',
dataIndex: 'name',
store: 'status_store',
labelField: 'name' ,
options:[a,b]
}]
You also have to give the options in list filters.
I was having a similar problem. I followed the #jd comment on the other answer here but the options menu just said "loading...". I resolved it with a bit of a hack here.