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?
Did anyone ever figure out how to prevent the WebDateChooser from stretching to the height of the row? I am having the same problem.
I eventually got all this to work by writing client-side scripting in the afterEnterEditMode handler. For the drop list, the script looks like:
var droplist = document.getElementById(gridName + "_vl");if (!droplist) { return;}
var r = igtbl_getAbsBounds(cell.Element, gridName, true);droplist.style.top = r.y;return;
For a text box that I knew wasn't multiline, I had to do:
var textbox = document.getElementById(gridName + "_tb");if (!textbox) { return;}
var seg = standardGrids[gridName];var valid = seg.getValidationForCell(cell);if (valid && valid.fieldLength > 0) { textbox.maxLength = valid.fieldLength;}textbox.style.height = "16px";return;
I was a little nervous tracking down control names, since I don't think Infragistics promises not to change those control names in the future, but I couldn't find any other way to make this work.
I put the following code in the AfterEnterEditMode handler, but it doesn't seem to change anything:
var r = igtbl_getAbsBounds(cell.Element, gridName, true);droplist.style.top = r.y;return;Am I missing something? I am specifically having a problem with a WebDateChooser. I assumed that I didn't need the code below that...but should I be changing anything within the code to make it work?
The script I posted was only intended as a starting point for all the different controls that might need to be resized on a multiline grid. In particular that code was for the DropList and the TextBox. You would need to use the Developer Toolbar to identify the names of the other controls that handle the editing, and then figure out how to manipulate them to your taste. I haven't tested this, but I believe the code to handle the Date Chooser looks something like:
var cell = igtbl_getCellById(cellId);var column = cell.Column;if (column.ColumnType == 10) { var editor = column.editorControl.Element; if (!editor) { return; } editor.style.height = "16px";
var editorInput = document.getElementById(editor.id + "_input"); var editorImage = document.getElementById(editor.id + "_img");
if (!editorInput || !editorImage) { return; } editorInput.style.height = "16px"; editorImage.style.height = "16px"; return;}
WOW! For not testing that, it worked perfectly! I literally just copied the code and pasted it in and it worked like a charm. Thank you so much. I really appreciate it.