Suggestions

Alex,

I love your grid. When do you think it will be ready for release? I have a few suggestions if you don't mind.


1) Would it be possible to prevent the vertical scrollbar from expanding all the way to the top of the column header and instead be restricted to the "data" area? I think that it would be more intuitive for users since the headers do not scroll. (This could optionally be turned back to original behavior if some people prefer the current functionality).

2) Would it be possible to have the scrollbar always visible but be grayed out if all the rows fit on the screen? This would be consistent with IE where the scrollbar is always visible on the right side but disabled if you can't scroll. (This could optionally be turned off if some people prefer the current behavior).

3) Would it be possible to add images and/or buttons in the headers rows with a javascript function when users click on it? An example

The reason why I suggest these changes is that I would like to display a small image at the far right of the headers row that users can click on to refresh the data. This image would have the same width as the scoll bar but it would look funny if the image was present on the grid without the scrollbar. Another example would be a button on the far left of the headers row that would select all rows when clicked.

I can email you a screenshot of an application that has a grid with this functionality if it can help you visialize what I'm talking about.

Jeremie,

thank you for the suggestions. It all makes perfect sense to me. The reason I made the scrollbar up to the top - it is exactly how Microsoft datagrid control looks (see windows explorer for example), which was actually a surprise for me. Initially I was going to implement it the way you described it.

It should be possible to adjust it using additional css rules, I just need to check that it doesn't break resizing etc.

As for the images - it's quite easy. You can add more elements to the grid and use CSS absolute positioning to move them into the proper place. For example:

<style>
.active-overlay-test {
position: absolute;
overflow: hidden;
right: 20px;
top: 0px;
width: 20px;
height: 20px;
background: red;
z-index: 10000;
}
</style>

And the code should look like

// create an overlay box
var box = new Active.HTML.DIV;

// assign css selector
box.setClass("overlay", "test");

// set event handler
box.setEvent("onclick", function(){alert(123)});

// add the box to the grid under 'box1' name
obj.setContent("box1", box);

// write grid html to the page
document.write(obj);

BTW if you just need images in the column headers - the header template already supports it, so you only need to specify image names like:

obj.setProperty("column/image", function(i){return "doc"});

Here is the CSS which seems to make your 1) and 2)

<style>

.active-controls-grid {
padding-top: 20px;
}

.active-controls-grid.gecko {
overflow: visible;
}

.active-scroll-data {
padding-top: 0px!important;
top: 20px;
}

.active-scroll-left {
padding-top: 0px!important;
top: 20px;
}

.active-scroll-top {
width: 100%!important;
}

.active-scroll-bars {
position: relative;
overflow: scroll;
}

</style>

Can I be picky? ;-)

Is it possible to have the vertical scroll bar always on but the horizontal scroll bar show up only when needed?

Easy. But IE only, Mozilla will still display both:

.active-scroll-bars {
position: relative;
overflow: scroll;
overflow-x: auto;
}

overflow-y: scroll;
overflow-x: auto;

Wonderfull!

Alex,

My grid initially displays fine: the vertical scroll bar is visible and the horizontal one is not. This is expected since all my columns fit inside the screen.

However, when a user changes the width of one of the columns so that it no longer fits on the screen, the vertical starts blining like crazy and the mouse keeps togling between the hourglass and the regular cursor!

I get the feeling that it's in an infinite loop, trying to refresh the display.

Jeremie,

I saw this once but cannot reproduce anymore. Could you send me an example?

I just emailed it to you

Hi Jeremie

I am using a similar grid, i want to know how are you maintaining the scroll bar moving up or down as he suer is using the up and down keys to move in the grid. I want to achieve the same. COuld you please help

Neeta,

I was not experiencing a problem with using the up and down key and I was not trying to maintain the scroll bar position so my situation was not similar to yours.

Sorry but I can't help you.

Is is possible to remove the scrollm bars such that you scroll around the grid using the native IE scroll bars only (i.e. remove the surrounding DIV). I understand that you cannot coltrol the headers this way.