Category Archives: Javascript

WebDialogWindow – removing IFRAME border in IE

Infragistics WebDialogWindow control is a flexible and lightweight AJAX dialog control designed to look and feel like standard Windows dialogs. One of its neat features – it allows to load the content from an external URL. In that case it renders the content inside of an IFRAME, which is all good and well, but leaves an ugly default iframe border.

Browsers like FireFox can remediate this by simple setting the “frameborder” attribute of the content pane IFRAME element:

function showDialog() {      
    var oDialog = $find('xwdwMyDialog')
    var oDialogContent = oDialog.get_contentPane();
    var oDialogIFrame = oDialogContent.get_iframe();

    // Removing IFRAME border in FireFox
    oDialogIFrame.setAttribute('frameborder', '0');

    oDialog.show();
}

but unfortunatelly this doesn’t work in IE. Continue reading →

Ultrawebgrid: Highlight row on MouseOver

To highlight row in Infragistics Ultrawebgrid on mouse over event you just need to follow 4 simple steps:

First, define a class to be used for highlighting, for example:

<style type=”text/css”>.over { BACKGROUND-COLOR: lightcyan }</style>

Second, set mouse over/out handler (either in source or thru designer):

<ClientSideEvents MouseOutHandler=”MouseOutHandler” MouseOverHandler=”MouseOverHandler” />

Third, implement event handlers:

/* highlight row on mouse over */
function MouseOverHandler(gridName, id, objectType){
     var ohRow = igtbl_getRowById(id)
      if (ohRow) ohRow.Element.className = “over”
}

/* return row backcolor on mouse out */
function MouseOutHandler(gridName, id, objectType){
     var ohRow = igtbl_getRowById(id)
      if (ohRow) ohRow.Element.className = “”
}

Fourth (and this is important, see why) set background of the row style to inherit:

<RowStyleDefault BackColor=”Window” BorderColor=”Silver”
       BorderStyle=”Solid” BorderWidth=”1px”
       CustomRules=”background-color:inherit” Cursor=”Default”> …

Now you’re all set! The row will be highlighted on mouse over.

FileUpload and htmlfile: Access is denied error

If you use ASP.NET FileUpload control or <INPUT TYPE=”FILE” HTML> control in Internet Explorer on Windows XP SP2 or later, trying to enter file path manually may cause “htmlfile: Access is denied error” error if entered string is not well formed local or UNC path.

The reason is that the control in Internet Explorer after version 6 in Windows XP SP2 does not allow relative path and if the form is submitted via Javascript form.submit method (like for example a __doPostback() call in ASP.NET) you will get untrappable error from above, if the form is submitted by an <INPUT TYPE=”SUBMIT> button you won’t get any notice at all.

The way to work around this issue is to catch invalid file name prior form being sumbitted. Add onclick event to your submitting button (OnClientClick if this is ASP.NET server side button) and add following code to it:

onclick=”if (!FilePathIsValid()) return false;”

then add following JavaScript function to your code:

function FilePathIsValid() {
 var reg = /^(([a-zA-Z]:)|(\))(\{1}|((\{1})[^\]([^/:<>”|]*))+)$/g
 if (!reg.test(document.getElementById(‘xfuFile’).value)) {
    alert(‘Please enter valid file path’);
    return false
 } else
   return true
}

where ‘xfuFile’ is the name of your FileUpload control. The function uses Jens K. Suessmeyer’s RegEx Expression to test if the file path is well formed. If it’s not – user gets error message and the form is not submitted.

removeChild, SSL and Infragistics WebHtmlEditor

I was working with Infragistics WebHtmlEditor control, and on client side it was being moved around by appendChild, removeChild DOM methods. All worked fine until I tried it over SSL connection. Immediatly removeChild method cause Secure/Unsecure waring.  Digging a bit I found that it was an IE bug. According to Microsoft this problem occurs if the Web page script calls the removeChild method to delete a DIV element that references a background image, and they suggest either to set outerHTML of the DIV to an emtpy string (which I think is dumb if you still need to use element you removed), but their second solution to move background-image declaration into an external CSS class actually works. In reality this problem occurs not only with DIVs but with any HTML element with background image in its inline style. In my case WebHtmlEditor rendered itself as an HTML table and its cells had background-image specified. The control itself didn’t have corresponding images set, but its UseDefaultStyles property was set to BackrgoundImages – which resulted in rendered styles with background images. To apply modified Microsoft’s solution I set this property to None, then segregated background image into a separate class:

.HTML_EDITOR {
   background-image: URL(ig_common/images/htmleditor/backimagerow.gif)
}

and used that class in Toolbar and TabStrip CSSClass properties. Worked like a charm.

DHTML JavaScript Graphics – draw without flash

This JavaScript VectorGraphics library provides graphics capabilities for JavaScript: functions to draw circles, ellipses (ovals), oblique lines, polylines and polygons (for instance triangles, rectangles) dynamically into a webpage. Usage of this Vector Graphics library should be easy even if you don’t have JavaScript experience
This is very cool. This javascript graphics libary allows you to draw pretty much any shape, image or text directly into HTML without 3rd party plug-ins like Flash. Speed is amazing and it’s cross-browser compatable too. Get it at  http://www.walterzorn.de