Tag Archives: style

Infragistics WebDataMenu CSOM addItem/removeItem workaround

Infragistics Aikido WebDataMenu control has extensive (albeit poorly documented) client-side library of classes, method and properties. 2 methods addItem and removeItem supposedly allow you to add/remove menu items in JavaScript. These methods have been public since 9.2 release probably even earlier, but have a lot of drawbacks, one of the major ones – for every method call an AJAX call to server is made, which slows performance dramatically, breaks code flow and won’t let you set properties of newly added item.

Method described below is a bit of a hack, but it works purely client-side, no slow round trips, no waiting for AJAX call to return and you have full control of all menu items. Continue reading →

If HtmlEncode doesn’t work for WebDataGrid…

While working with Infragistics WebDataGrid/WebHierarchicalDataGrid I noticed a strange thing: column’s HtmlEncode property (which should control whether HTML value of grid’s cell is rendered as HTML or shown as is in raw tags) had no effect. Maybe I was doing something wrong, maybe it was the fact that grid columns were generated in server-side code (here is short snippet):

oGridCol = New GridControls.BoundDataField()
oGridCol.DataFieldName = sDataColName
oGridCol.Header.Text = sCaption
oGridCol.Key = sKey

if '(some condition) then
   oGridCol.HtmlEncode = False
   oGridCol.CssClass = "nowrapHTML"
Else
   oGridCol.HtmlEncode = True
   oGridCol.CssClass = "nowrapPLAIN"
End If

Here if a certain condition is met – column should render HTML (HtmlEncode = False) otherwise it should display HTML tags (HtmlEncode = True). To make cell expand to data width, 2 simple CSS classes were used:

.nowrapHTML {white-space:nowrap}
.nowrapPLAIN {white-space:pre}

In following grid first column was being set with HtmlEncode = True, second with HtmlEncode = False, yet both columns were rendered as HTML.

HtmlEncode doesn't work

Continue reading →

Ultrawebgrid: Highlight row on MouseOver with Selection enabled

A while back I posted a method to highlight rows on mouse over in Infragistics UltraWebGrid. Over the time turned out that it had several limitations the main being: if you enable additional styling for some elements of the grid, they’re not preserved after mouse-over/mouse-out events. For example if you set a SelectedRowStyleDefault property with a different background and then move mouse over a selected row – that style will be removed.

So, here’s a complete solution to work around that limitation: Continue reading →

LightGray in IE6

IE6 just won’t die. I know, continue to support it is a bad idea, but unfortunately many developers have no choice, some environments, especially corporate intranet will continue to use it until second coming (and then Safari will rule the world).

So, here is a small tip: If you need to use a named color from CSS3+ specification that old tired browser doesn’t understand – just use color’s hex equivalent instead. For example instead of

style="border: solid 1px LightGray;"

which will do nothing in IE6 use

style="border: solid 1px #d3d3d3;"

which will render nice light-gray border.

UltraWebGrid in OutlookGroupBy Mode: How to display custom aggregates (SUM, AVG, MIN, MAX) in GroupBy row

Last year I described a way to display accurate row count when grid in OutlookGroupBy mode has multiple sub-groups.

That solution requires custom counting function. Fortunately to display aggregates such as SUM, AVG, MIN and MAX UltraWebGrid has a built-in functionality in form of GroupByRowDescriptionMaskDefault property of DisplayLayout. It specifies the string to be displayed in every GroupBy row and can include following substitutes:

  • [caption] – will display GroupBy column header text
  • [value] – will display common to the group cell value
  • [count] – will display row count (does not work correctly with sub-groups)
  • [avg], [sum], [min], [max] – will display the aggregate for the column it’s grouped by
  • [avg:ColumnKey], [sum:ColumnKey], [min:ColumnKey], [max:ColumnKey] – will display the aggregate for any other column, where ColumnKey is the key of the column

With this in mind in just a few simple steps we can make UltraWebGrid to display something like this:


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 →

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.