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 :)

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"/>&nbsp;</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!

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!

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 !

I have done something similar (for row expansion) but yours may be better. How can I try it in my own code ?

how can we extract data from the grid ??

thanks
-v

there's documentation on how to do it, or do a search on this forum ;)

It's a pretty good work ...
by
sankar

COULD I DOWNLOAD THE SOURCE?

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.

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.