Row Height for Multi-Line Data Cells

I am trying to set the row height for the grid for use with multi-line data-cells (using <br>'s). I would like each row to be 60px in height, except for the column headers, which should be 25 px in height.

I have tried the solution for this proposed in http://www.activewidgets.com/messages/235-2.htm.

I currently use the following relevant grid options...

# In grid setup...

gridObj.setColumnHeaderHeight("25px");


# and in CSS rules:

active-grid-row {height: 60px;} 
.active-scroll-left .active-list-item {height: 60px}

#also for each column:
.active-column-1{width: 80px; border-bottom: 1px solid threedlightshadow; text-align: center;};.....

This however causes each data cell to not fully display the multiline contents, as they are cut off at something like 25px (i.e. it looks like the rows are 60px height, but the actual data cells within each row are still on 25px in height.

How do I change the actual height of data cells so that they can truely be 60px as well????

Here is another variant:

.active-grid-row,
.active-grid-row .active-list-item,
.active-scroll-left .active-list-item {height: 60px;}

That works like a charm........thanks for the fast response!

I tried this solution, but ended up with the row header being the correct size, but the rows themselves being normal size. Take a look at <a href="http://www.geocities.com/azinnc/mismatch.gif" target="_blank">http://www.geocities.com/azinnc/mismatch.gif</a>

Oops

http://www.geocities.com/azinnc/mismatch.gif

You may have to copy the URL above and paste it in your address bar. For some reason, GeoCities returns a 404-like message when clicking on it. If you copy & paste, it seems to work fine.

Are you setting the height attributes for any .active-column-# CSS? (hint - you should not be for this to work!)

Nevermind - I was being stupid. I had the css file link below the manual <style> tag, which overwrites the changes I made in the preceeding style tag. I flipped the order & presto!

Is there a way to specify a single row like you can for a column? Example: ".active-row-#" instead of ".active-column-#"

You have to add some code for that:

function rowNumber(){
        return this.getRowProperty("index");
    }

    obj.getRowTemplate().setClass("row", rowNumber);

Hi,
I tried the reply for this message as a solution for the question:
Is there a way to specify a single row height like you can for a column?
Example: ".active-row-#" instead of ".active-column-#"

With the following code I can set individual row heights for the data area only. How do I set the row heights for the row headers as well?

function rowNumber(){
return this.getRowProperty("index");
}

obj.getRowTemplate().setClass("row", rowNumber);

Thanks!!!!!!

More information please!

I want different rows to have different heights, and Alex has posted a solution that sounds perfect for me, involving the following code:
-------------------------------------------------
function rowNumber(){
return this.getRowProperty("index");
}
obj.getRowTemplate().setClass("row", rowNumber);
--------------------------------------------------
Now I offer my request with all due apologies for being dense, but I don't quite get it. If I have 3 rows, do I need 3 "rowNumber" functions, presumably named nowNumber0, rowNumber1, and rowNumber2? Are there any other variables represented by string constants above? I love the ActiveWidgets grid, and I can output whatever javascript is necessary to make it run, so I hope that somebody can help me with just a little more explanation.
Thanks.

No, but you would need 3 style defs ala:
.active-row-0 {height: 120px;}
.active-row-1 {height: 80px;}
.active-row-2 {height: 180px;}

I'm trying to think of a function for doing this in PHP since the server could spit out this style info when it renders the page if it's the one receiving the data, but since I'm mostly using serverside to generate XML, I can't wrap my head around a good way to do this. Besides, I think it would be kinda ugly and most certainly inconsistent if some words were reeeeeeeeeeeaaaaaaaaaaallllllllly long. You could count characters, but still..

Alex, any hints on if wrapping might be a built-in option in Grid V2? I don't want to go off and reinvent the wheel for no reason.

Summarizing row resizing...

I can resize rows and row headers with the following styles:
.active-scroll-left .active-templates-item,
.active-scroll-data .active-templates-row { height:47px; }
which works well, but is inflexible if rows vary greatly in height.

Alternatively, I can give each row a different height with the following script/style combination:
<script>
function rowNumber(){return this.getRowProperty("index");}
obj.getRowTemplate().setClass("row", rowNumber);
</script>
<style>
.active-row-0 {height: 47px;}
.active-row-1 {height: 74px;}
</style>
which works well, but leaves the row headers unmatched in height with the row data.

My question: How can I assign individual row heights and yet still have the row header heights match the row data? I've tried every combination I can think of and I've searched the documentation, but can't seem to find the answer. Many thanks to Alex and elsigh for their help so far.

Is there a way to specify a row like you can for a column? Example: ".active-row-#" instead of ".active-column-#"
I want to have a different color for some rows.
If i add a function something like this
function colorRow(index)
{
this.getTemplate("row", index);
row1.setStyle('background', '#CBDDEB');
}
but when do invoke this.
I am populating the table dynamically using JSP taglib for grid.

I found a workarround to match row header heights with the corresponding row heights.Using this code you can set both row and row header heights.Hope this helps someone.
<style>
.active-row-0{height: 20;}
.active-rowHeader-0{height: 20;}
.active-row-1{height: 60;}
.active-rowHeader-1{height: 60;}
</style>
<script>
function rowNumber(){
return this.getRowProperty("index");
}

obj.getRowTemplate().setClass("row", rowNumber);

var rowheader = new Active.Templates.Item;
obj.setTemplate("left/item", rowheader);

function rowHeaderNumber(){
return this.getProperty("item/index");
}

rowheader.setClass("rowHeader",rowHeaderNumber);
</script>

I had the same question as Ben: How can I assign individual row heights and yet still have the row header heights match the row data? Srinivas' method works but you must assign a static height to each row, tough if you don't know what data is going to be in each row. For some reason height:auto works for the row heights to be automatically adjusted but not the row headers. Anyway, I came to the conclusion that the simplest solution is to just take the build-in row headers out of the equation.

1. Hide the row headers like this:

.active-scroll-left, .active-scroll-corner {display: none}
.active-scroll-top, .active-scroll-data {padding-left: 0px}

2. Set the row height to auto like this:

.active-grid-row {height: auto;}

The rows will automatically adjust to accommodate the content in them, and the headers aren't the wrong size because you don't have any. If you need row headers you can just make your first column a row header column and set the style and text however you want like an ordinary column. Obviously it would be nice to use the build-in headers the way they were intended so if anyone has a way to dynamically set the height of the row headers please post the solution.

hi chad,

did u get any solution to get dynamic row header?

thanx in advance,

Oops,

did u get any solution to set row header height dynamically?

Hi Sam,

So far I've had no luck finding a way to set the row header height dynamically. Once I found a way to remove the row headers and have the rows adjust automatically (the method I described above) I just went with that. I don't really have a need for row headers in my current project. If you do need them and still haven't found a way to use the build-in row headers, you could use the first column to make your own row header column. As I said in my previous post, it's a bummer you can't use the built-in ones but at least it would be a work-around for now. I hope that helps.

Chad

I am having a similar issue. Here is what I want:

1. Column headers with fixed height.
2. Grid data rows with variable height (handle single and multi-line text)

I almost have it working, except the cell borders aren't rendering properly in IE. For some reason, on the cells with multiline text, the right and left borders don't extend all the way down the cell.

Here is my test page:

http://www.m2pc.com/awtests/multilinegridtest.html

BTW, it renders perfectly in FF.

Alex, any advice for solving this issue?

Thanks,
Jason

Maybe this could help:

http://www.activewidgets.com/javascript.forum.7621.3/styling-of-multiline-cells.html