:: Forum >>

Fixing the row header

In version 1.0 the grid automatically fixed the column headers AND the row header.... now called the selector I guess. That's the key reason I found and began using this grid (excellent work).

In version 2.0 (beta 3) I just noticed (feel kinda stupid about that) that the row header now scrolls along with everything else... I can't have that! I see in the "Enhanced" grid that I can fix columns on the left and right... but I don't need the columns fixed, I need the row headers fixed (what I suppose you'd call column -1). Please help!
Matt Philmon
Wednesday, December 21, 2005
Matt,

you should use extended grid (AW.Grid.Extended) and fix zero columns from the left side (by default there is 1 fixed column) - then the grid will have only row headers (selectors) fixed and all columns will scroll, exactly as in version 1.0

obj.setFixedLeft(0);
Alex (ActiveWidgets)
Wednesday, December 21, 2005
That doesn't make sense (to me) and version 1 did not do that. The row header has always scrolled. The definition of a row header is that it contains information pertaining to a specific row. Having the header stay in place would disassociate it with any given row making it useless.

I would be interested in hearing why you think you need that column of information to be stagnent.
Jim Hunter
Wednesday, December 21, 2005
Matt,

Are you talking about the headers scrolling to the left not up/down? I was picturing a fixed header not moving up/down. Silly me. Of course that doesn't make sense. DOH

If so, I think what you are seeing is currently a bug. Are you embedding the grid into another object? I have seen this behavior in IE when embedding the grid into another object because an exception happenns during the display of the grid. I think if you try it in FF you might see correct behavior.
Jim Hunter
Wednesday, December 21, 2005
Right Jim, the headers... and I think Alex listed the fix first off. I'll try it and see if it works.
Wednesday, December 21, 2005
Alex,

When I changed grids and set the fixed as you suggested:
obj.setFixedLeft(0);

my row header disappears except for a tiny border.
Matt
Wednesday, December 21, 2005
I tried obj.setFixedLeft(0); on the sample grid page and it worked fine. What do you have your selector width set to? Is this grid embedded into anothe robject or rendered directly to the document?
Jim Hunter
Thursday, December 22, 2005
It's rendered into a DIV, but that's about it. I can post the entire thing here.
Matt Philmon
Thursday, December 22, 2005
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>GridsSuckAgain</title>
<meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
<meta name=vs_defaultClientScript content="JavaScript">
<meta name=vs_targetSchema content="http://schemas.microsoft.com/intellisense/ie5">
<style> body, html {margin:0px; padding: 0px; overflow: hidden;} </style>
        <script src="../ActiveWidgets2B3Runtime/lib/aw.js"></script>
        <link href="../ActiveWidgets2B3Runtime/styles/xp/aw.css" rel="stylesheet">
        <style>
            .aw-grid-control {height: 100%; width: 100%; margin: 0; border: none; font: menu; font-size: 12px; background-color: #E0DFE3}
            .aw-column-0 {width: 200px;}
            .aw-column-1 {width: 200px;}
            .aw-column-2 {width: 200px;}
            .aw-column-3 {width: 200px;}
            .aw-column-4 {width: 200px;}
            .aw-column-5 {width: 200px;}
            .aw-column-6 {width: 200px;}
            .aw-column-7 {width: 200px;}
            .aw-column-8 {width: 200px;}
            .aw-column-9 {width: 200px;}
            .aw-column-10 {width: 200px;}
            .aw-column-11 {width: 200px;}
            .aw-column-12 {width: 200px;}
            .aw-column-13 {width: 200px;}
            .aw-column-14 {width: 200px;}
            .aw-grid-headers {color: blue;}
            .aw-grid-row {height: 75px;}
            .aw-grid-cell {border-right: 1px solid threedlightshadow;}
            .aw-grid-row {border-bottom: 1px solid threedlightshadow;}
            .aw-rows-selected {background: #316ac5;}
            .aw-mouseover-row .aw-row-selector {color: red;}
        </style>
</head>
    <body onresize=ResizeGridDiv() onload=ResizeGridDiv()>
        <form name="Form1" method="post" action="GridsSuckAgain.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDwtNjU0MzcyMTk1Ozs+uZQ9PSHxzc6AaaGRReeY3yQ0k3A=" />

        <center><div class="scrollTable" id="scrollTable" style="overflow: auto; height: 450; width: 98%;"><script>
var myData = [["<u>NEWS147DAYWEATHER</u> - 1 Item<BR>News14-HighLow (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>DDI</u> - Max Items<BR>YBX-NationalNews (RSS)","<u>Missing</u>","<u>GLKEVSTOCKS</u> - Max Items<BR>YBX-NationalNews (RSS)","<u>NEWS14WEATHER_282</u> - 1 Item<BR>News14-Weather (EC)","<u>Missing</u>","<u>Missing</u>"],["<u>NEWS147DAYWEATHER</u> - 1 Item<BR>News14-HighLow (EC)","<u>DDI</u> - 6 Items<BR>News14-HighLow (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>DDI</u> - 6 Items<BR>News14-HighLow (EC)","<u>Missing</u>","<u>DDI</u> - Max Items<BR>News14-HighLow (EC)","<u>Missing</u>","<u>GLKEVSTOCKS</u> - Max Items<BR>GLKev-Stocks (DDU)","<u>GLKEVWEATHER_28202</u> - 1 Item<BR>GLKev-Weather (DDU)","<u>Missing</u>","<u>Missing</u>"],["<u>NEWS147DAYWEATHER</u> - 1 Item<BR>News14-HighLow (EC)","<u>DDI</u> - 6 Items<BR>News14-HighLow (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>DDI</u> - Max Items<BR>News14-HighLow (EC)","<u>Missing</u>","<u>Missing</u>","<u>NEWS14WEATHER_282</u> - 1 Item<BR>News14-Weather (EC)","<u>Missing</u>","<u>Missing</u>"],["<u>NEWS147DAYWEATHER</u> - 1 Item<BR>News14-HighLow (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>NEWS14LOCALNEWS</u> - 4 Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>DDI</u> - Max Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>GLKEVSTOCKS</u> - Max Items<BR>GLKev - Stocks (EC)","<u>NEWS14WEATHER_282</u> - 1 Item<BR>News14-Weather (EC)","<u>Missing</u>","<u>DDI</u> - 6 Items<BR>News14-Weather (EC)"],["<u>NWS7DAYWEATHER</u> - 1 Item<BR>NWS - 7DayForecast","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>DDI</u> - 1 Item<BR>NWS - 7DayForecast","<u>NEWS14LOCALNEWS</u> - 7 Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>DDI</u> - Max Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>GLKEVSTOCKS</u> - Max Items<BR>GLKev - Stocks (EC)","<u>NEWS14WEATHER_282</u> - 1 Item<BR>News14-Weather (EC)","<u>DDI</u> - 7 Items<BR>News14-Weather (EC)","<u>Missing</u>"],["<u>NEWS147DAYWEATHER</u> - 1 Item<BR>News14-HighLow (EC)","<u>DDI</u> - 1 Item<BR>News14-HighLow (EC)","<u>DDI</u> - 1 Item<BR>News14-HighLow (EC)","<u>Missing</u>","<u>DDI</u> - 10 Items<BR>News14-HighLow (EC)","<u>DDI</u> - 6 Items<BR>News14-HighLow (EC)","<u>Missing</u>","<u>DDI</u> - Max Items<BR>News14-HighLow (EC)","<u>DDI</u> - 1 Item<BR>News14-HighLow (EC)","<u>GLKEVSTOCKS</u> - Max Items<BR>News14-HighLow (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>"],["<u>NEWS147DAYWEATHER</u> - 1 Item<BR>News14-HighLow (EC)","<u>DDI</u> - 1 Item<BR>News14-HighLow (EC)","<u>DDI</u> - 1 Item<BR>News14-HighLow (EC)","<u>Missing</u>","<u>DDI</u> - 10 Items<BR>News14-HighLow (EC)","<u>NEWS14LOCALNEWS</u> - 6 Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>DDI</u> - Max Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>GLKEVSTOCKS</u> - Max Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>"],["<u>NWS7DAYWEATHER</u> - 1 Item<BR>NWS - 7DayForecast","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>DDI</u> - 10 Items<BR>NWS - 7DayForecast","<u>NEWS14LOCALNEWS</u> - 6 Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>DDI</u> - Max Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>GLKEVSTOCKS</u> - Max Items<BR>GLKev - Stocks (EC)","<u>GLKEVWEATHER_29730</u> - 1 Item<BR>GLKev-Weather (EC)","<u>DDI</u> - 7 Items<BR>GLKev-Weather (EC)","<u>DDI</u> - 5 Items<BR>GLKev-Weather (EC)"],["<u>NEWS147DAYWEATHER</u> - 1 Item<BR>News14-HighLow (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>NEWS14LOCALNEWS</u> - 6 Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>GLKEVSTOCKS</u> - Max Items<BR>News14-LocalNews (EC)","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>"],["<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>","<u>Missing</u>"]];
var myColumns = ["7DayWeather","Announcements","BusinessNews","EntertainmentNews","Events","LocalNews","NationalNews","ReplacementImages","SportsNews","Stocks","Weather","WhateverNews","WorldNews"];
var myRows = ["Charlotte1","Charlotte2","Gateway","IJL","ImageBuilder","Phil's Group","Phil2","RHG","rhgtesting","Test Group 2"];

var obj = new AW.Grid.Extended;
obj.setFixedLeft(0);
obj.getRowTemplate().setClass("text", "wrap");
obj.setRowCount(10);
obj.setColumnCount(13);
obj.getCellTemplate().getContent("box/text").setStyle("vertical-align", "top");
obj.setCellText(myData);
obj.setHeaderText(myColumns);
obj.getHeadersTemplate().setClass("text", "wrap");
obj.setSelectorVisible(true);
obj.setSelectorText(myRows);
obj.getSelectorTemplate().setStyle("width", "120px");
obj.getTopSelectorTemplate().setStyle("width", "120px");
obj.setSelectionMode("single-cell");
obj.setCellEditable(false);
obj.onCellClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " clicked"};
document.write(obj);
</script></div></center>

</form>
        
        <script language="javascript">
            function ResizeGridDiv() {
                var winW = 630, winH = 460;
                if (parseInt(navigator.appVersion)>3) {
                    if (navigator.appName=="Netscape") {
                        winW = window.innerWidth;
                        winH = window.innerHeight;
                    }
                    if (navigator.appName.indexOf("Microsoft")!=-1) {
                        winW = document.body.offsetWidth;
                        winH = document.body.offsetHeight;
                    }
                }
                //window.status = winW + "." + winH;
                if (winW < 800) {
                    document.getElementById("scrollTable").style.height=280;
                }
                else if (winW < 1024) {
                    document.getElementById("scrollTable").style.height=380;
                }
                else {
                    document.getElementById("scrollTable").style.height=500;
                }
            }
        </script>
    </body>
</html>

I'm using:
obj.getSelectorTemplate().setStyle("width", "120px");
obj.getTopSelectorTemplate().setStyle("width", "120px");

because when I use the normal call for the 2.0 Grid to set the selector width the grid does some very strange scroll behavior.
Matt Philmon
Thursday, December 22, 2005

This topic is archived.


Back to support forum

Forum search