PDA

View Full Version : How can i load JSON Data into PropsGrid?



Micha
26 Dec 2006, 9:44 AM
i use Borderlayout with a paged GridView in centerpanel. It shows me Car Data like Year, Mileage, Location, Price etc. from JSON data.
grid.getSelectedRowId() returns me the current selected ID.
Now i want to use Propsgrid on the east panel to show/edit the current selected CarData, but i have no clue how to load the data into PropsGrid. Do i have to use JSONView or JSONDataModel and how to apply it it to the Propsgrid ?

tryanDLS
26 Dec 2006, 9:59 AM
When you select the grid row, you could pass that row to a PropsDataModel instance. Look at the custom grid example, which uses a property grid. I would think you would just want to build a 'source' object using the elements of the selected row, and matching colModel values from the grid.

Micha
26 Dec 2006, 12:12 PM
Thanks Tim for fast reply :D

But no Clue atm how to bind the json schema to the property grid :cry:

the php part works very well and returns the selected data (its a lot more detailed data as in the center table, wich is more for a fast overview).

tryanDLS
26 Dec 2006, 12:19 PM
PropsGrid takes an arg object that's basically name/value pairs of property name/value. You have to take the schema from the base grid and build an object for each of those items which is the col name (from the schema) and the col value (from the selected row).

Micha
26 Dec 2006, 3:21 PM
i give up. Cant get it work.

jack.slocum
26 Dec 2006, 3:26 PM
var dm = grid.getDataModel();
var dataRow = dm.getRow(grid.getSelectedRowIndex());
// now you need your props grid
propsGrid.setSource(dataRow.node); // node is the original JSON object that was loaded into dm

Micha
26 Dec 2006, 4:18 PM
doesnt work.
alert(dataRow);
dataRow undefined

but i have

sm = new YAHOO.ext.SingleSelectModel():
sm.addListener('selectionchange', onSelection);

var onSelection = function() {
var id = grid.getSelectedRowId();
alert('id= ' + id);
}
it alerts me the right id.

jack.slocum
26 Dec 2006, 4:54 PM
It will work. There has to be something else wrong.

The code you posted getSelectedRowId() does basically the same thing, only it takes the long way around.

FYI, instead of alerting everything why don't you call YAHOO.print? or get firebug and console.log()

Micha
26 Dec 2006, 4:56 PM
firebug tells me dataRow has no properties.

jack.slocum
26 Dec 2006, 5:15 PM
Find out what this is:
grid.getSelectedRowIndex()

tryanDLS
26 Dec 2006, 5:16 PM
Maybe you could post more of sample or a link. Your not giving us very much to go on.

Micha
27 Dec 2006, 4:19 AM
here is my code

var myInterface = function(){
var grid, dm, cm, sm, sort, schema, grid;

function changeColor(val){
if(val <= 30){
return '<span style="color:green;">' + val + '</span>';
}else if(val >= 30 && val <= 60){
return '<span style="color:orange;">' + val + '</span>';
}else if(val >60){
return '<span style="color:red;">' + val + '</span>';
}
return val;
};
var onSelection = function(){
var rIndex = grid.getSelectedRowIndex();
if(rIndex){
// queue/cancel loading for 350 milli in case nav with arrow keys
//loadTask.delay(350, loader.update, loader, ['posts.php', {'topicId': topicId}]);
alert('RowIndex = ' + rIndex) ;
}
};
var autohausChanged = function(jv) {
var selNode = jv.getSelectedNodes()[0];
var AHID = selNode.value;
dm.baseParams = {'AHID': AHID};
dm.loadPage(1);
};

return {
init : function(){
// start initializing grid
sm = new YAHOO.ext.grid.SingleSelectionModel();
sm.addListener('selectionchange', onSelection);

sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

cm = new YAHOO.ext.grid.DefaultColumnModel([
{header: "IntNr", width: 70, sortable: true, sortType: sort.asUCString},
{header: "Tage", width: 40, sortable: true, sortType: sort.asInt, renderer: changeColor},
{header: "Ort", width: 40, sortable: true, sortType: sort.asUCString},
{header: "VK", width: 40, sortable: true, sortType: sort.asUCString},
{header: "Typ", width: 40, sortable: true, sortType: sort.asUCString},
{header: "Kategorie", width: 95, sortable: true, sortType: sort.asUCString},
{header: "Hersteller", width: 95, sortable: true, sortType: sort.asUCString},
{header: "Typ", width: 100, sortable: true, sortType: sort.asUCString},
{header: "Preis", width: 70, sortable: true, sortType: sort.asFloat }
]);
cm.defaultSortable = true;

schema = {
root: 'pkw',
totalProperty: 'anzahl',
id: 'id',
fields: ['intnr', 'online', 'ort', 'vk', 'art', 'kategorie', 'hersteller', 'typ', 'preis']
};

dm = new YAHOO.ext.grid.JSONDataModel(schema);
dm.initPaging('../phpfiles/getcars.php', 20);
dm.setDefaultSort(cm, 0, 'ASC');
dm.baseParams = {'AHID': 0};
dm.addListener('load', sm.selectFirstRow, sm, true);
dm.remoteSort = true;

// create the Grid
grid = new YAHOO.ext.grid.Grid('pkw-list', dm, cm, sm);
grid.render();
grid.getSelectionModel().selectFirstRow();

var tb = grid.getView().getPageToolbar();
tb.addSeparator();
tb.addSeparator();
var selAH = YAHOO.ext.DomHelper.append(document.body,{tag: 'select', id: 'selAH'});
var optAH = YAHOO.ext.DomHelper.createTemplate({tag: 'option', value: '{id}', html: '{firma}'});
var jv = new YAHOO.ext.JsonView('selAH', optAH, {
singleSelect: true,
jsonRoot: 'autohaus',
emptyText : 'no Data'
});
jv.load({url: '../phpfiles/getfirma.php'});
jv.on('click', autohausChanged);
tb.add('Filiale:', selAH);



var dataModel = grid.getDataModel();
var dataRow = dataModel.getRow(grid.getSelectedRowIndex());

var propsGrid = new YAHOO.ext.grid.PropsGrid('props-grid');
// bogus object as a data source
propsGrid.setSource(dataRow.node);
propsGrid.render();

dm.loadPage(1);
}
}
}();

siteLayout = function(){
var layout;
return {
init : function(){
layout = new YAHOO.ext.BorderLayout(document.body, {
hideOnLayout: true,
north: {
split:false,
initialSize: 40,
titlebar: false
},
west: {
split:true,
initialSize: 175,
minSize: 150,
maxSize: 200,
titlebar: true,
collapsible: true,
animate: true
},
east: {
split:true,
initialSize: 202,
minSize: 175,
maxSize: 400,
titlebar: true,
collapsible: true,
animate: true
},
south: {
split:false,
initialSize: 50,
minSize: 50,
maxSize: 50,
titlebar: false,
collapsible: false,
animate: false
},
center: {
titlebar: true,
autoScroll:true
}
});
layout.beginUpdate();
layout.add('north', new YAHOO.ext.ContentPanel('north', 'CarComm'));
layout.add('south', new YAHOO.ext.ContentPanel('south', {title: 'South', closable: false}));
layout.add('west', new YAHOO.ext.ContentPanel('west', {title: 'Menue', closable: false}));
myInterface.init();
layout.add('east', new YAHOO.ext.ContentPanel('props-panel', {title: 'Details', closable: false}));
//layout.add('east', new YAHOO.ext.ContentPanel('autoTabs', {title: 'Details', closable: false}));
//layout.add('east', new YAHOO.ext.ContentPanel('bilder', {title: 'Bilder', closable: false}));

layout.add('center', new YAHOO.ext.ContentPanel('centerpkw', {title: 'PKW Liste', closable: false}));
layout.add('center', new YAHOO.ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));
layout.getRegion('center').showPanel('center');
//layout.getRegion('west').hide();
layout.endUpdate();
}
}
}();
YAHOO.ext.EventManager.onDocumentReady(siteLayout.init, siteLayout, true);

Firebug shows me dataRow has no properties.
All other works very well if im disable propsGrid.setSource(dataRow.node);
it shows me the grid, i click on a row, it tells me first -1, than the right rowindex.

tryanDLS
27 Dec 2006, 9:35 AM
This code appears to be in the wrong place. You can't get a valid dataRow until the grid is loaded.
Also, this needs to occur every time you select a row, so that propsGrid gets repopulated. This should probably be in the onSelection method. Also, you proablably don't want to have events for both click and onSelection - since a click implies selection, all this code could be in onSelection. You may have some scoping issues to resolve, since propGrid is not declared at the myInterface level.
Also, I don't think you want to call load on the view, since the datamodel is handling the load.



propsGrid.setSource(dataRow.node);
propsGrid.render();

Micha
27 Dec 2006, 1:08 PM
Many Thanks Tim and Jack for helping me !

i found a example here http://www.yui-ext.com/forum/viewtopic.php?t=128, its not exactly the same, but it works now in a modified version with my JSON Data. :D

But Jack, it works with this.userData.addRow(dataRow); not with ....addRow(dataRow.node).

Micha
28 Dec 2006, 2:27 AM
I have changed the the second Table now to a propsGrid and it works with setSource(dataRow.node).
Sorry Jack for my last post. Its not easy for a beginner to understand how all things works together. :wink:

Micha
28 Dec 2006, 7:05 AM
Hi all

I have a Question about the Grid Behavior. If im selecting a row in the paged Table, it returns me sometimes -1 for the selected Row. No clue why. The strange Thing is, if i hit the next Page Button, it loads and loads, if i hit the button twice, the second page pops up. Can anyone help me to fix that?
here is my code:

var application = function(){

return {
init : function(){
var schema = {
root: 'pkw',
totalProperty: 'anzahl',
id: 'id',
fields: ['intnr', 'online', 'ort', 'vk', 'art', 'kategorie', 'hersteller', 'typ', 'preis']
};
var dataModel = new YAHOO.ext.grid.JSONDataModel(schema);

dataModel.initPaging('../phpfiles/getcars.php', 15);
dataModel.setDefaultSort(colModel, 0, 'ASC');
dataModel.baseParams = {'AHID': 0};
dataModel.remoteSort = true;
dataModel.loadPage(1);
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "IntNr", width: 70, sortable: true, sortType: sort.asUCString},
{header: "Tage", width: 40, sortable: true, sortType: sort.asInt},
{header: "Ort", width: 40, sortable: true, sortType: sort.asUCString},
{header: "VK", width: 40, sortable: true, sortType: sort.asUCString},
{header: "Typ", width: 40, sortable: true, sortType: sort.asUCString},
{header: "Kategorie", width: 95, sortable: true, sortType: sort.asUCString},
{header: "Hersteller", width: 95, sortable: true, sortType: sort.asUCString},
{header: "Typ", width: 100, sortable: true, sortType: sort.asUCString},
{header: "Preis", width: 70, sortable: true, sortType: sort.asFloat }
]);
colModel.defaultSortable = true;

var sm = new YAHOO.ext.grid.DefaultSelectionModel();
sm.addListener('selectionchange', this.loadUserGrid, this, true);
this.appGrid = new YAHOO.ext.grid.Grid('application_grid', dataModel, colModel, sm);
this.appGrid .render();
this.initUserGrid();
},

initUserGrid : function(){

this.userData = new YAHOO.ext.grid.DefaultDataModel([]);
this.userGrid = new YAHOO.ext.grid.PropsGrid('user_grid');
this.userGrid.render();
},

loadUserGrid : function(){
var dataM = this.appGrid.getDataModel();
var rowIndex = this.appGrid.getSelectedRowIndex();
var dataRow = dataM.getRow(rowIndex);

if (rowIndex != -1) {
this.userData.removeAll();
//this.userGrid.setSource(dataRow.node);
this.userGrid.setSource(
{
"Interne Nummer": dataRow[0],
"Online": dataRow[1],
"Hersteller": dataRow[2],
"Verkäufer": dataRow[3],
"Fahrzeugtyp": dataRow[4],
"Kategorie": dataRow[5],
"Standort": dataRow[6],
"Modell": dataRow[7],
"Preis": dataRow[8]
});
}

}
}
}();
YAHOO.util.Event.on(window, 'load', application.init, application, true);

tryanDLS
28 Dec 2006, 9:53 AM
This could be a timing issue. You're looking at selectedRowIndex of the grid in your loadusergrid method, which may not be populated until the selectionmodel's selectionchange event is complete. The selectionchange event passes args to your method which include an array of selected items and a string of the selected ids. You should try to use that data to drive your process, rather than the info from the grid.

Micha
29 Dec 2006, 9:27 AM
Thanks Tim :)