Category Archives: HTML/CSS

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 →

Improved Auto-size columns for Infragistics WebHierarchicalDataGrid

In the previous post I described a method to automatically resize columns for Infragistics grid control. It works (most of the times) for flat WebDataGrid, but if you try same approach with WebHierarchicalDataGrid – it will fail for child bands.

Lets review what we’re trying to accomplish. A grid column should automatically resize to whichever is wider: either size of widest data in a column cell, or size of column header’s caption.

First is accomplished by not setting column width explicitly and by setting white-space attribute of cell’s style to nowrap. It can be done by either opening grid CSS class file located at ~/ig_res/[Your Style Name]/ig_dataGrid.css, locate tbody.igg_[Your Style Name]Item>tr>td class and add one more line at the end: white-space:nowrap. Here is an example with Office 2007 Style:

tbody.igg_Office2007BlueItem>tr>td
{
	background-color:White;
	border-right:solid 1px #D0D7E5;
	border-bottom:solid 1px #D0D7E5;
	padding:2px 5px 2px 5px;
	height: 18px;
	overflow: hidden;
	text-align:left;
	vertical-align:middle;
	white-space:nowrap;
}

Or (if you don’t want to touch original style) same can be achieved by *CssClass properties exposed by the grid.

Second (resizing column to header’s caption width, if it is wider then cells’ data) is a bit tricker. Continue reading →

Auto-size columns in Infragistics WebDataGrid

Ever wished your WebDataGrid could have Table Layout = Auto like old UltraWebGrid? Then it could automatically resize columns width to data width with respect line breaks. Well, it can, and in style (pan intended). Thanks to Infragistics tech-support for starting me in the right direction – here’s first 2 steps that need to be taken:

  1. Don’t set column width property – either default or for specific column either in server-side code or declaratively and don’t set grid’s width property
  2. Open your grid CSS class file, it’s located at ~/ig_res/[Your Style Name]/ig_dataGrid.css.
    Locate tbody.igg_[Your Style Name]Item>tr>td class and add one more line at the end: white-space:nowrap. Here is an example with Office 2007 Style:

    tbody.igg_Office2007BlueItem>tr>td
{
	background-color:White;
	border-right:solid 1px #D0D7E5;
	border-bottom:solid 1px #D0D7E5;
	padding:2px 5px 2px 5px;
	height: 18px;
	overflow: hidden;
	text-align:left;
	vertical-align:middle;
	white-space:nowrap;
}

Run your project – you will get a nicely autoresized grid columns:

WebDataGrid with autosized columns

But there’s one problem with this approach. Continue reading →

WebDataGrid: Custom drag and drop columns when Colum Moving behavior is enabled

Infragistics Aikido WebDataGrid offers a nice built-in ColumnMoving behavior. When enabled – it allows user to drag columns to change their order:

WebDataGrid with ColumnMoving behavior enabled

But what if you want to keep this behavior and add your own custom column drag-and-drop? For example to create your own column grouping, since WebHierarchicalDataGrid doesn’t handle grouping well.

In this post I will describe a simple technique how to both keep behavior shown above and implement custom column drag-and-drop:

WebDataGrid with custom column drag-and-drop
Continue reading →

WebHierarchicalDataGrid: Not ready for prime-time

I had high hopes for Infragistics Web Hierarchical Data Grid control. Especially in NetAdvantage 10.3 release (current as of this post). Control from Aikido Framework, build on AJAX from ground up, lightweight and fast – I was really excited.

Unfortunately it didn’t turned out exactly as I expected.

First – WHDG cannot bind to a flat ADO.NET data table. Why, you ask, I need to bind flat data to an hierarchical control? Well, it’s the only grid in Aikido that supports OutlookGroupBy mode and I need to be able to group my flat data. But attempt to bind WHDG to DataTable throws an enigmatic InvalidOperationException without giving any clue as why. There’s a workaround – to create a dummy DataSet, add the table to it and bind control to the dataset – but that’s just silly. And that’s not the worst of it. 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 does not display last column’s right border (solution)

If you’re using Infragistics UltraWebGrid and experienced an odd behavior where the grid does not display the right-most vertical border line – there’s a workaround.

By default 2 elements contribute to the grid border – border from RowStyleDefault property and border from FrameStyle property. For some reason IE6/7 (yes, some people still use those) do not render the right border of the last column, even though all 3 properties (BorderColor, BorderStyle and BorderWidth) are set. So the solution is to have FrameStyle lend that border:

  1. Expand RowStyleDefault -> BorderDetails property and set StyleRight to None – this is done, so the double border won’t render in IE8 and other browsers where the border is displayed correctly in the first place
  2. Expand FrameStyle -> BorderDetails property and set ColorRight, StyleRight and WidthRight properties to the desired color, style and width (e.g. LightGray, Solid, 1px)

As a result, the right border is displayed correctly in all versions of IE.