I'm writing a grid that does in-grid editing. So on some columns I'm using ColumnType.DropDownList, on others ColumnType.Custom with a WebDateChooser or a WebNumericEdit. However, I also have a column that has CellMultiline set to Yes. If I enter more than one row of data in that cell, the other custom controls start to get stretched out. For example, the WebDateChooser's dropdown arrow is just as narrow as before, but the height is now 100 or 200 pixels. I also have the RowStyleDefault.VerticalAlign set to Top, so when I use the drop down, it is centered in the middle of the cell, while the data in the grid is aligned at the top, so I can see two copies of the data. I've tried changing the style of the controls, but that doesn't seem to work.
Is there some way to prevent the controls from stretching to the full height of the cell, and to control where they appear in the cell?
Which browser do you use? Generally in IE it should clip whatever overflows in the cells if the row height and column width is set and the TableLayoutis Fixed. In Firefox and others there might be a need to for RowStyleDefault.CustomRules="overflow:hidden;"
I think you're on the right path with adjusting the editors.
As for the dropdown setting column.CellStyle.VerticalAlign=Top might help, the grid accounts for that style setting when it calcs the dropdown's position. This is the ValuList off the column we're talking about, right?
I did a quick check, and saw a couple of weird things. First, when I set TableLayout=Fixed and put in a RowHeightDefault of 60px, any row that had a multi-line element less than three rows took up 60px, but those that had more than three rows, simply expanded the row height so that all the text fit. I assuming there's some other setting that isn't set or is interfering with this.
But even assuming I could get this to work, I don't think this is a promising approach. When I set the row height to 20px, the multiline cell looks terrible, since it's trying to squeeze a text area into 20px, and if I set the row height to 60px, then the custom controls start to look stupid again.
Got any other tips for me?
Since the time I originally posted, I've been experimenting with changing the size of the editor in an afterEnterEditMode handler on the client side. I was able to get the WebDateChooser to look OK by changing the height style of the editor, and the "_input" and "_img" elements.
Geting the Dropdownlist to work has been a little more challenging, since it seems to position itself in the middle of the row, while I want it to position itself at the top of the row. So I've been wandering through _igtbl_determineEditorPosition, trying to understand all this stuff. Any shortcuts here you can think of to get the droplist to vAlign to the top?
Do you think this whole client-side approach is promising, or am I getting into a rats nest (like I was when I tried to write my own custom editor)?
There is couple of properties you might want to try out. DisplayLayout.TableLayout=Fixed and DisplayLayout.RowHeightDefault set to a pixel value.
That way the rows will be consistent in height, however the long text that you enter into the cells will be cut off.