3.2.0
Forum Demo Guide API Store

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
December 21,
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)
December 21,
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
December 21,
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
December 21,
Right Jim, the headers... and I think Alex listed the fix first off. I'll try it and see if it works.
December 21,
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
December 21,
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
December 22,
It's rendered into a DIV, but that's about it. I can post the entire thing here.
Matt Philmon
December 22, 
<!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
December 22,

This topic is archived.

See also:

This example shows how to Drag and Drop Rows in a v2.0 Grid to change the row order Rob Francis (59)
AW 2.0.2 - new bug-fix release. Alex (ActiveWidgets) (51)
Sorting on second header row. Sudhaker Raj (15)
Column Header DropdownBox Filter Example Required Andy (28)
Expanding / Collapsing a row ... Experiment-2..... Carlos (19)
AW.Input control in a grid header row - problem in FF Will (11)
AddRow() Refreshes row prior to the added row Brad (7)
multi-row-marker autoscrolls to top.... Felix (13)
Bug in 2.0.1 - grid top row disappears Alex (ActiveWidgets) (13)
Grid Header Row Height Paul Rubin (7)

Back to support forum

Search

New Data Grid
Angular Data Grid
React Data Grid
Vue Data Grid
Svelte Data Grid

Version 2

Looking for AW 2.6 ?
The old site is here.

ActiveWidgets is a javascript library for creating user interfaces. It offers excellent performance for complex screens while staying simple, compact and easy to learn. Deployed by thousands of commercial customers in more than 70 countries worldwide.

Copyright © ActiveWidgets 2021
Getting Started
 
Sample Code API Reference Support Forum Prices & Licensing
 
Contact Us