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'»
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.
I have been using WebHierarchicalDataGrid with manual load on demand bands with a pretty good success until I hit this snag.
The WHDG has correctly displayed HTML fields before, but this time a column with HTML data (an HREF link to be precise) is needed as one of the grid’s DataKeyFields to provide uniqueness of the row:
Continue reading 'WebHierarchicalDatagrid: Sys.ArgumentException: Cannot deserialize on Row Expand'»
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'»
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:
- 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
- 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'»
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'»
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:
- 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
- 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.
Rounded corners add nice touch to look and feel of a Web Page. User interface that employs rounded corners looks more streamlined, more ergonomic. Often to achieve that effect images are used, but this approach doesn’t allow quick style update and has other issues. Fortunately there is another way:
Compare 2 following DIVs:
First uses pretty basic CSS/HTML:
<style type="text/css">
.normal
{
border: solid 1px blue;
background-color:yellow;
height:100px;
width:200px
}
</style>
<div style="text-align:center">
<div class="normal">
</div>
Let’s take a closer look at the second: Continue reading 'Easy rounded corners in pure HTML/CSS'»
I was using a pretty standard line of JavaScript code to set dimentions of an HTML element, something like:
oDiv.style.height = iWindowHeight/2 - 50;
It was working fine in IE, but had no effect whatsoever in Firefox.
Turned out all that was needed – to add ‘px’ to that line:
oDiv.style.height = iWindowHeight/2 - 50 + 'px';
and it works fine in both browsers.
Comments (0) 
HTML/CSS, Infragistics
| 
css, design, style 
Themocracy