We are trying to use a boder around the row to indicate the active row. We have it working using a DrawFilter to draw the border after the row is drawn. It is working...but it is hard to get a border bold enough to make it clear that the row is active without some other UI element over-drawing part of the border.
Is there an easy way to use a CreationFilter (or something else) to inflate a grid element's size? I would like to make some clear space available for a 2 pixel border around the entire RowUIElement so that it is not drawn over by the cell or any other sub element. Here's a picture of what I am having happen currently when a cell is in edit mode.
You might try using CellPadding to create a little padding inside the cells so there is some extra room.
We are using RowSpacingAbove and RowSpacingBelow as a compromise to give a little extra separation between the active row and the rest of the grid so that the thinner border stands out more, but it does not solve the problem because it doesn't give any extra space WITHIN the row object for a thicker border. It just adds space between the rows.
Cell padding seems to do the opposite...it adds extra space within the cell objects, but doesn't leave any addtional space out side of the cells for border drawing. If you put a thicker boder on the row, the cell active cell object just draws over it as seen in the image on the original post.
What I really need to do is make the row object taller while keeping the cell elements their original size and centered in the space so that I have more room within the row object for a thicker border.
Any Ideas?
mathdx said:Cell padding seems to do the opposite...it adds extra space within the cell objects, but doesn't leave any addtional space out side of the cells for border drawing. If you put a thicker boder on the row, the cell active cell object just draws over it as seen in the image on the original post.
I think this is just a matter of where you are drawing the border. If you are drawing your border so that it extends outside of the cell, then the CellPadding won't do much good. If you draw the border inside the cell, it should help.
You could try CellSpacing, which provides extra space outside the cells. But this will create space in between the cells horizontally, as well.
Personally, I find it's a lot easier to just highlight the row using the BackColor/ForeColor instead of using borders.
I can try putting the borders on the cells...it just complicates the coding quite a bit...especially since we are already doing some special coding on the cell borders (our UI designers want strong lines between the rows, but much lighter lines between the cells). I will see what is possible there when I have a chance.
Yeah...space between the cells would not fly...otherwise it does sound like what I am looking for.
I agree that colors are MUCH easier...but our designers want to use colors for selected rows so the users can easily tell when an active row is also selected. I was even desperate enough to suggest color "blending" (blue selected rows, yellow active row, green when the active row is selected).
The solution our UI designers have proposed is very intuitive for the users...its just an "unnatural" behavior for the grid.
mathdx said:I can try putting the borders on the cells...it just complicates the coding quite a bit...especially since we are already doing some special coding on the cell borders (our UI designers want strong lines between the rows, but much lighter lines between the cells). I will see what is possible there when I have a chance.
Sorry if I confused you, but I was not suggesting that you move the border drawing to the cells. That wouldn't make any difference to the problem you are having.
The problem in your screen shot here is that when the cell goes into edit mode, it displays a TextBox control over the cell and the TextBox is covering the border. The TextBox is drawn inside the row borders, but the row has no way to know about the borders you are drawing. So maybe the solution is for you to always draw the borders outside of the row bounds. Since you are drawing on the ActiveRow, anyway, this should work.
I used RowSpacingBefore and RowSpacingAfter to open up some space then moved my border drawing into the AfterDrawElement of the RowColRegionIntersectionUIElement. Between those two suggestions I found something that worked. I'd still be happier if I could contain my code to the row element, but what I ended up with seems to be working.
Thanks!
Hello mathdx,
I wanted to know if you were able to solve your issue based on these suggestions or you still need help. Please let me know.
Hi,
I tried this out just to see if I could get it to work, and I ran into a problem because changing the active row in the grid only invalidates the row and not the area into which you would draw the border. So I got around it by calling Invalidate on the grid any time the ActiveRow changes.
I'm attaching a sample here so you can check it out. Seems to work okay for me.
I can give that a shot.
Okay... you are probably drawing at the wrong time, then.
I don't know if you are aware of this, but the grid has built-in functionality to draw a border around the selected rows (not ActiveRow). And the way the grid does it is, it uses the AfterDrawElement phase of the RowColRegionInterSectionUIElement. This is the element that contains the rows. So that way, all of the rows in the grid are already painted before the border is drawn on the selected rows and nothing can draw over it.