Category Archives: HTML/CSS

UltraWebGrid in OutlookGroupBy Mode: How to display custom aggregates (SUM, AVG, MIN, MAX) in GroupBy row

Last year I described a way to display accurate row count when grid in OutlookGroupBy mode has multiple sub-groups.

That solution requires custom counting function. Fortunately to display aggregates such as SUM, AVG, MIN and MAX UltraWebGrid has a built-in functionality in form of GroupByRowDescriptionMaskDefault property of DisplayLayout. It specifies the string to be displayed in every GroupBy row and can include following substitutes:

  • [caption] – will display GroupBy column header text
  • [value] – will display common to the group cell value
  • [count] – will display row count (does not work correctly with sub-groups)
  • [avg], [sum], [min], [max] – will display the aggregate for the column it’s grouped by
  • [avg:ColumnKey], [sum:ColumnKey], [min:ColumnKey], [max:ColumnKey] – will display the aggregate for any other column, where ColumnKey is the key of the column

With this in mind in just a few simple steps we can make UltraWebGrid to display something like this:


Continue reading →

Internet Explorer renders incorrect HTML if UserAgent string is too long

I’ve encountered a strange problem: 2 identical client machines (WinXP/IE7) were connecting to a website (running on IIS6, ASP.NET 1.1 and employing some Infragistics controls – UltraWebGrid, WebTab, WebMenu). One machine showed a perfectly rendered page, while the other displayed page with missing images and styles and JavaScript functions behaved weirdly. Also, closer examination of HTML source of the page revealed that Infragistics controls rendered very different HTML between 2 machines. Mystery.

The only difference between 2 browsers I found was UserAgent string (For quick way to check your user agent go to http://whatsmyuseragent.com/). Continue reading →

View real HTML source of a page

All browsers support “View page source” feature. But what it displays is source of the page as it was originally rendered by the server. In today’s Web 2.0 world page content can change a thousand times after that. Client-side script, user input, AJAX calls can contribute to page update.

But one line of JavaScript code can show you a real up-to date page source. Type following in your browser address bar:

javascript:void prompt('HTML Source',document.documentElement.innerHTML)

Continue reading →

Resize IFRAME after content has been resized

There’re many articles out there describing how to resize IFRAME to fit its content height to avoid nasty scrollbars. They correctly suggest to catch “onload” event which fires when content has been loaded and set IFRAME’s height to content height. Here is code example (I am using Microsoft AJAX to attach handler for “onload” event, but you can use any method you like):

// oIframe object contains reference to the IFRAME element
// adding event handler that will run when iframe content is loaded
$addHandler(oIframe, "load", iframeContentLoaded);

//this event fires when IFRAME content is loaded
function iframeContentLoaded() {
   this.style.height = this.contentWindow.document.body.offsetHeight+'px'
}

This approach works if content stays static after loading from the server. But in many cases client-side JavaScript kicks to resize content or some user interaction changes content height. Since the page already loaded, simple “onload” doesn’t work.
Continue reading →

Easy rounded corners in pure HTML/CSS

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 →