I am trying to get an href or button inside a grid cell to call a function.
First, i CAN'T seem to get an href in at all...(so please show me an href in a grid cell)...
also, i CAN get a button to show with the button tag... but once there i can't use onclick in the button tag, of course, bcause this is inserting the button for all cells in the column... so how do i enteract with it?
i CAN'T seem to get the "get:" to call a function when you already have a value: button... all the button examples in the tests i've seen don't call functions or do anything. They are just there for show.... ASIDE from the tests\test_events.html, which shows a function in a different table reacting when a button is pressed but not the button in grid reacting, which is what i'm looking for.
Also, to complicate things ;)... This grid will be passed from an xhr post servlet. The function that the button will call needs some information from the post. Not sure if i can put that info in the json object and not make it visible in the grid...
gridLayout = [
{
type: 'dojox.GridRowView', width: '20px'
},
{
defaultCell: { width: 8, editor: dojox.grid.editors.Input, styles: 'text-align: right;' },
rows: [
[
{ name: 'Restaurant ID', styles: '', width: '10'},
{ name: "Brand", styles: 'text-align: center;', width: '10'},
{ name: 'Area', styles: '', width: '10'},
{ name: 'Cert Status', styles: '', width: '20' },
{ name: 'Expires in (Days)', styles: '', width: '10' },
{ name: 'Renew', styles: '', width: '80', value: "Renew"}
]
]
}
];
For the grid, set
For the grid, set onCellClick to a function to process cell clicks. The event passed will provide e.rowIndex and e.cell.index (from memory, see Grid docs). If the cell index is the cell the button is in, you may assume the button was clicked and perform an action. Alternatively, and better, if in the correct cell, you can check:
if(e.target.tagName.toLowerCase() == 'button') the do something...You can also use grid.model.getDatum(rowIndex, cellIndex) to get the value in the model for rowIndex, cellIndex (where cellIndex can be a different cell within the row, e.g., to collect some data for the row in which the button resides and use it in the function).
onCellClick
Hey, thanks so much for you comment. It lead to a lot of research that really paid off... i am new to Dojo, so i am still getting the hang of dojo events. One question, when you say: "if(e.target.tagName.toLowerCase() == 'button') then do something" is the "e" an event? and if so, is all that together a "decorated event"? I saw that term, but i am still trying to put my finger on exactly what the api is referring to. I am trying to find you a link to where i saw that... but they are having trouble with their documentation at the moment ;) ... anyway, thanks again! I really appreciate it! -j
Yes, dojo will pass the
Yes, dojo will pass the event (e in my example) to the function you assign to onCellClick. One of the properties of the event is target, the element clicked (an html node). So, e.target could be the button or perhaps, just missing the buttom, the space surrounding the button within the cell. Since you can determine the element tag by node.tagName...the rest.
In addition to standard event properties, as used above, dojo does provide additional properties (see dojo Book in Events and Grid, for example), such as rowIndex.
onCellClick:gridCellClick
function gridCellClick(e) {
if(e.target.tagName.toLowerCase() == 'button') alert('a button');
}
use cell.value to set HTML inside the cell
Here is what I used to place an edit link inside the cell:
{ name: 'Action',
width: '15em',
headerClasses:"gridHeader",
value: "<A HREF=\"javascript:editRow()\">edit</A>"
}
Unfortunately, I can't figure out how to have the grid pass the cell row index to the function.
Hopefully someone will chip in that bit of information.
Jeff
You must have some need to
You must have some need to call the editRow() function to edit?? Rather than using the editor parameter in the constructor (replacing the value parameter)??
I *think* the way to do what you describe is:
1. remove the "value" parameter and add a "get", e.g., {..., get:getCellContent, ....}.
2. add the "getCellContent()" function within the JS script tags:
function getCellContent(inRowIndex) { return "edit"; } If you want editRow() to have access to both the cell index and row index, change the return to: return "edit";Give it a try and let us know how it worked.
grid href
THANK YOU!! This not only was the right solution, you put me on the trail to researching some really cool stuff!! I am still new to dojo, and i can't seem to find the documentation on this stuff very easy, like i can't find the editRow function in the documentation, so i have been looking through source files... But now that i have the gist of the grid, i think i will b able to do some powerful stuff with events when i have those down. Thanx so much for your post!!! I really appreciate all your help!
I had assumed the editRow
I had assumed the editRow function in byrd1089's post above was a custom function he wrote.
The "editor: dojox.grid.editors.Input", as you did in your initial post, is the expected way to provide editing with a grid.
However, there may be occasions when you need to place "something different" (standard input, img, etc.) in a cell, and the above method (get) provided by dojo is pretty cool.
See reply below!!!! Thanks
See reply below!!!! Thanks so much for your post!!!
Solution for use a button for a column
You may be interested by the post: http://dojotoolkit.org/forum/dojox-dojox/dojox-grid-development-discussi...