Code Corner » HTML/CSS

Style Rounded Corner images of UltraWebTab thru external stylesheet

Yuriy — Fri, 17 Feb 2012 17:21:08 +0000

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:

So, for example if SelectedImage looks like this:

It will give your tab appearance like this

Let’s examine it closer. If your look in browser at rendered HTML of this tab it looks like this (I’ve removed some attributes to simplify view):

My Test Tab

Where

.xuwtHome_2 {
   BACKGROUND: url(./images/ig_tab_selected.jpg) no-repeat left top;
}

.xuwtHome_2R {
   BACKGROUND: url(./images/ig_tab_selected.jpg) no-repeat right top;
}

So in reality tab consists of 2 TD elements: First one, on the left, takes the left part of the image as a background; Second on the right – small “rounded” part from the right part of the image (in this case 5 pixels, see TD‘s WIDTH atribute)

Knowing this we can now model our CSS class to reference and render rounder corner image:

.TabStyleSelected /* Style of left TD. Add font and other styles for tab title */
{
   background-image: url("./images/ig_tab_selected.jpg") !important;
}

.TabStyleSelected + td /* Style of right TD. Width from width of right rounded part */
{
   background-image: url("./images/ig_tab_selected.jpg") !important;
   width:5px !important;
}

Note “+” CSS selector on Line 6. It tells browser to apply this style to next sibling TD element (in our case right TD) of the element to which original style is applied (in our case left TD element). Also note “width” attribute on Line 9. It is the width of right “rounded” part of the image. If your image is different and rounded part takes more/less – adjust this value accordingly.

After the style is set like this it just a matter of assigning class to tab element(s). If you want to make this style default for all tabs – use SelectedTabStyle element:

If you want to apply separate round corner styles to individual tabs (which was not possible originally with round corner images ~~set in stone~~ set in ASPX markup) you can do that as well:

Or even do it programmaticaly

oTabControl.SelectedStyle.CssClass = "TabStyleSelected"

Similar approach can be used to define “normal” and hover tab styles and if you need to change rounded styles (either globally, or per tab) no need to change ASPX markup, no need to rename original images or paste your images over original, just create new images and reference them in the stylesheet.

Style IFRAME scrollbars in IE

yomgal — Wed, 15 Feb 2012 23:05:47 +0000

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?

First of all, the above style has to be applied to the child page loaded into IFRAME, *not* parent page that hosts the IFRAME. Ordinary it’s applied to BODY element of the page. But sometimes, for example if your DOCTYPE is XHTML 1.0 Transitional – this doesn’t work. If that’s the case – and this is a kicker – apply the style to HTML element of the page, yes I am talking about

or even (if you want to assign class programmaticaly in ASP.NET code behind) in ASPX markup:

and in VB code behind:

xhtml.Attributes("class") = "FlatScrollbars"

Correctly apply external styles to UltraWebGrid

yomgal — Thu, 09 Feb 2012 22:44:24 +0000

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.)

UltraWebGrid TopItemSpacing=”Auto”: Solution for FireFox

Yuriy — Thu, 12 Jan 2012 21:46:40 +0000

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):

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.

ClientScript.RegisterStartupScript: script injected, but not executed

Yuriy — Tue, 08 Nov 2011 05:04:38 +0000

This was one weird mystery. I have used ASP.NET’s method ClientScript.RegisterStartupScript countless times to inject client-side JavaScript into page’s markup from the server-side code and it always worked perfectly. This time I created a very basic page from scratch:



    My Page

The problem was – it didn’d do squat – the script did not execute. Why?

Million dollar question. Googling didn’t help, there were a lot of solutions for scenarios wherw the script didn’t get injected, but once it was on the page – it always executed. I replaced the custom function call with a simple alert, thinking something might be the matter with the way scripts are loaded – it didn’t fire.

Finally looking back at HTML markup I noticed something different about the scripts are loaded. The tags are self-closing. But this shouldn’t be a problem, right? If element contains just attributes and no data – this shouldn’t cause any issues? Well, apparently in case of SCRIPT tag – WRONG! It didn’t throw any errors, simple did not execute the scripts (even the ones that has nothing to do with loaded JS).

When I changed script loading part to:

function created by ClientScript.RegisterStartupScript executed.

Moral: Always close your script tag with closing tag.

How to load IFRAMEs in order according to priority

Yuriy — Wed, 02 Nov 2011 21:14:32 +0000

Let’s say you have a Web page that displays “widgets” a small islands of information. And internally those widgets are IFRAME elements, whose source is loaded dynamically from the same server at runtime in client side JavaScript. So, you have a code similar to this:

var aIframes = document.getElementsByTagName('IFRAME');
for (var I = 0; I < aIframes.length; I++) {
    aIframes[I].src = aIframes[I].getAttribute('originalURL')
}

This (oversimplified) code assumes that URL for IFRAME source already stored as a custom attribute ‘originalURL’ of IFRAME element (for example placed there by server-side code), but it can equally come from other sources. This approach is usually taken so IFRAMES can initially display a static page with “Please wait. Loading…” animation meanwhile dynamically loading real data – creates a better user experience.

The code loops thru all IFRAMEs setting their SRC attribute, displaying content, so you would see something like

It’s all well and good, but there’s a small problem. SRC of IFRAMEs is assigned in order of their appearance on the page and if URLs are pointing to the same server and one of the earlier IFRAMEs takes a long time to load – it will block the rest of the IFRAMEs from loading.

This is happening because browser can only have a limited number of open connections to the server, it’s especially apparent in Internet Explorer which only has 2. But even the rest of them can quickly run out of open connections keeping the user waiting – which is especially frustrating if you know that some of those IFRAMEs only take fraction of a second to load – still they will have to wait till early ones finish loading.

The solution is not to assign URL right away but add all the IFRAME elements to an array, sort that array and assign URL to IFRAMEs while looping thru sorted array. Allow me to elaborate.

Let’s assume that every IFRAME element has another custom attribute called ‘priority’, which, again, can be assigned by many means – including server-side code. ‘priority’ attribute is a number (1,2,3…) indicating IFRAME load priority (the lower the number the higher the priority). Let’s modify the code above a little:

var aIframes = document.getElementsByTagName('IFRAME');
var aIframeArray = new Array();

for (var I = 0; I < aIframes.length; I++) {
    aIframeArray.push(aIframes[I])
}

aIframeArray.sort(function (a, b)
                   { return a.getAttribute('priority') - b.getAttribute('priority') })

for (var I = 0; I < aIframeArray.length; I++) {
    aIframeArray[I].src = aIframeArray[I].getAttribute('originalURL')
}

Line 02 creates a new array to hold IFRAME elements.
Lines 04-06 loop thru IFRAME elements, adding them to that array.
Lines 08-09 sort that array. Note how you can sort array of objects by object property by passing a custom comparasion function (Thanks Larry Gomez for this neat trick!).
Lines 11-13 loop thru sorted-by-priority array, giving SRC proprty of IFRAME elements their URL.

Final result: IFRAMEs with higher priority (lower ‘priority’ attribute number) get their SRC set first thus loading faster leaving slower IFRAMES to load last.

WebHierarchicalDataGrid: Extra Row after Update

Yuriy — Wed, 12 Oct 2011 20:40:47 +0000

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.

WebDataMenu: Incorrect displaying after upgrade

Yuriy — Mon, 10 Oct 2011 13:55:05 +0000

This is the second post in saga titled Upgrading Infragistics Controls to a new version. Chances are that your WebDataMenu looks weird after upgrade to 2010+ version. In my case the menu had following options/features:

It was a context popup menu, called on right mouse click
Text of menu items was assigned dynamically at runtime in JavaScript Client code

After upgrading NetAdvantage from version 2009.2 to 2011.1 strange things started to happen. Text of the menu items was cut short, submenues appeared at wrong places it looked like something from a Dali’s painting.
Numerous experiments later I found out that the problem was with EnableScrolling property of the menu control. Setting it to False returned menu to realm of realism.

WebHierarchicalDataGrid: JavaScript errors after upgrade

Yuriy — Wed, 05 Oct 2011 21:26:07 +0000

Upgrading 3rd party library to a new version is bound to have problems and Infragistics is no exception. In my case I was upgrading NetAdvantage for ASP.NET from version 2009.2 to to 20011.1 and right away WebHierarchicalDataGrid started to crash client-side. If ScriptManager was in debug mode I’d get error:

Microsoft JScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined.Parameter name: type

With ScriptManager in Release mode it’d be:

Microsoft JScript runtime error: Object expected

But always in Sys.Component.Create – it looked like grid’s client-side scripts weren’t loading at all. After A LOT of digging I found out that the culprit was grid’s server-side Bands.Clear() method. When called, it caused client-side WHDG JavaScript not to load. When that method was commented – JavaScript errors disappeared. So until Infragistics comes out with a bug fix – if you experience similar problem, try to avoid Bands.Clear() method.

IE8: Display borders around empty cells

Yuriy — Mon, 26 Sep 2011 15:52:34 +0000

By default Internet Explorer 8 does not display blank cells in HTML tables (technically it does’t show borders around such cells) and visuals aren’t pretty. The solution below may not work for everybody, but I’d imagine will help in many cases:

Just set the table style to

border-collapse:collapse

Presto-chango! Missing borders now appear.

Code Corner » HTML/CSS

Style Rounded Corner images of UltraWebTab thru external stylesheet

Related Posts:

Style IFRAME scrollbars in IE

Related Posts:

Correctly apply external styles to UltraWebGrid

Related Posts:

UltraWebGrid TopItemSpacing=”Auto”: Solution for FireFox

Related Posts:

ClientScript.RegisterStartupScript: script injected, but not executed

Related Posts:

How to load IFRAMEs in order according to priority

Related Posts:

WebHierarchicalDataGrid: Extra Row after Update

Related Posts:

WebDataMenu: Incorrect displaying after upgrade

Related Posts:

WebHierarchicalDataGrid: JavaScript errors after upgrade

Related Posts:

IE8: Display borders around empty cells

Related Posts: