Infragistics UltraWebTab control offers multiple styling options, many of them can be set via external CSS classes. As a matter of fact about only element you cannot style via external stylesheet is rounded corner images. Or can you?

By default images used to give the tabs rounded-corner look are referenced directly in UltraWebTab ASPX markup:

<RoundedImage
   SelectedImage="./images/ig_tab_selected.jpg"
   NormalImage="./images/ig_tab_normal.gif"
   HoverImage="./images/ig_tab_hover.jpg"
   FillStyle="LeftMergedWithCenter">
</RoundedImage>

So, for example if SelectedImage looks like this:

It will give your tab appearance like this

Let’s examine it closer. Continue reading 'Style Rounded Corner images of UltraWebTab thru external stylesheet'»

Internet Explorer offer CSS elements to style scrollbars, for example class

.FlatScrollbars
{
   scrollbar-face-color: #f0f0f0;
   scrollbar-shadow-color: silver;
   scrollbar-highlight-color: silver;
   scrollbar-3dlight-color: #f0f0f0;
   scrollbar-darkshadow-color: #f0f0f0;
   scrollbar-track-color: #f0f0f0;
   scrollbar-arrow-color: #000000;
}

applied to a DOM element will render nice flat scrollbars:

Yes, it’s not standard CSS, but other browsers offer similar extensions (WebKit, I am looking at you). So, it works nice and well, but what if you want to style scrollbars of an IFRAME? Continue reading 'Style IFRAME scrollbars in IE'»

If you’re still using classic Infragistics Controls and want to make them work in modern browsers, sometimes a little additional work is required. Hopefully this little trick will save you some time.

UltraWebGrid has a neat property TopItemSpacing, when set to Auto it automatically spreads top level menu items across the menu control, giving them nice spacing in between. Unfortunately this property seems to work in Internet Explorer only, in Firefox (and Chrome and etc.) it is ignored, rendering menu in Compact mode giving top level items crowded “too-close-for-comfort” look.

The solution is to take spacing in our own hands. Set TopItemSpacing to Compact and instead add right padding to TopLevelParentItemStyle and TopLevelLeafItemStyle elements of the menu. For example (from the markup point of view):

<TopLevelLeafItemStyle Cursor="Hand" Height="18px" BorderWidth="1px" Font-Size="8pt">
   <Padding Right="6px" />
</TopLevelLeafItemStyle>

Actual pixel value of the padding is up to your particular scenario, but the final result is top level menu items will be nicely spaced both in IE and in Firefox.

Another day, another experiment on my new favorite toy business instrument – Kindle Fire. Today I went ahead and installed latest (as of this date) incarnation of Android OS – version 4 aka Ice Cream Sandwich (ICS). Again, like in case with CyanogenMod 7 (which is essentially Android 2.3.7) installation is extremally easy thanks to TWRP recovery. Just download Kindle Zone ICS ROM put it on your Fire, reboot into TWRP recovery, *backup your existing rom* and flash the ICS.

It boots nicely and looks pretty good. Connects to WiFi with Internet and LAN access (ES File Explorer comes preinstalled and accessed SMB shares on my home network with no problems).

Being a very early version it has it share of problems. Video doesn’t work correctly (MP4 files for example play in fast-forward mode, YouTube can’t connect). Sounds work sporadically and overall moving around the interface has a jerky feeling. But it looks like a very good start and I am looking forward to a more stable release. Meanwhile I am back to CM7

---

UPDATE 02/18/2012. Now this is what the doctor ordered. The new update from the same XDA forum thread as above breathed new life into my Kindle. Basically, everything works. And it looks awesome! Here is direct link to the ROM. So now this is my OS of choice for my Fire. Did I mention it’s Cyanogen Mod 9? Did I also mention that there’s Google Chrome now available on Android Marked for Ice Cream Sandwich?

Often, when drawing a chart, there’s a need to show a threshold – basically a line that indicates whether your values are going above or below it. Take for example this ColumnChart:

Let’s say we need to show a threshold for the value of 7. Here’s how. Continue reading 'How to add threshold line to MSChart in ASP.NET'»

Infragistics WebDataTree control offers extensive support of CSS for tree styling. One of the options HoverCssClass is intended to alter tree node appearance when mouse pointer hovers over it:

Unfortunately it doesn’t seem to have any effect on the tree appearance. When I set that class to simple underline node:

.fnTreeHover {text-decoration:underline}

nothing happened. I found the workaround when I noticed that the tree is rendered as an ancor tag <A> inside of <LI> tag:

The solution is to apply style to this combination:

LI A:hover {text-decoration:underline}

Bingo. Now tree nodes are underlying when mouse is over them.

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.

Continue reading 'If HtmlEncode doesn’t work for WebDataGrid…'»

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 'Improved Auto-size columns for Infragistics WebHierarchicalDataGrid'»

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:

But there’s one problem with this approach. Continue reading 'Auto-size columns in Infragistics WebDataGrid'»

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

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:

Continue reading 'WebDataGrid: Custom drag and drop columns when Colum Moving behavior is enabled'»