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'»
Classic Infragistics UltraWebGrid allows you to programmaticaly specify CSS styles for its various elements. For example code like this:
xmyGrid.DisplayLayout.HeaderStyleDefault.CssClass = "HeaderStyle"
xmyGrid.DisplayLayout.RowStyleDefault.CssClass = "RowStyle"
Would set style of grid header and rows via external CSS class. You would expect that simple defining classes like this:
.HeaderStyle { /* style definition goes here */ }
.RowStyle { /* style definition goes here */ }
should do the trick, but you may experience some unwanted, erratic behavior: styles getting lost, styles getting mixed up (row would get a header style and vise versa).
To fix this we should let grid know that header style should apply only to header row (THEAD/TH HTML elements) and row style applies only to rows with data (TBODY/TD elements). This is done via slight adjustments of the above CSS to point it to specific elements:
THEAD.HeaderStyle TR TH{ /* style definition goes here */ }
TBODY.RowStyle TR TD { /* style definition goes here */ }
This way there’s no confusion, styles apply exactly were they belong. Also you may need to set grids MergeStyles property to False and make each class fully define it’s element (including fonts, colors, backgrounds etc.)
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.
If after upgrading to a new version of Infragistics NetAdvantage you suddenly found your WHDG sprouting an extra blank row on top:
most likely it’s because grid’s ItemCssClass property is used. In theory (at least according to ever so verbose documentation) it should define what grid’s cells look like. In practice it have no effect whatsoever. Or rather had no effect until upgrade (verified in version 2011.1, perhaps even earlier). Now if your CSS class used in this property contains HEIGHT attribute – a blank row of that height will be inserted on top of the grid.
Solution? Remove ItemCssClass property. It’s useless anyway.
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 'Infragistics WebDataMenu CSOM addItem/removeItem workaround'»
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…'»
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 'Ultrawebgrid: Highlight row on MouseOver with Selection enabled'»
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.
Infragistics UltraWebGrid offers rich set of features, among which paging of large sets of data. But if your total-number-of-records/records-per-page ratio is too high you will end up with way too many page links. And it doesn’t look pretty:
UltraWebGrid offers some out-of-the-box solutions for this problem. Continue reading 'Create enhanced pager for Infragistics UltraWebGrid'»
Comments (0) 
HTML/CSS, Infragistics
| 
css, design, style 
Themocracy