The columns are fine from IE 7 to IE 9, but in IE 10 and IE 11 the first row lines up, but the 2nd and subsequent don't. See attached.
Cliff Gleason
Hello Cliff,
I'm just following up to see if you need any further assistance with this issue. If so please do not hesitate to contact me.
Thank you, I haven't had time, but I am using IE 11 (but set to IE 10 compatibility), which may have something to do with it.
Cliff
I'm just checking about the progress of your issue, did you resolve it?
I'm glad to hear that.
Thank you for using our product!
Y’know what, at the moment it seems to have totally gone away, even under IE 11 (or IE 7) where some things just crash normally.
Thanks, you can close the case.
Hello,
I'm still following this issue, do you managed to resolve it?
It will be highly appreciated if you could send me an isolated sample that is causing the issue. Please try also to execute your solution without the styles that you have applied.
Looking forward to hearing from you.
Here is the control in the markup
<cc1:MultiColumnWebDropDown ID="mcdAccount" runat ="server"
DropDownContainerWidth="450px"
DropDownContainerHeight="100px"
Style="position: absolute; top:0px; left: 0px;"
Width="110px">
</cc1:MultiColumnWebDropDown>
Which inherits from WebDropDown, with this skin
<cc1:MultiColumnWebDropDown runat ="server"
CssClass="mcd_Control"
DisplayMode="DropDownList"
DropDownOffsetX ="0"
DropDownOffsetY = "0"
EnableAjaxViewState="true"
EnableAnimations="false"
EnableAutoFiltering="Off"
EnableClosingDropDownOnBlur="true"
EnableClosingDropDownOnSelect="false"
EnableDropDownAsChild="false"
EnableLoadOnDemand="false"
HeaderCaptionCssClass="GridColumnHeaderNew"
Height="17px"
ItemCssClass ="mcd_TemplateGridThinRowNoWrap"
TabIndex="1"
TemplateStyleSetName="MyBlue"
TemplateStyleSetPath ="~/ig_res"
>
Using this css
/*below for multiColumnDropDown*/
.mcd_Control>div>table>tbody>tr>td>input {
color:#000000;
background-color:rgb(245,245,245);
font-family:Sans-Serif;
font-size:12px;
}
And here is the javascript file.
//**************************************************************************************************
// <file>
// <name>
// MultiColumnWebDropDown.js
// </name>
// <remarks>
// Please make sure an existing routine doesn't perform the same function.
// </remarks>
// </file>
function multiColumnDropDown_init(csoJson) {
var _args;
var _cancelKeyEvent = true;
var _closeDropDown = true;
var _cso;
var _sender;
try {
_cso = JSON.parse(csoJson);
} catch (ex) {
siteHandleScriptError('multiColumnDropDown_init', ex);
function _applyRowStyle(row, className) {
if (className === 'mcd_ShowRow') {
row.get_element().style.display = 'inline';
row.get_element().style.visibility = 'visible';
} else {
row.get_element().style.display = 'none';
row.get_element().style.visibility = 'hidden';
} catch (err) {
siteHandleScriptError('applyRowStyle', err);
function _clearSelection() {
var grid;
var webDropDown;
grid = $find(_cso.WebDataGridID);
webDropDown = $find(_cso.WebDropDownID);
grid.get_behaviors().get_selection().get_selectedRows().clear();
webDropDown.set_currentValue('', false); // true);
webDropDown._elements.Input.value = '';
siteHandleScriptError('clearSelection', err);
this.clearSelection = function () { return _clearSelection(); };
function _delayedInitialization() {
var multiColumnTemplate;
multiColumnTemplate = $("." + _cso.MyCSON + "_DetachedMultiColumnTemplate");
$(ig_controls[_cso.WebDropDownID].behavior.get_targetContainer()).remove();
_sender.behavior.set_targetContainer(multiColumnTemplate[0]);
siteHandleScriptError('delayedInitialization', err);
this.delayedInitialization = function () { return _delayedInitialization(); };
function _dropDownClosing(sender, e) {
//The closing may need to be cancelled depending on what is being clicked.
if (!_closeDropDown) {
e.set_cancel(true);
siteHandleScriptError('dropDownClosing', err);
this.dropDownClosing = function (sender, e) { return _dropDownClosing(sender, e); };
this.get_currentValue = function () { return $find(_cso.WebDropDownID).get_currentValue(); };
function _set_currentValue(value) {
var dispValue;
var previousValue;
previousValue = webDropDown.get_currentValue();
_setSelectedItemByValue(value);
webDropDown.set_currentValue(value, false); // true);
webDropDown._raiseClientEvent('ValueChanged', 'DropDownEdit', event, null, value, previousValue);
dispValue = _getSelectedRowCellValue(_cso.DisplayValueKey);
if (dispValue === null) {
dispValue = '';
webDropDown._elements.Input.value = dispValue;
siteHandleScriptError('set_currentValue', err);
this.set_currentValue = function (value) { return _set_currentValue(value); };
function _getDisplayedRowsCount() {
var displayedCnt = 0;
var inx;
var rows;
var row;
var style;
rows = grid.get_rows();
for (inx = 0; inx < rows.get_length() ; inx++) {
row = rows.get_row(inx);
style = row.get_element().style;
if ((style.display !== 'none') && (style.visibility !== 'hidden')) {
displayedCnt++;
siteHandleScriptError('getDisplayedRowsCount', err);
return displayedCnt;
this.getDisplayedRowsCount = function () { return _getDisplayedRowsCount(); };
function _getRowCellValue(colKey, row) {
var cell;
var val;
//Gets the cell object in the row for the specified column key
cell = row.get_cellByColumnKey(colKey);
//Gets the text in the cell
val = cell.get_value();
if ((cell.get_column().get_type() === 'number') && (cell.get_text() === '')) {
val = null;
siteHandleScriptError('getRowCellValue', err);
return val;
//this.getRowCellValue = function (colKey) { return _getRowCellValue(colKey); };
function _getSelectedRowCellValue(colKey) {
var behavior;
var selection;
var val = null;
behavior = grid.get_behaviors();
selection = behavior.get_selection();
if (selection.get_selectedRows().get_length() > 0) {
row = selection.get_selectedRows().getItem(0);
val = _getRowCellValue(colKey, row);
siteHandleScriptError('getSelectedRowCellValue', err);
this.getSelectedRowCellValue = function (colKey) { return _getSelectedRowCellValue(colKey); };
function _hideMatchingRows(colKey, filterValue) {
_toggleMatchingRows(colKey, filterValue, "mcd_HideRow", "mcd_ShowRow");
siteHandleScriptError('hideMatchingRows', err);
this.hideMatchingRows = function (colKey, filterValue) { return _hideMatchingRows(colKey, filterValue); };
function _hideNonMatchingRows(colKey, filterValue) {
_toggleMatchingRows(colKey, filterValue, "mcd_ShowRow", "mcd_HideRow");
siteHandleScriptError('hideNonMatchingRows', err);
this.hideNonMatchingRows = function (colKey, filterValue) { return _hideNonMatchingRows(colKey, filterValue); };
function _intializeDropDown(sender, e) {
_sender = sender;
_args = e;
setTimeout(_cso.MyCSON + '.delayedInitialization()', 30);
siteHandleScriptError('intializeDropDown', err);
this.intializeDropDown = function (sender, e) { return _intializeDropDown(sender, e); };
function _inputKeyDown(sender, e) {
//var cancelEvent = true;
var inx = 0;
var keyChar = null;
var keyCode;
var pnx = 0;
_cancelKeyEvent = true;
selection = grid.get_behaviors().get_selection();
pnx = selection.get_selectedRows().getItem(0).get_index();
keyCode = e.get_browserEvent().keyCode;
switch (keyCode) {
case 9: //Tab Key processes normally
case 13: //Enter Key processes normally
break;
case 38: //Up Arrow Key
if (pnx > 0) {
_clearSelection();
selection.get_selectedRows().add(rows.get_row(pnx - 1));
_cancelKeyEvent = false;
case 40: //Down Arrow Key
if (pnx < grid.get_rows().get_length() - 1) {
selection.get_selectedRows().add(rows.get_row(pnx + 1));
default:
// if (webDropDown.get_displayMode() === 0) {
// keyChar = String.fromCharCode(keyCode);
// if (keyChar !== null) {
// for (inx = pnx + 1; inx < rows.get_length(); inx++) {
// row = rows.get_row(inx);
// displayVal = _getRowCellValue(_cso.DisplayValueKey, row);
// if (displayVal.toUpperCase().startsWith(keyChar)) {
// _clearSelection();
// selection.get_selectedRows().add(row);
// _cancelKeyEvent = false;
// break;
// }
// if (_cancelKeyEvent) {
// for (inx = 0; inx <= pnx; inx++) {
if (!_cancelKeyEvent) {
//if (_cso.DisplayValueKey === _cso.DataValueKey) {
_rowSelectionChanged(sender, e);
// } else {
// //setTimeout(_cso.MyCSON + '.rowSelectionChanged(' + sender + ',' + e + ')', 30);
// setTimeout(_cso.MyCSON + '.rowSelectionChanged()', 100);
siteHandleScriptError('inputKeyDown', err);
this.inputKeyDown = function (sender, e) { return _inputKeyDown(sender, e); };
//function _itemMouseDown(sender, e) {
// try {
// window.status('itemMouseDown() fired...');
// } catch (err) {
// siteHandleScriptError('itemMouseDown', err);
//}
//this.itemMouseDown = function (sender, e) { return _itemMouseDown(sender, e); };
// function _inputKeyUp(sender, e) {
// var dispValue;
// var webDropDown;
// if (!_cancelKeyEvent) {
// webDropDown = $find(_cso.WebDropDownID);
// dispValue = _getSelectedRowCellValue(_cso.DisplayValueKey);
// if (dispValue === null) {
// dispValue = '';
// webDropDown._elements.Input.value = dispValue;
// //// _rowSelectionChanged(sender, e);
// //// //setTimeout(_cso.MyCSON + '.rowSelectionChanged(' + sender + ',' + e + ')', 30);
// //// setTimeout(_cso.MyCSON + '.rowSelectionChanged()', 60);
// //// //e.set_cancel(true);
// siteHandleScriptError('inputKeyUp', err);
// this.inputKeyUp = function (sender, e) { return _inputKeyUp(sender, e); };
function _rowSelectionChanged(sender, e) {
var currentValue;
//Gets reference to the WebDropDown
currentValue = _getSelectedRowCellValue(_cso.DataValueKey);
//Sets the text of the value display to the product name of the selected row
_set_currentValue(currentValue);
webDropDown._elements.Input.focus();
webDropDown.closeDropDown();
siteSetDirtyData('Y');
siteHandleScriptError('rowSelectionChanged', err);
this.rowSelectionChanged = function (sender, e) { _rowSelectionChanged(sender, e); };
this.setCloseDropDown = function(close) { _closeDropDown = close; } ;
function _set_enabled(isEnabled) {
webDropDown.set_enabled(isEnabled);
siteHandleScriptError('set_enabled', err);
this.set_enabled = function (isEnabled) { _set_enabled(isEnabled); };
function _set_focus() {
webDropDown._element.focus();
siteHandleScriptError('set_focus', err);
this.set_focus = function () { _set_focus(); };
function _setSelectedItemByColumnValue(colKey, value) {
var compareVal = null;
var displayVal = null;
for (inx = 0; inx < rows.get_length(); inx++) {
compareVal = _getRowCellValue(colKey, row);
if (compareVal === value) {
displayVal = _getRowCellValue(_cso.DisplayValueKey, row);
if (displayVal === null) {
displayVal = '';
selection.get_selectedRows().add(row);
webDropDown.set_currentValue(displayVal, false); // true);
webDropDown._elements.Input.value = displayVal;
siteHandleScriptError('setSelectedItemByColumnValue', err);
this.setSelectedItemByColumnValue = function (colKey, value) { return _setSelectedItemByColumnValue(colKey, value); };
function _setSelectedItemByValue(value) {
_setSelectedItemByColumnValue(_cso.DataValueKey, value);
siteHandleScriptError('setSelectedItemByValue', err);
this.setSelectedItemByValue = function (value) { return _setSelectedItemByValue(value); };
function _set_visible(isShown) {
webDropDown.set_visible(isShown);
this.set_visible = function (isShown) { _set_visible(isShown); };
function _toggleMatchingRows(colKey, filterValue, matchingClass, nonMatchingClass) {
var compareVal;
if ((inx === 0) && ((compareVal === '') || (compareVal === 0) || (compareVal === null))) {
// retain the blank row selection despite the filterValue
_applyRowStyle(row, "mcd_ShowRow");
if (compareVal === filterValue) {
_applyRowStyle(row, matchingClass);
_applyRowStyle(row, nonMatchingClass);
siteHandleScriptError('toggleMatchingRows', err);
Do you see anything in here that would interfere?