PDA

View Full Version : Loading Data from one table to the other on click



irishdunn
4 Oct 2006, 10:54 AM
I want to populate data in a secondary table when I click on my master table, how can I do this? I have an event function in my master table that fires on a click and sends the rowIndex, but where do I place the function to edit the datamodel of the secondary table.

I dont understand the:

var Viewer = {
init : function(){

inside the init : function() is all of my tables parameters and setup and I want to be able to dynamically change the datamodel inside that function, but I believe that my event handler has to be outside the init : function()

I am extremely noob to this, any help would be very much appreciated.

jack.slocum
4 Oct 2006, 12:22 PM
Where is the secondary data coming from? Are you looking to transfer data from the first table or load new data in the 2nd table based on the selection in the first table?

irishdunn
4 Oct 2006, 12:29 PM
load data based on a selection in the primary table IE rowIndex will give me a number which will tell me what data to load in the second table.

jack.slocum
4 Oct 2006, 1:34 PM
What I'm looking for is how/what the 2nd table is supposed to load? Is it going to load related sub data from an XML file via http or do you have a secondary set of array data or is it just going to display the same data as in grid one? There are alot of differnt ways to load secondary (drill down) data.

irishdunn
5 Oct 2006, 7:56 AM
I want to just fill with Dummy Data at this point, here I will show you my two grids starting with the master grid, then the subgrid:


var application = {
init : function(){
// some data yanked off the web
var myData = [
['Investment Advisor'],
['Stock Analysis Tool']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);

// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Application", width: 170, sortable: true, sortType: sort.asUCString}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
this.grid = new YAHOO.ext.grid.Grid('application_grid', dataModel, colModel);

// event Listener functions
/*
var onRowClick = function(grid, rowIndex, e) {
//loadUserGrid(rowIndex);
}
this.grid.addListener('rowclick', onRowClick);

var onRowDoubleClick = function(grid, rowIndex, e){
//Nothing Here
}
this.grid.addListener('rowdblclick', onRowDoubleClick);

*/
// Render the grid after setup is complete.
this.grid.render();

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

YAHOO.util.Event.onAvailable(application, 'rowclick', 'user'.appChosen, 'rowIndex', true );

and now the secondary grid:


var user = {
init : function(){
// Need to pull this data from an event handler on the first row.
var myData = [

];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);


// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Application user List", width: 170, sortable: true, sortType: sort.asUCString}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
dataModel.setDefaultSort(colModel, 0, 'ASC'); // Sort usernames aphabetically
this.grid = new YAHOO.ext.grid.Grid('user_grid', dataModel, colModel);

// event Listener functions

function appChosen(rowIndex) {
if(rowIndex == 0) {
dataModel = [['Andrew Dunn'],['John Smith']];
} else if(rowIndex == 1) {
// nothing now, just see if the first bastard works
}
}


this.grid.render();
}
}
YAHOO.util.Event.on(window, 'load', user.init, user, true);


if you notice in the master grid I am trying to append an event in the form of:

YAHOO.util.Event.onAvailable(application, 'rowclick', 'user'.appChosen, 'rowIndex', true );

the 'user' is the only way I could get VS to build the file, but I know it is not firing the method in the my user grid object.... ultimately here is where I need the explination jack, I appreciate your help.

If you notice any way of me doing this wrong please let me know, I am just building a proof of concept at this point, but the true working program will actually have to open an async conn and query an sql database, this is much over my head and I have another developer that is going to help me but I have been thinking I might want to incorporate the XMLDataModel now that way its a smooth move in the future. Please doll out advice!

TIA

Andrew[/code]

jack.slocum
6 Oct 2006, 12:40 AM
It would probably be easy to implement using the XMLDataModel from the start.

The event you want to subscribe to is the selection model's on selectionchange or rowselect.

You will probably also want to use a SingleSelectionModel. If you look at the data binding post on my blog, it has an example of doing these two things (int he linked js file).

When a row is selected, you can get it's id from your data model:

var itemId= grid.getSelectedRowId();

and then call load on your second grid's data model:

dataModel2.load('data.php', {id: itemId});

irishdunn
7 Oct 2006, 8:47 AM
Allright jack, I have made some progress in being able to use the yui.util.event to subscribe to events fired by html peices on my page, but I ultimately need to be able to subscribe to an event that is internal to a grid so that I can get the variables that are fired for each specific event ie rowIndex. I have cruised through all of your demos and I am still probably bashing my head against the wrong wall, can u help me out with some code here.

Once again sorry for the huge code ammounts.


HERE IS THE MASTER GRID


var application = {
init : function(){
// Dummy Data
var myData = [
['SSG'],
['MMB']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);


// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Application", width: 200, sortable: true, sortType: sort.asUCString}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
this.grid = new YAHOO.ext.grid.Grid('application_grid', dataModel, colModel);

// event Listener functions
/*
var onRowClick = function(grid, rowIndex, e) {
alert("row:"(rowIndex+1));
}
this.grid.addListener('rowclick', onRowClick);
*/

// Render the grid after setup is complete.
this.grid.render();

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


HERE IS THE SUBSCRIBING GRID


var user = {
init : function(){
// Data
var myData = [
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);


// sortTypes provide support for custom sorting comparison functions
// not needed for this table but here for demonstration
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;

// the DefaultColumnModel expects this blob to define columns. It can be extended to provide
// custom or reusable ColumnModels
var myColumns = [
{header: "Application user List", width: 680, sortable: true, sortType: sort.asUCString}
];
var colModel = new YAHOO.ext.grid.DefaultColumnModel(myColumns);

// create the Grid
dataModel.setDefaultSort(colModel, 0, 'ASC'); // Sort usernames aphabetically
this.grid = new YAHOO.ext.grid.Grid('user_grid', dataModel, colModel);

// event Listener functions

var onRowClick = function(grid, rowIndex, e) {
alert("APP CLICK!");
}
// this.grid.addListener('rowdblclick', onRowClick);

// Render, but only once because the grid will detect datamodel changes
this.grid.render();
}
}

var ssg = [
['Andrew'],
['Gordon'],
['Jeff']
];

var mmb = [
['KimJohn'],
['Boyd'],
['Kaleigh']
];

function changeGrid(grid, rowIndex, e) {
alert("FOOOOOOOOOOOOOOOO!");
if(grid.getSelectedRowIndex() == 0) {
user.grid.dataModel.data = ssg;
} else if(rowIndex ==1) {
user.grid.dataModel.data = mmb;
}
}

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

YAHOO.util.Event.on(document.getElementById("application_grid"), 'click', changeGrid , true);



As you can see on that second event subscription outside of the init I am subscribing to the html piece on the page, not the actual grid. So when I execute the function I don?t get the proper arguments passed in (i.e. rowIndex, e)

Because I have such a lack of programming experience I cant see how to reference back into my user.grid object to change attributes when I am outside of the init function.

jack.slocum
7 Oct 2006, 9:40 AM
Here's your code, I modified it for you to do what you want. It is untested but should work. I usually don't do this because then you don't learn to do it on your own and that is the most important thing. You code looked very lost though so I thought you could use a little help getting started.

A couple notes:

- You probably don't want to use standard DOM events to respond to grid events. There is an event on the grid, selection models or data models for just about everything.

- In the code block below, anything inside the "application" inline function that comes before "return { init : function(){" is available to all your functions without the need for "this.".

- Accessing the data model "data" private variable directly (although legal in JS) is not a great idea. If you modify it directly it becomes your responsibility to fire the correct events, apply the current sort, etc. It's better to use removeAll() and addRows() and all that stuff is handled for you.



var application = function(){
var ssg = [
['Andrew'],
['Gordon'],
['Jeff']
];

var mmb = [
['KimJohn'],
['Boyd'],
['Kaleigh']
];

return {
init : function(){
var myData = [
['SSG'],
['MMB']
];
var dataModel = new YAHOO.ext.grid.DefaultDataModel(myData);

var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Application", width: 200, sortable: true, sortType: sort.asUCString}
]);

var sm = new YAHOO.ext.grid.SingleSelectionModel();
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([]);
var sort = YAHOO.ext.grid.DefaultColumnModel.sortTypes;
var colModel = new YAHOO.ext.grid.DefaultColumnModel([
{header: "Application user List", width: 680, sortable: true, sortType: sort.asUCString}
]);
this.userGrid = new YAHOO.ext.grid.Grid('user_grid', this.userData, colModel);
this.userGrid.render();
},

loadUserGrid : function(){
alert("FOOOOOOOOOOOOOOOO!");
var rowIndex = this.appGrid.getSelectedRowIndex();
if(rowIndex == -1) { // no row selected
alert('No row selected');
}else{
this.userData.removeAll();
if(rowIndex == 0) {
this.userData.addRows(ssg);
}else if(rowIndex == 1) {
this.userData.addRows(mmb);
}
}
}
}();
YAHOO.util.Event.on(window, 'load', application.init, application, true);

irishdunn
9 Oct 2006, 6:42 AM
Thanks so much jack, yea I really have been lost. I am pretty new to programming in general and this OO javascript is really weird to me compared to native java. The enviroment seems much more complicated.

I have been looking over your binding example for about two days and I really didnt understand it untill you gave me that last snippet of code. I now realize that I can do all of the js for the page in one file, where before I was using seperate js files for each yui component, which lead to my trying to subscribe to events by html reference.

I am moving along a constructive path now and will no doubt have many more questions, but thank you for helping me to finally resolve this lack in understanding.

-irishdunn

jack.slocum
9 Oct 2006, 7:37 AM
Everyone has to start somewhere. Javascript can seem very confusing and complex. I know at one point I hated it. But once you understand it, it really is a simple and very powerful language. Now I hate the time i have to do server-side Java development at work instead. :)