Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>Part 2 of updated <code>ReportingServices.js</code> from my answer:</p> <pre><code>// --- Context Menu --- // This function is called in the onload event of the body. // It hooks the context menus up to the Javascript code. // divContextMenuId, is the id of the div that contains the context menus // selectedIdHiddenFieldId, is the id of the field used to post back the name of the item clicked // contextMenusIds, is an array of the ids of the context menus // searchTextBox ID, is the id of the search box // defaultSearchValue. the value the search box has by default function InitContextMenu(divContextMenuId, selectedIdHiddenFieldId, contextMenusIds, searchTextBoxID, defaultSearchValue ) { ResetSearchBar( searchTextBoxID, defaultSearchValue ); _divContextMenu = document.getElementById(divContextMenuId); _selectedIdHiddenField = document.getElementById(selectedIdHiddenFieldId); _contextMenusIds = contextMenusIds; _divContextMenu.onmouseover = function() { _mouseOverContext = true; }; _divContextMenu.onmouseout = function() { if (_mouseOverContext == true) { _mouseOverContext = false; if (_timeOutTimer == null) { _timeOutTimer = setTimeout(TimeOutAction, _timeOutLimit); } } }; document.body.onmousedown = ContextMouseDown; AddKeyDownListener(); } // This handler stops bubling when arrow keys Up or Down pressed to prevent scrolling window function KeyDownHandler(e) { // Cancel window scrolling only when menu is opened if(_currentContextMenuId == null) { return true; } if(!e) { e = window.event; } var key = e.keyCode; if(key == 38 || key == 40) { return false; } else { return true; } } function AddKeyDownListener() { if(document.addEventListener) { document.addEventListener('keydown', KeyDownHandler, false); } else { document.onkeydown = KeyDownHandler; } } // This function starts the context menu timeout process function TimeOutAction() { if (_mouseOverContext == false) { UnSelectedMenuItem() } _timeOutTimer = null; } // This function is called when a name tag is clicked, it displays the contextmenu for a given item. function Clicked(event, contextMenuId) { if (!_onLink) { ClearTimeouts(); SelectContextMenuFromColletion(contextMenuId); _itemSelected = true; // **Cross browser compatibility code** // Some browsers will not pass the event so we need to get it from the window instead. if (event == null) event = window.event; var selectedElement = event.target != null ? event.target : event.srcElement; var outerTableElement = GetOuterElementOfType(selectedElement, 'table'); var elementPosition = GetElementPosition(outerTableElement); _selectedItemId = outerTableElement.id; // chris edit - _selectedIdHiddenField.value = outerTableElement.value; _selectedIdHiddenField.value = outerTableElement.attributes["value"].value; outerTableElement.className = "msrs-SelectedItem"; ResetContextMenu(); var contextMenuHeight = _divContextMenu.offsetHeight; var contextMenuWidth = _divContextMenu.offsetWidth; var boxHeight = outerTableElement.offsetHeight; var boxWidth = outerTableElement.offsetWidth; var boxXcoordinate = elementPosition.left; var boxYcooridnate = elementPosition.top; var pageWidth = 0, pageHeight = 0; // **Cross browser compatibility code** if (typeof (window.innerWidth) == 'number') { //Non-IE pageWidth = window.innerWidth; pageHeight = window.innerHeight; } else if (document.documentElement &amp;&amp; (document.documentElement.clientWidth || document.documentElement.clientHeight)) { //IE 6+ in 'standards compliant mode' pageWidth = document.documentElement.clientWidth; pageHeight = document.documentElement.clientHeight; } else if (document.body &amp;&amp; (document.body.clientWidth || document.body.clientHeight)) { //IE 4 compatible pageWidth = document.body.clientWidth; pageHeight = document.body.clientHeight; } // **Cross browser compatibility code** var iebody = (document.compatMode &amp;&amp; document.compatMode != "BackCompat") ? document.documentElement : document.body var pageXOffSet = document.all ? iebody.scrollLeft : pageXOffset var pageYOffSet = document.all ? iebody.scrollTop : pageYOffset _divContextMenu.style.left = SetContextMenuHorizonatalPosition(pageWidth, pageXOffSet, boxXcoordinate, contextMenuWidth, boxWidth) + 'px'; _divContextMenu.style.top = SetContextMenuVerticalPosition(pageHeight, pageYOffSet, boxYcooridnate, contextMenuHeight, boxHeight) + 'px'; ChangeOpacityForElement(100, _divContextMenu.id); // chris edit - document.getElementById(_currentContextMenuId).firstChild.focus(); firstChildNoWS(document.getElementById(_currentContextMenuId)).focus(); } } // *********************************** // Context menu keyboard navigation // *********************************** // Opens context menu via keyboard. Context menu // is opened by selecting an item and pressing // Alt + Down. function OpenMenuKeyPress(e, contextMenuId) { // Alt key was pressed if (e.altKey) { var keyCode; if (window.event) keyCode = e.keyCode; else keyCode = e.which; // Down key was pressed if (keyCode == 40) { // Open context menu. Clicked(event, contextMenuId); // Highlight the first selectable item // in the context menu. HighlightContextMenuItem(true); } } } // Performs keyboard navigation within // opened context menu. function NavigateMenuKeyPress(e) { var keyCode; if (window.event) keyCode = e.keyCode; else keyCode = e.which; // Down key moves down to the next context menu item if (keyCode == 40) { HighlightContextMenuItem(true); } // Up key moves up to the previous context menu item else if (keyCode == 38) { HighlightContextMenuItem(false); } // Escape key closes context menu else if (keyCode == 27) { // Close context menu UnSelectedMenuItem(); // Make sure focus is given to the catalog item // in the folder view. document.getElementById(_selectedItemId).focus(); } } // Highlights context menu item. // Parameter: highlightNext // - If true, highlights menu item below current menu item. // If current menu item is the last item, wraps around and // highlights first menu item. // - If false, highlights menu item above current menu item. // If current menu item is the first item, wraps around and // highlights last menu item. function HighlightContextMenuItem(highlightNext) { var contextMenu = document.getElementById(_currentContextMenuId); // chris edit - var table = contextMenu.lastChild; var table = lastChildNoWS(contextMenu); var currentMenuItemIndex = -1; if (_currentMenuItemId != null) currentMenuItemIndex = document.getElementById(_currentMenuItemId).parentNode.rowIndex; var index = currentMenuItemIndex; while (true) { if (highlightNext) { index++; // If the index is out of range, // reset it to the beginning if (index &lt; 0 || index &gt;= table.cells.length) index = 0; } else { index--; // If the index is out of range, // reset it to the end if (index &lt; 0 || index &gt;= table.cells.length) index = table.cells.length - 1; } // Each context menu item has an associated // group ID. Make sure the table cell has a valid // group ID, otherwise it is not a menu item (e.g. // an underline separator). if (table.cells[index].group &gt;= 0) { FocusContextMenuItem(table.cells[index].id, 'msrs-MenuUIItemTableHover', 'msrs-MenuUIItemTableCell'); break; } // If we reach the orignal index, that means we looped // through all table cells and did not find a valid context // menu item. In that case, stop searching. if (index == currentMenuItemIndex) break; } } // *** End keyboard navigation *** // This function resets the context menus shape and size. function ResetContextMenu() { _divContextMenu.style.height = 'auto'; _divContextMenu.style.width = 'auto'; _divContextMenu.style.overflowY = 'visible'; _divContextMenu.style.overflowX = 'visible'; _divContextMenu.style.overflow = 'visible'; _divContextMenu.style.display = 'block'; } // This function sets the horizontal position of the context menu. // It also sets is the context menu has vertical scroll bars. function SetContextMenuHorizonatalPosition(pageWidth, pageXOffSet, boxXcoordinate, contextMenuWidth, boxWidth) { var menuXCoordinate = boxXcoordinate + boxWidth - contextMenuWidth; var spaceRightBox = (pageWidth + pageXOffSet) - menuXCoordinate; var spaceLeftBox = menuXCoordinate - pageXOffSet; var returnValue; if ((contextMenuWidth &lt; spaceRightBox) &amp;&amp; (pageXOffSet &lt; menuXCoordinate)) { returnValue = menuXCoordinate; } else if ((contextMenuWidth &lt; spaceRightBox)) { returnValue = pageXOffSet; } else if (contextMenuWidth &lt; spaceLeftBox) { returnValue = menuXCoordinate - (contextMenuWidth - (pageWidth + pageXOffSet - menuXCoordinate)); } else { _divContextMenu.style.overflowX = "scroll"; if (spaceLeftBox &lt; spaceRightBox) { _divContextMenu.style.width = spaceRightBox; returnValue = pageXOffSet; } else { _divContextMenu.style.width = spaceLeftBox; returnValue = menuXCoordinate - (spaceLeftBox - (pageWidth + pageXOffSet - menuXCoordinate)); } } return returnValue; } // This function sets the vertical position of the context menu. // It also sets is the context menu has horizontal scroll bars. function SetContextMenuVerticalPosition(pageHeight, pageYOffSet, boxYcooridnate, contextMenuHeight, boxHeight) { var spaceBelowBox = (pageHeight + pageYOffSet) - (boxYcooridnate + boxHeight); var spaceAboveBox = boxYcooridnate - pageYOffSet; var returnValue; if (contextMenuHeight &lt; spaceBelowBox) { returnValue = (boxYcooridnate + boxHeight); } else if (contextMenuHeight &lt; spaceAboveBox) { returnValue = (boxYcooridnate - contextMenuHeight); } else if (spaceBelowBox &gt; spaceAboveBox) { _divContextMenu.style.height = spaceBelowBox; _divContextMenu.style.overflowY = "scroll"; returnValue = (boxYcooridnate + boxHeight); } else { _divContextMenu.style.height = spaceAboveBox; _divContextMenu.style.overflowY = "scroll"; returnValue = (boxYcooridnate - spaceAboveBox); } return returnValue; } // This function displays a context menu given its id and then hides the others function SelectContextMenuFromColletion(contextMenuConfigString) { var contextMenuId = SplitContextMenuConfigString(contextMenuConfigString); for (i = 0; i &lt; _contextMenusIds.length; i++) { var cm = document.getElementById(_contextMenusIds[i]); if (cm.id == contextMenuId) { cm.style.visibility = 'visible'; cm.style.display = 'block'; _currentContextMenuId = contextMenuId; } else { cm.style.visibility = 'hidden'; cm.style.display = 'none'; } } } function SplitContextMenuConfigString(contextMenuConfigString) { var contextMenuEnd = contextMenuConfigString.indexOf(":"); var contextMenuId = contextMenuConfigString; var contextMenuHiddenItems; if (contextMenuEnd != -1) { contextMenuId = contextMenuConfigString.substr(0, contextMenuEnd); } var cm = document.getElementById(contextMenuId); // chris edit - var table = cm.firstChild; var table = firstChildNoWS(cm); var groupItemCount = []; // The items in each group var groupUnderlineId = []; // The Id's of the underlines. // Enable all menu items counting the number of groups, // number of items in the groups and underlines for the groups as we go. // start chris edit /* for (i = 0; i &lt; table.cells.length; i++) { table.cells[i].style.visibility = 'visible'; table.cells[i].style.display = 'block' if ((groupItemCount.length - 1) &lt; table.cells[i].group) { groupItemCount.push(1); groupUnderlineId.push(table.cells[i].underline); } else { groupItemCount[table.cells[i].group]++; } AlterVisibilityOfAssociatedUnderline(table.cells[i], true) }*/ if (table != null &amp;&amp; table.rows != null) { for (r = 0; r &lt; table.rows.length; r++) { for (i = 0; i &lt; table.rows[r].cells.length; i++) { table.rows[r].cells[i].style.visibility = 'visible'; table.rows[r].cells[i].style.display = 'block' if ((groupItemCount.length - 1) &lt; table.rows[r].cells[i].group) { groupItemCount.push(1); groupUnderlineId.push(table.rows[r].cells[i].underline); } else { groupItemCount[table.rows[r].cells[i].group]++; } AlterVisibilityOfAssociatedUnderline(table.rows[r].cells[i], true) } } } // end chris edit // If hidden items are listed, remove them from the context menu if (contextMenuEnd != -1) { contextMenuHiddenItems = contextMenuConfigString.substr((contextMenuEnd + 1), (contextMenuConfigString.length - 1)).split("-"); var groupsToHide = groupItemCount; // Hide the hidden items for (i = 0; i &lt; contextMenuHiddenItems.length; i++) { var item = document.getElementById(contextMenuHiddenItems[i]); item.style.visibility = 'hidden'; item.style.display = 'none' groupsToHide[item.group]--; } var allHidden = true; // Work back through the groups hiding the underlines as required. for (i = (groupsToHide.length - 1); i &gt; -1; i--) { if (groupsToHide[i] == 0) { AlterVisibilityOfAssociatedUnderline(groupUnderlineId[i], false); } else if (allHidden &amp;&amp; i == (groupsToHide.length - 1)) { allHidden = false; } // If all the items have been hidden so far hide the last underline too. else if (allHidden) { allHidden = false; AlterVisibilityOfAssociatedUnderline(groupUnderlineId[i], false); } } } return contextMenuId; } function AlterVisibilityOfAssociatedUnderline(underLineId, visibility) { if (underLineId != null &amp;&amp; underLineId != "") { var underlineElement = document.getElementById(underLineId); if (underlineElement != null) { if (visibility) { underlineElement.style.visibility = 'visible'; underlineElement.style.display = 'block' } else { underlineElement.style.visibility = 'hidden'; underlineElement.style.display = 'none' } } } } function ClearTimeouts() { if (_fadeTimeouts != null) { for (i = 0; i &lt; _fadeTimeouts.length; i++) { clearTimeout(_fadeTimeouts[i]); } } _fadeTimeouts = []; } // This function chnages an elements opacity given its id. function FadeOutElement(id, opacStart, opacEnd, millisec) { ClearTimeouts(); //speed for each frame var speed = Math.round(millisec / 100); var timer = 0; for (i = opacStart; i &gt;= opacEnd; i--) { _fadeTimeouts.push(setTimeout("ChangeOpacityForElement(" + i + ",'" + id + "')", (timer * speed))); timer++; } } // This function changes the opacity of an elemnent given it's id. // Works across browsers for different browsers function ChangeOpacityForElement(opacity, id) { var object = document.getElementById(id).style; if (opacity != 0) { // **Cross browser compatibility code** object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } else { object.display = 'none'; } } // This function is the click for the body of the document function ContextMouseDown() { if (_mouseOverContext) { return; } else { HideMenu() } } // This function fades out the context menu and then unselects the associated name control function UnSelectedMenuItem() { if (_itemSelected) { FadeOutElement(_divContextMenu.id, 100, 0, 300); UnselectCurrentMenuItem(); } } // Hides context menu without fading effect function HideMenu() { if (_itemSelected) { ChangeOpacityForElement(0, _divContextMenu.id); UnselectCurrentMenuItem(); } } function UnselectCurrentMenuItem() { _itemSelected = false; _currentContextMenuId = null; SwapStyle(_currentMenuItemId, 'msrs-MenuUIItemTableCell'); _currentMenuItemId = null; ChangeReportItemStyle(_selectedItemId, "msrs-UnSelectedItem"); } // This function walks back up the DOM tree until it finds the first occurrence // of a given element. It then returns this element function GetOuterElementOfType(element, type) { while (element.tagName.toLowerCase() != type) { element = element.parentNode; } return element; } // This function gets the corrdinates of the top left corner of a given element function GetElementPosition(element) { element = GetOuterElementOfType(element, 'table'); var left, top; left = top = 0; if (element.offsetParent) { do { left += element.offsetLeft; top += element.offsetTop; } while (element = element.offsetParent); } return { left: left, top: top }; } function FocusContextMenuItem(menuItemId, focusStyle, blurStyle) { SwapStyle(_currentMenuItemId, blurStyle); SwapStyle(menuItemId, focusStyle); // chrid edit - document.getElementById(menuItemId).firstChild.focus(); firstChildNoWS(document.getElementById(menuItemId)).focus(); _currentMenuItemId = menuItemId; } // This function swaps the style using the id of a given element function SwapStyle(id, style) { if (document.getElementById) { var selectedElement = document.getElementById(id); if (selectedElement != null) { selectedElement.className = style; } } } // This function changes the style using the id of a given element // and should only be called for catalog items in the tile or details view function ChangeReportItemStyle(id, style) { if (!_itemSelected) { if (document.getElementById) { var selectedElement = document.getElementById(id); selectedElement.className = style; // Change the style on the end cell by drilling into the table. if (selectedElement.tagName.toLowerCase() == "table") { // chris edit - var tbody = selectedElement.lastChild; var tbody = lastChildNoWS(selectedElement); if (tbody != null) { // chris edit - var tr = tbody.lastChild; var tr = lastChildNoWS(tbody); if (tr != null) { // chris edit - tr.lastChild.className = style + 'End'; trLastChild = lastChildNoWS(tr); if (trLastChild != null) { trLastChild.className = style + 'End'; } } } } } } } function ChangeReportItemStyleOnFocus(id, currentStyle, unselectedStyle) { _unselectedItemStyle = unselectedStyle; _tabFocusedItem = id; // We should unselect selected by mouse over item if there is one if(_mouseOverItem != '') { ChangeReportItemStyle(_mouseOverItem, _unselectedItemStyle); _mouseOverItem = ''; } ChangeReportItemStyle(id, currentStyle); } function ChangeReportItemStyleOnBlur(id, style) { ChangeReportItemStyle(id, style); _tabFocusedItem = ''; } function ChangeReportItemStyleOnMouseOver(id, currentStyle, unselectedStyle) { _unselectedItemStyle = unselectedStyle; _mouseOverItem = id; // We should unselect tabbed item if there is one if(_tabFocusedItem != '') { ChangeReportItemStyle(_tabFocusedItem, _unselectedItemStyle); _tabFocusedItem = ''; } ChangeReportItemStyle(id, currentStyle); } function ChangeReportItemStyleOnMouseOut(id, style) { ChangeReportItemStyle(id, style); _mouseOverItem = ''; } // This function is used to set the style of the search bar on the onclick event. function SearchBarClicked(id, defaultText, style) { var selectedElement = document.getElementById(id); if (selectedElement.value == defaultText) { selectedElement.value = ""; selectedElement.className = style; } } // This function is used to set the style of the search bar on the onblur event. function SearchBarBlured(id, defaultText, style) { var selectedElement = document.getElementById(id); if (selectedElement.value == "") { selectedElement.value = defaultText; selectedElement.className = style; } } function ResetSearchBar(searchTextBoxID,defaultSearchValue) { var selectedElement = document.getElementById(searchTextBoxID); if (selectedElement != null) { if (selectedElement.value == defaultSearchValue) { selectedElement.className = 'msrs-searchDefaultFont'; } else { selectedElement.className = 'msrs-searchBarNoBorder'; } } } function OnLink() { _onLink = true; } function OffLink() { _onLink = false; } function ShouldDelete(confirmMessage) { if (_selectedIdHiddenField.value != null || _selectedIdHiddenField.value != "") { var message = confirmMessage.replace("{0}", _selectedIdHiddenField.value); var result = confirm(message); if (result == true) { return true; } else { return false; } } else { return false; } } function UpdateValidationButtonState(promptCredsRdoBtnId, typesDropDownId, forbiddenTypesConfigString, validateButtonId) { var dropdown = document.getElementById(typesDropDownId); if(dropdown == null) { return; } var selectedValue = dropdown.options[dropdown.selectedIndex].value; var forbiddenTypes = forbiddenTypesConfigString.split(":"); var chosenForbiddenType = false; for (i = 0; i &lt; forbiddenTypes.length; i++) { if(forbiddenTypes[i] == selectedValue) { chosenForbiddenType = true; } } var isDisabled = chosenForbiddenType || IsRadioButtonChecked(promptCredsRdoBtnId); ChangeDisabledButtonState(validateButtonId, isDisabled); } function ChangeDisabledButtonState(buttonId, isDisabled) { var button = document.getElementById(buttonId); if(button != null) { button.disabled = isDisabled; } } function IsRadioButtonChecked(radioButtonId) { var rbtn = document.getElementById(radioButtonId); if(rbtn != null &amp;&amp; rbtn.checked) { return true; } return false; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload