expand a row when it is clicked to display details

I would like to be able to display a relative positioned <div> under a row that I've clicked on. I can get itto work in IE by getting the rows outerHTML and then concatenating the detail's div to it. Since outerHTML is not recognized by the "mozilla"-like browsers and I need this to work in those as well I need some help.

Can anyone tell me how I can get the same result in a "mozilla" browser as I do in IE when I do something like:

someDiv.outerHTML=someDiv.outerHTML+"<DIV><BR>HELLO THERE</DIV>"

A sample that works in IE is at:
http://www.secretagentsband.com/aw/examples/grid/testRowExpansion.html

There are still a few things that I must take care of. 1) the row needs to contract also, 2) as rows are expanded toward the top of the grid, rows are lost at the bottom. So the scroller needs to know that it can scroll further

Any help is appreciated,

Frank

Frank

More info, I've also been able to get the rows to expand (sort of) by adjusting the innerHTML. This version will come closer to working across browsers but the row's style sheet must be adjusted as follows for IE:

.active-templates-row{overflow-y:hidden;white-space:nowrap;width:100%;height:18px;-moz-user-select:none;}
needs to be
.active-templates-row{overflow-y:visible;white-space:nowrap;width:100%;height:18px;-moz-user-select:none;}

The Problems:

In Internet Explorer:
The problem that is left in IE after making the stylesheet adjustment is that the part of the row that originally displayed (the part prior to expansion) grows as tall as the expanded section. It seems that the row is smart enough to make itself as tall as the tallest div in its innerHTML. I need to avoid that.

http://www.secretagentsband.com/aw/examples/grid/testRowExpansion_innerHTML_withGeckoPatch.html

In Mozilla browsers (i.e. Mozilla, FireFox, NS):

The problem(s) that are left in "mozilla" browsers varys.

If I use a style sheet with the patch that takes care of the grid lines not displaying then clicking a row seems to have no effect:

http://www.secretagentsband.com/aw/examples/grid/testRowExpansion_innerHTML_withoutGeckoPatch.html

If I use a style sheet without the patch mentioned above then 1) the grid lines do not appear when I scroll to the right and 2) the row doesn't expand, but instead the new div overlays the rows below:

http://www.secretagentsband.com/aw/examples/grid/testRowExpansion_innerHTML_withGeckoPatch.html

Again, any help is appreciated,

Frank

I'm still working on this code, but it allows resizing and expand-to-fit for rows and columns, is this the direction you are heading?
(include this file in your page, and instantiate ResizeGrid instead of Grid)

Active.Controls.ResizeGrid = Active.Controls.Grid.subclass();

Active.Controls.ResizeGrid.create = function(){

/****************************************************************

    Enhances the grid control with resizable rows.

*****************************************************************/

    var obj = this.prototype;
    var _super = this.superclass.prototype;
    
//	------------------------------------------------------------	
    
    // add double-click resize action to header
    var div = Active.Templates.Header.prototype.getContent("div");
    div.setEvent("ondblclick", function(){this.action("resizeWidthToFit")});
    
//	------------------------------------------------------------	
    
    // add resize ability to rows
    var resize = new Active.HTML.DIV;
    resize.setClass("box", "verticalresize");
    resize.setEvent("onmousedown", function(){this.action("startRowResize")});
    resize.setContent("html", " "); 
    resize.setEvent("ondblclick", function(){this.action("resizeHeightToFit")});
    
    Active.Templates.Item.prototype.setContent("div", resize);	
    Active.Templates.Row.prototype.setClass("row", function(){return this.getRowProperty("index");});
    
//	------------------------------------------------------------

    var startRowResize = function(header){
        var el = header.element();
        var pos = event.clientY;
        var size = el.offsetHeight;
        var grid = this;

        var doResize = function(){
            var el = header.element();
            var sz = size + event.clientY - pos;
            el.style.height = sz < 5 ? 5 : sz;
            el = null;
        };

        var endResize = function(){

            var el = header.element();

            if( typeof el.onmouseleave == "function") {
                el.onmouseleave();
            }

            el.detachEvent("onmousemove", doResize);
            el.detachEvent("onmouseup", endResize);
            el.detachEvent("onlosecapture", endResize);
            el.releaseCapture();

            var height = size + event.clientY - pos;
            if (height < 5) {height = 5}
            el.style.height = height;

            var ss = document.styleSheets[document.styleSheets.length-1];
            var i, selector = "#" + grid.getId() + " .active-row-" + header.getItemProperty("index");
            for(i=0; i<ss.rules.length;i++){
                if(ss.rules[i].selectorText == selector){
                    ss.rules[i].style.height = height;
                    ss.rules[i].style.whiteSpace = "normal";
                    el = null;
                    grid.getTemplate("layout").action("adjustSize");
                    return; 
                }
            }
            ss.addRule(selector, "height:" + height + "px");
            el = null;
            grid.getTemplate("layout").action("adjustSize");
        };

        el.attachEvent("onmousemove", doResize);
        el.attachEvent("onmouseup", endResize);
        el.attachEvent("onlosecapture", endResize);
        el.setCapture();

//		break object reference to avoid memory leak
        el = null;

        event.cancelBubble = true;
    };

    obj.setAction("startRowResize", startRowResize);
    
//	------------------------------------------------------------

    var resizeHeightToFit = function(header){
        var el = header.element();
        var grid = this;
        var rowid = header.getItemProperty("index");
        var row = grid.getRowTemplate(rowid);
        var ss = document.styleSheets[document.styleSheets.length-1];
        var i, data, height;

        // find the maximum height for the row
        height = 5;
        for(i=0; i<grid.getColumnProperty("count");i++){
            data = row.getItemTemplate(i).element();
            if(data.scrollHeight && (data.scrollHeight > (height+1))){
                height = data.scrollHeight + 1;
            }else if(data.offsetHeight > (height+1)){
                height = data.offsetHeight + 1;
            }
            data = null;
        }
        
        // set the height of the row
        var selector = "#" + grid.getId() + " .active-row-" + rowid;
        el.style.height = height;
        for(i=0; i<ss.rules.length;i++){
            if(ss.rules[i].selectorText == selector){
                ss.rules[i].style.height = height;
                el = null;
                grid.getTemplate("layout").action("adjustSize");
                return; 
            }
        }
        ss.addRule(selector, "height:" + height + "px");
        el = null;
        grid.getTemplate("layout").action("adjustSize");
    };

    obj.setAction("resizeHeightToFit", resizeHeightToFit);	
    
//	------------------------------------------------------------

    var resizeWidthToFit = function(header){
        var el = header.element();
        var grid = this;
        var colid = header.getItemProperty("index");
        var ss = document.styleSheets[document.styleSheets.length-1];
        var i, data, width;

        // find the maximum width for the row
        width = 5;
        for(i=0; i<grid.getRowProperty("count");i++){
            data = grid.getRowTemplate(i).getItemTemplate(colid).element();
            if(data.scrollWidth && (data.scrollWidth > (width+1))){
                width = data.scrollWidth + 1;
            }else if(data.offsetWidth > (width+1)){
                width = data.offsetWidth + 1;
            }
            data = null;
        }
        
        // set the height of the row
        var selector = "#" + grid.getId() + " .active-column-" + colid;
        el.style.width = width;
        for(i=0; i<ss.rules.length;i++){
            if(ss.rules[i].selectorText == selector){
                ss.rules[i].style.width = width;
                el = null;
                grid.getTemplate("layout").action("adjustSize");
                return; 
            }
        }
        ss.addRule(selector, "width:" + width + "px");
        el = null;
        grid.getTemplate("layout").action("adjustSize");
    };

    obj.setAction("resizeWidthToFit", resizeWidthToFit);		

    //	------------------------------------------------------------

};

Active.Controls.ResizeGrid.create();

Thanks for your response. I appreciate it.

Unfortuneatly, I seem to get the same result with your code in place (yes, I did change my code to instantiate a ResizeGrid).

Maybe I am not calling on a method after I set the div's inner HTML ?

I should have been clearer in my original post as to what it is that I am trying to do.

What I want to do is; upon clicking on a row display details for that row on the page just below the row that I clicked. I would like all of the other data do move down so the details are not displaying on top of those rows. I want the functionality you see in:

http://www.secretagentsband.com/aw/examples/grid/testRowExpansion.html

when you click on a row BUT without the height of the original data getting to be too large AND I want it to work in IE and the Mozilla-like browsers (i.e. netscape, mozilla, etc.).

OOPS... Ryan, do you have a sample page that uses your new ResizeGrid so I can see the added functionality at work ?

OK, I'm getting closer. The stylesheet patches I have shown below will make my innerHTML vesion of the code expand the rows in both IE and Mozilla. The scroll bar still does not realize that the table has grown taller but the rows all adjust downward when a row is expanded. The other problem I still have is that in Mozilla the "extra" data, that data that I display under the clicked row is not as wide as the original row. I think that that is from the "width: auto" in the gecko patch below.

I got the "innerHTML" version of my row expansion to work by making sure that the following was in my stylesheets:

/*patches*/
/***********************************************************************************************/
//The patch below fixes
// 1- the problem with grid lines not displaying in "mozilla" browsers (the .active... is brand new)
// 2- I (FG) added the "height: auto" in order to get the rows to resize their height when
// details are displayed beneath a row
when you scroll to the right
.active-templates-row.gecko {display: -moz-box; width: auto; height: auto; min-width: 100%;}
/************************************************************************************************/
//The patch below makes sure rows allow data to display after resize
.active-templates-row{overflow-y:visible;white-space:nowrap;width:100%;height:18px;-moz-user-select:none;}

OK, the stuff above is long winded but the bottom line is that I can get rows to expand and contract in both IE and "Mozilla" browsers (with no subclassing). My remaining question is, HOW DO YOU GET THE SCROLL BAR TO ADJUST WHEN THE ROWS BECOME TALLER ?

My original sample has been modified to show the page in its current state. Give it a try.

http://www.secretagentsband.com/aw/examples/grid/testRowExpansion.html

I've been testing mine with a modification of the basic grid example provided with the source. I forgot to include, I made these additions to the stylesheet:

.active-box-verticalresize {
    position: absolute;
    overflow: hidden;
    bottom: -5px;
    height: 10px;
    width: 100%;
    font-size: 100px;
    cursor: s-resize;
}

.active-box-verticalresize .gecko {
    position: relative;
    margin-top: -5px;
    margin-bottom: -5px;
    line-width: 12px;
    z-index: 1000;
}

Other than instantiating ResizeGrid instead of Grid, I didn't make any significant modifications to the test page itself. I'm still new to this source, but it seems like what you are looking for can be found in the endResize callbacks where the width/height styles are readjusted followed by a call to grid.getTemplate("layout").action("adjustSize"); which handles the scrollbars.

Ryan,

Thanks for the update. I'll give your widget another try and then decide if I'd like to use it or if I'll just stick to doing one or two extra calls and using the couple of extra css rules that I came up with. The only thing I was missing is the "adjustSize" that you mentioned. I'm gonna give that a shot now as well.

Frank

Ryan,

Your tip about "adjustSize" was great. My grid now does everything I want it to do. my sample: http://www.secretagentsband.com/aw/examples/grid/testRowExpansion.html

doesn't use your new "ResizeGrid", but I may still try that.

I tried to subclass the Grid last week and have a post up because it didn't quite work. I've used javascript in the past but never to subclass.

Thanks again,

Frank

I'm new to the subclassing myself, I didn't even know about javascripts OO features until a week ago ;) glad I could help some!

Frank,

Does your example link above still only work in IE?

Sorry to have not posted in so long.... Things took me away from the Web Interface that I was writing. Actually, I think that the stuff I uploaded works in all of the browsers now (ie, netscape 7.2, but not 7.1, new versions of mozilla and firefox). In the mozilla based browsers the row numbers screw things up a bit, but if you modify the code to get rid of those then it works in all of the browsers.

Awesome job Frank!

Here is an improvement on the code that will close that last expanded row when a new one is opened up.

var origRowDivs = new Array(myData.length);
                var lastRowIndex;
                function expandIt(src, playerid) {
                    currentRowIndex=src.getProperty("row/index");
                    currentRow=obj.getProperty("row/template",currentRowIndex);
                    currentRowElement=currentRow.element(); 
                    if (lastRowIndex) {
                        lastRow=obj.getProperty("row/template",lastRowIndex);
                        lastRowElement=lastRow.element(); 
                        lastRowElement.innerHTML=origRowDivs[lastRowIndex];
                        origRowDivs[lastRowIndex]=null;
                    }
                    if(origRowDivs[currentRowIndex] == null && lastRowIndex != currentRowIndex) {
                        origRowDivs [currentRowIndex]=currentRowElement.innerHTML;
                        currentRowElement.innerHTML="<DIV>"+currentRowElement.innerHTML+"<DIV class='confirmdraft'>Expanded Row Text</DIV></DIV>";
                        lastRowIndex = currentRowIndex;
                    } else {
                        lastRowIndex = 0;
                    }
                }