[no subject]
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 :)
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
Wednesday, April 13, 2005
Hi Cameron,
The demo is impressive, but there seems to be a "scrolling issue". On IE and Moz the page is displayed correctly if nothing has to be scrolled. But if the page gets too small to display everything at a time, there is no scrollbar and if scrolled by wheel or keys, the column numbers and the columns do not match anymore.
Please keep this good work up! It's impressive!
Sean Weer
Friday, May 13, 2005
Dear :
i am a beginner of progarmer, now i am doing a project with asp.net . i have designed one tree using table in html ,but it can expand now, i don't know how to do it.
Can you give me solution for it?
Thank you !
Andy
Tuesday, June 21, 2005
I have done something similar (for row expansion) but yours may be better. How can I try it in my own code ?
Frank Gualtieri
Thursday, July 14, 2005
how can we extract data from the grid ??
thanks
-v
Thursday, August 25, 2005
there's documentation on how to do it, or do a search on this forum ;)
AcidRaZor
Thursday, August 25, 2005
It's a pretty good work ...
by
sankar
Monday, October 10, 2005
COULD I DOWNLOAD THE SOURCE?
Monday, October 10, 2005
Cameron,
Your code is great and that's what i'm looking for. You are displaying the grid data in your demo page. However, i have a problem displaying the grid data on the button click of a row. It just display the data from the 1st column of 1st row even after passing my grid in expandRow function:
expandRow(row.getId().split(".")[0] , row.getId(), row.getProperty("item/index"), expandColumn, expandHeight, myData);
I know why because I have expandColumn defined as:
var expandColumn = 1;
It would be great if you can put the entire source code for your demo or point me the place from where I can download.
Shaan
Monday, March 20, 2006
This thing is good, but i found a bug.
Try this,click on a column to edit, then resize it.you will found out the text boxes are not resized.
Further more, if there is a horizontal scroll bar, you will found out the text boxes are not attacthed to the column.
kelvink
Thursday, April 13, 2006
This topic is archived.
Back to /active.examples/expand-row-on-click.html
Get the new version
ActiveWidgets 2.5.5 Free Trial
IE, Firefox, Safari, Opera, Chrome
Released Sep 25, 2009
Documentation:
ActiveWidgets
Base Library
Grid Control
Form Controls
Class Reference
Version 1.0
System Namespace
HTML Namespace
Templates Namespace
HTTP Namespace
Text Namespace
XML Namespace
Formats Namespace
Controls Namespace
How to...
Examples
Drag and drop rowsDropdown Grid TemplateExpand row on clickMoving/ResizingStable sortingForum search
hi ppl....th above example is the best one....but wen i use var exp Image thing in my gird..the total html tag is visible rather dan the image.....plz help me out.....and wen i use the #ROW INDEX thing....i m getting tat my grid is null or nt an object plz help me out
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
Wednesday, April 13, 2005
Hi Cameron,
The demo is impressive, but there seems to be a "scrolling issue". On IE and Moz the page is displayed correctly if nothing has to be scrolled. But if the page gets too small to display everything at a time, there is no scrollbar and if scrolled by wheel or keys, the column numbers and the columns do not match anymore.
Please keep this good work up! It's impressive!
Sean Weer
Friday, May 13, 2005
Dear :
i am a beginner of progarmer, now i am doing a project with asp.net . i have designed one tree using table in html ,but it can expand now, i don't know how to do it.
Can you give me solution for it?
Thank you !
Andy
Tuesday, June 21, 2005
I have done something similar (for row expansion) but yours may be better. How can I try it in my own code ?
Frank Gualtieri
Thursday, July 14, 2005
how can we extract data from the grid ??
thanks
-v
Thursday, August 25, 2005
there's documentation on how to do it, or do a search on this forum ;)
AcidRaZor
Thursday, August 25, 2005
It's a pretty good work ...
by
sankar
Monday, October 10, 2005
COULD I DOWNLOAD THE SOURCE?
Monday, October 10, 2005
Cameron,
Your code is great and that's what i'm looking for. You are displaying the grid data in your demo page. However, i have a problem displaying the grid data on the button click of a row. It just display the data from the 1st column of 1st row even after passing my grid in expandRow function:
expandRow(row.getId().split(".")[0] , row.getId(), row.getProperty("item/index"), expandColumn, expandHeight, myData);
I know why because I have expandColumn defined as:
var expandColumn = 1;
It would be great if you can put the entire source code for your demo or point me the place from where I can download.
Shaan
Monday, March 20, 2006
This thing is good, but i found a bug.
Try this,click on a column to edit, then resize it.you will found out the text boxes are not resized.
Further more, if there is a horizontal scroll bar, you will found out the text boxes are not attacthed to the column.
kelvink
Thursday, April 13, 2006
This topic is archived.
Back to /active.examples/expand-row-on-click.html
Get the new version
ActiveWidgets 2.5.5 Free Trial
IE, Firefox, Safari, Opera, Chrome
Released Sep 25, 2009
Documentation:
ActiveWidgets
Base Library
Grid Control
Form Controls
Class Reference
Version 1.0
System Namespace
HTML Namespace
Templates Namespace
HTTP Namespace
Text Namespace
XML Namespace
Formats Namespace
Controls Namespace
How to...
Examples
Drag and drop rowsDropdown Grid TemplateExpand row on clickMoving/ResizingStable sortingForum search
hi ppl....th above example is the best one....but wen i use var exp Image thing in my gird..the total html tag is visible rather dan the image.....plz help me out.....and wen i use the #ROW INDEX thing....i m getting tat my grid is null or nt an object plz help me out
jessica
November 11,