Category Archives: Infragistics

Infragistics Drag and Drop: detecting element during drag

I was using Infragistics drag-and-drop framework and set an HTML table element as my drop target. Now I needed to know during drag operation over which HTML table cell I am moving. I needed that in order to dynamically change appearance of draggable markup depending on which cell I am currently over.



(Think a strategy game – you’re placing construction on the terrain – if there is enough unoccupied room – the draggable item becomes green, otherwise it remains red).

The solution is to use elemAtPoint property during DragMoveHandler event. Continue reading →

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 →

Global Chart Type for Dundas Chart Control

      Dundas Charts for .NET has many cool features like async callbacks, AJAX scroll and zoom, plenty of chart types and great visuals, but in some cases some of those features could turn out to be more of a burden than useful. One example – the ability to set chart type for each individual series of a chart. This offers great flexibility in building combination charts (you can display column and line on the same chart to reflect different series’ data), but you’re losing the Infragistics simplicity of just setting the chart type and binding chart to data without worrying about appearance of each individual series.
      This is especially inconvinient if you load chart appearance (including series appearance and chart type) from an external template. If you want to use chart type from the template, but feed it your own data – you’re stuck.  But there is a solution. 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.

UltraWebGrid in OutlookGroupBy Mode: How to count total number of rows in subgroups

Infragistics UltraWebGrid has a nice feature – OutlookGroupBy mode – which allows to group rows by common field either by dragging them into a GroupBy Box or programmatically.

The only drawback – when you have several levels of groupings (group within a group) – the outer group shows count of inner groups, not total number of individual rows within a group.

before

When I contacted Infragistics tech support asking how to show total count of rows within a group they told me it was impossible. Well, turned out it wasn’t entirely true.

Continue reading →

Infragistics UltraWebGrid grouping in code problem (solved)

I was having a real hard time with this error  – when I set grid group in in code by assigning IsGroupedBy property of a column to “true” – every other grid.databind()  was throwing error “Failed to compare two elements in the array.” Event though I cleared (or so I thought) Bands collection, Rows collection and Columns collections with their respective .Clear() methods.

The solution?

Continue reading →

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.