setRowProperty("text"... replacement?

In 1.0 I could use:
obj.setRowProperty("text", function(i){return myRows[i]});

where myRows was a multidimensional array to replace the default row headers (1,2,3,4... etc.). This is not part of 2.0... what do I use instead?

If you view the sample grid.htm file that came with the toolkit, it shows many ways to set the cell text and the header text. This file is located in the QuickRef directory.

Well, it shows how to set the Column Header or individual cell elements, but doesn't touch the Row Headers... the "1,2,3,4,5, ..." in the sample. That's what I want to change and it was easy in 1.0.x. Am I missing something?

Matt, it is called 'row selectors' or just selectors in v2 -

obj.setSelectorText(function(i){return myRows[i]});

and also

obj.setSelectorVisible(true);
obj.setSelectorResizable(true);
obj.setSelectorWidth(25);

Right now, setSelectorWidth does not work and can actually lock up IE so plan on using it in a future release but in beta 3 I suggest commenting it out in your code. You can uncomment it when this gets fixed in a later release. I would hate for you to spend a lot of time trying to track down why that method isn't working or why your browser is locking up.

Jim,

when I try using all these methods in /examples/quickref/grid.htm - everything works fine. Could you send me an example where setSelectorWidth does not work?

It has never worked for me in any browser. I'll work up an example and send it to you...

I have to qualify my comment, setSelectorWidth does not work if the grid is embedded into another control. Here is a sample that shows this behavior:

AW.HTML.NewGrid = AW.System.Control.subclass(  );

AW.HTML.NewGrid.create = function(  ){

  var obj = this.prototype;



  obj.defineTemplate( "test", new AW.UI.Grid );

  with ( obj.getTemplate( "test" ) )

  {

    setSize( 300, 300 );

    setPosition( 10,10 );

    setSelectorVisible( true );

    setSelectorText(function(i){return i});

    setSelectorWidth( 200 );

    setCellText( "test" );

    setHeaderText( "header" );

    setRowCount( 5 );

    setColumnCount( 4 );

  }



  obj.setContent( "html", function(  )

  {

    return this.getTestTemplate(  );

  } );

}



b = new AW.HTML.NewGrid;

document.write( b );

This example displays in FF 1.5 (selector width does not work) but if you try and load this example inot IE it will go crazy and you will have to use TaskManager to kill the browser. I have seen this behavior on two computers one with XP and one with 2000 Pro.

Also, if you notice in FF, the selector will scroll with the data portion of the grid.
If you look in the forums you will find a post a made about this problem and I even detailed what line of code is raising the error in IE and in FF (FF is more gracefull about how it handles the exception).

I'm having quite a bit of trouble with setSelectorWidth. It seems to cause very strange selection problems for me. I'll go ahead and post the whole thing. Click on various items in the grid and occasionally the click will send the grid careening off into "nowhere land".

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

    <HEAD>

        <title>WebForm1</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 { PADDING-RIGHT: 10px; PADDING-LEFT: 10px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px }

    HTML { PADDING-RIGHT: 0px; PADDING-LEFT: 10px; PADDING-BOTTOM: 10px; MARGIN: 0px; OVERFLOW: hidden; PADDING-TOP: 0px }

        </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: 125px; }

            .aw-column-1 {width: 125px; }

            .aw-column-2 {width: 125px; }

            .aw-column-3 {width: 125px; }

            .aw-column-4 {width: 125px; }

            .aw-column-5 {width: 125px; }

            .aw-column-6 {width: 125px; }

            .aw-column-7 {width: 125px; }

            .aw-column-8 {width: 125px; }

            .aw-column-9 {width: 125px; }

            .aw-column-10 {width: 125px; }

            .aw-grid-headers {color: blue;}

            .aw-grid-row {height: 50px;}

            .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 MS_POSITIONING="GridLayout">

        <form name="Form1" method="post" action="WebForm1.aspx" id="Form1">

<input type="hidden" name="__VIEWSTATE" value="dDwtNjU0MzcyMTk1Ozs+AwMt47BFHvyyl1Qvo9HyEuuWXWQ=" />



        <center><div class="scrollTable" id="testScrollTable" style="overflow: auto; height: 450; width: 900;"><script>

var myData = [["RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>8/20/2005<BR>7:08 PM","Unconfigured<BR>8/16/2005<BR>10:00 PM","Unconfigured<BR>NEVER","Unconfigured<BR>10/11/2005<BR>4:05 PM","Unconfigured<BR>10/13/2005<BR>4:13 PM","DDI<BR>NEVER","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>10/11/2005<BR>4:43 PM"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","DDI<BR>NEVER","Unconfigured<BR>8/20/2005<BR>7:08 PM","Unconfigured<BR>9/16/2005<BR>6:33 PM","Unconfigured<BR>9/15/2005<BR>1:06 PM","DDI<BR>10/18/2005<BR>7:47 PM","Unconfigured<BR>9/24/2005<BR>6:14 PM","DDI<BR>10/17/2005<BR>8:37 PM","Unconfigured<BR>9/29/2005<BR>4:34 PM","RSS Manager<BR>12/20/2005<BR>2:30 PM","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>9/29/2005<BR>4:34 PM"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","DDI<BR>11/29/2005<BR>2:28 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","DDI<BR>11/29/2005<BR>2:49 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","DDI<BR>11/4/2005<BR>11:28 AM","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","DDI<BR>11/4/2005<BR>11:22 AM"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","DDI<BR>12/8/2005<BR>11:25 AM","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","DDI<BR>12/8/2005<BR>11:32 AM","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","RSS Manager<BR>12/20/2005<BR>2:30 PM","DDI<BR>12/8/2005<BR>11:26 AM","Unconfigured<BR>NEVER"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","DDI<BR>NEVER","DDI<BR>11/9/2005<BR>2:02 PM","Unconfigured<BR>NEVER","DDI<BR>11/9/2005<BR>10:16 AM","DDI<BR>11/18/2005<BR>10:17 AM","Unconfigured<BR>NEVER","DDI<BR>11/9/2005<BR>11:09 AM","DDI<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>11/9/2005<BR>4:14 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","DDI<BR>NEVER","DDI<BR>11/9/2005<BR>2:02 PM","Unconfigured<BR>NEVER","DDI<BR>11/9/2005<BR>10:16 AM","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","DDI<BR>11/9/2005<BR>11:09 AM","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>11/9/2005<BR>3:33 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","DDI<BR>12/7/2005<BR>10:31 PM","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","DDI<BR>NEVER","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","RSS Manager<BR>12/20/2005<BR>2:30 PM","DDI<BR>12/7/2005<BR>11:14 PM","DDI<BR>12/19/2005<BR>10:01 PM"],["RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","RSS Manager<BR>12/20/2005<BR>2:30 PM","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER"],["Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER","Unconfigured<BR>NEVER"]];

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.UI.Grid;

obj.getRowTemplate().setClass("text", "wrap");

obj.setRowCount(10);

obj.setColumnCount(13);

obj.setCellText(myData);

obj.setHeaderHeight("30");

obj.setHeaderText(myColumns);

obj.getHeadersTemplate().setClass("text", "wrap");

obj.setSelectorVisible(true);

obj.setSelectorText(myRows);

obj.setSelectorWidth("120");

obj.setSelectionMode("single-cell");

obj.setCellEditable(false);

obj.defineCellProperty("color", function(col,row){

debugger

    var value = this.getCellText(col,row);

    var color = "black";

    if (value.indexOf("NEVER") > 0){

        color = "red";

    }

    else{

        var today=new Date();

        var index=value.indexOf("<BR>")+4;

        var datepart=value.substring(index);

        datepart = datepart.replace("<BR>", " ");

        var then=new Date(datepart);

        var hours=Math.ceil((((today.getTime()-then.getTime())/1000)/60)/60);

        if (hours>24){

            color="orange";

        }

        else if (hours>12){

            color="blue";

        }

    }

    return color;

}); 

obj.getCellTemplate().setStyle("color", function(){return this.getControlProperty("color"); }); 

obj.onCellClicked = function(event, column, row){ window.status = "Cell " + column + "." + row + " clicked"};

document.write(obj);

</script></div></center>



</form>

    </body>

</HTML>

In addition, some other minor issues with the code sample above:

1) The text seems to line up very strangely in Firefox with the grid cell's text moved over and down so that it doesn't fit.
2) The grid "contains" itself nicely inside the DIV from left to right. However, for some reason, the grid scrolls forever down.

I think Alex is aware of this bug, (and surelly fixed soon).
But in the menatime.....
You can use:
obj.getSelectorTemplate().setStyle('width', '120px');
obj.getTopSelectorTemplate().setStyle('width', '120px');

instead of:
obj.setSelectorWidth("120");

The bad news are that then you can't use:
obj.setSelectorResizable(true);
HTH

Thanks Carlos. That works nicely. Personally I don't need the selector to be resizable here.

I'm still trying to figure out those other 2 items I posted about a strange effect with the cells text in Firefox and the problem with the grid continuing to scroll way beyond the top and bottom elements of the grid.

No luck with vertical scroll issue , but for FF align-text you can use:

obj.getCellTemplate().getContent('box/text').setStyle('vertical-align', 'top' );

Hey wait a second ! vertical-scroll size works if you remove:
obj.setHeaderHeight("30");

I was playing with this two lines to solve it, but the header gets hidden behind first row... no luck . (for now need to use a default header-height)
obj.getHeaderTemplate().setStyle('height', '60px');
obj.getTopSelectorTemplate().setStyle('height', '60px');

Thanks Carlos! I really, really appreciate your help. Other than the header height, which I can live with for now, everything is working as I need it to.

Forum search