This is a great example! Here's an enhancement.
Yo Andres!!! You rock!
This example is one of the most useful ones I've seen yet for AW yet. Kudos.
I was thinking ... about the problem surrounding not being able to have the editable features as well as the expandable row.
A simple solution would be to have the first column of the grid act like a bit of a tree view. Make it an image '+'. Then in the onclick of a row detect if you are in the first cell, or for that matter make it an onclick of the actual img tag so the grid never picks it up on the double click. Then change the img to a '-' and display the expanded row. This would be similar to what Microsoft Access does with relationships.
I threw together a little example using your code that shows just what I mean . There is a little more work that needs to go into it to disable the edit feature on the first column and disable sorting, but its just a mockup so you'll get the idea.
http://www.terriblecow.com/awc/ex_row/dyntable.html
There are a few changes that don't relate to this idea in the code, but the main changes are as follows.
The first change is to get the image into the datagrid. Now the easiest way for me was to just include the HTML code for an image in the array. I know this may not be the most correct way to do it according to may examples already posted, but it works for me :)
Now replace the #ROWINDEX" in the img tag so there is some reference to the right row in the grid. You could use img.parent if you wanted to get the right row id, but this was the quick way remember.
Don't forget to add a new column header for the new column.
Now the only thing left to do is shortcut the onclick function. So we've set the function expImage_Click to be called on the image click and here is what that function looks like.
No I changed what the expanded div holds. I added another instance of the grid, but other than that it's just what you've suggested.
I think this is a pretty good work around to having to toggle between edit and expansion modes.
Let me know what you think.
Once again, good work!
This example is one of the most useful ones I've seen yet for AW yet. Kudos.
I was thinking ... about the problem surrounding not being able to have the editable features as well as the expandable row.
A simple solution would be to have the first column of the grid act like a bit of a tree view. Make it an image '+'. Then in the onclick of a row detect if you are in the first cell, or for that matter make it an onclick of the actual img tag so the grid never picks it up on the double click. Then change the img to a '-' and display the expanded row. This would be similar to what Microsoft Access does with relationships.
I threw together a little example using your code that shows just what I mean . There is a little more work that needs to go into it to disable the edit feature on the first column and disable sorting, but its just a mockup so you'll get the idea.
http://www.terriblecow.com/awc/ex_row/dyntable.html
There are a few changes that don't relate to this idea in the code, but the main changes are as follows.
The first change is to get the image into the datagrid. Now the easiest way for me was to just include the HTML code for an image in the array. I know this may not be the most correct way to do it according to may examples already posted, but it works for me :)
var expImage = '<span style="height:9px;width:9px;margin-top:2px;margin-left:1px;margin-right:1px;padding:0px;" ><img title="Expand me" src="images/plus_9.gif" onclick="return expImage_Click(this.getAttribute(\'rowIndex\'),this, event);" rowIndex="#ROWINDEX#" rowExpanded="false"/> </span>';
var myData = [
[expImage,"MSFT","Microsoft Corporation", "314,571.156", "32,187.000", "55000"],
[expImage,"ORCL", "Oracle Corporation", "62,615.266", "9,519.000", "40650"]
];
//and so on.Now replace the #ROWINDEX" in the img tag so there is some reference to the right row in the grid. You could use img.parent if you wanted to get the right row id, but this was the quick way remember.
for (var i = 0;i < myData.length;i++) myData[i][0] = myData[i][0].replace(/#ROWINDEX#/g,i);Don't forget to add a new column header for the new column.
var myColumns = [
"", "Ticker", "Company Name", "Market Cap.", "$ Sales", "Employees"
];Now the only thing left to do is shortcut the onclick function. So we've set the function expImage_Click to be called on the image click and here is what that function looks like.
function expImage_Click(index, img, event) {
var row = obj.getRowTemplate(index);
var cell = row.getItemTemplate(0);
expandRow(row.getId().split(".")[0] , row.getId(), row.getProperty("item/index"), expandColumn, expandHeight, myData);
if(img.getAttribute("rowExpanded") == "false") {
img.setAttribute("rowExpanded","true");
img.src = 'images/minus_9.gif';
}
else {
img.setAttribute("rowExpanded","false");
img.src = 'images/plus_9.gif';
}
//now cancel the row click event
//so you don't always have the expansion selected
return _noBubbling(event);
}No I changed what the expanded div holds. I added another instance of the grid, but other than that it's just what you've suggested.
I think this is a pretty good work around to having to toggle between edit and expansion modes.
Let me know what you think.
Once again, good work!
Cameron
April 13,