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. If your look in browser at rendered HTML of this tab it looks like this (I’ve removed some attributes to simplify view):

<TD class=xuwtHome_2>My Test Tab</TD>
<TD width="5" class=xuwtHome_2R>&nbsp;</TD>

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:

<SelectedTabStyle CssClass="TabStyleSelected"/>

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:

<igtab:Tab>
   <SelectedStyle CssClass="TabStyleSelected" />
</igtab:Tab>

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.

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

Let’s say we need to show a threshold for the value of 7. Here’s how.

MSChart API supports several Annotation objects, we’re interested in HorizontalLineAnnotation. Take a look at the following code:

Dim oHla As New HorizontalLineAnnotation()

With oHla

    .AxisX = xmsChart.ChartAreas(0).AxisX
    .AxisY = xmsChart.ChartAreas(0).AxisY
    .ClipToChartArea = xmsChart.ChartAreas(0).Name
    .IsInfinitive = True

    .AnchorY = 7
    .LineWidth = 3
    .LineColor = Drawing.Color.Red
    .LineDashStyle = ChartDashStyle.Dot

End With

xmsChart.Annotations.Add(oHla)

• Line 1 creates HorizontalLineAnnotation object
• Lines 5, 6, 7 assocciate the annotation with chart area
• Line 8 makes sure that annotation line stretches thru entire chart
• Line 10 assigns our threshold value
• Lines 11, 12, 13 set the style of the annotation line
• Line 17 adds annotation we created to the chart

The result:

It works fine, but there’s one drawback: if you scroll your grid horizontally and then select a row – grid’s scroll position snaps back to the leftmost position. Infragistics says that it’s a browser bug and we need to talk to browser vendor about it. Wanting to solve the problem in this century I looked for alternatives and this is what I found.

To avoid the shift in scroll position we need to cancel the scroll event. Doing it directly (adding handler to “onscroll” event and canceling it there) is impossible since event is uncancelable (is it even a word?). Instead we can catch grid’s “RowSelectionChanging” event and cancel event bubble there:

function xMyGrid_RowSelectionChanging(sender, eventArgs) {
   event.cancelBubble = true
}

of course a better, more compatible approach would be:

function xMyGrid_RowSelectionChanging(sender, eventArgs) {
   eventArgs.getBrowserEvent().stopPropagation();
}

but unfortunately “eventArgs.getBrowserEvent()” is null in this case and we have to resort to first approach. This method still allows rows to be selected but cancels scroll to the left after selection.

One small drawback of v1.0.1 of this plugin (current as of this writing) – if permalink URL of your post is very long (pretty ones tend to be) – it gets cut off during HelloTXT notification, since status update has to be within 140 characters length. But there’s an easy solution. Open PHP source of the plugin in any text editor and in function hellotxt_notification locate line:

$link = get_permalink($post->ID);

This is the line that gets permalink of your post. To replace it with shortened URL we can call API of TinyURL service:

$link = file_get_contents("http://tinyurl.com/api-create.php?url=".get_permalink($post->ID));

and Voila! short links are being sent to HelloTXT

Sub DownloadFile(ByVal i_sServerPath As String, ByVal i_sDisplayName As String)
   Dim oFile As FileInfo = New FileInfo(i_sServerPath)

   With Response
      .Clear()
      .ClearHeaders()
      .AddHeader("Content-Length", oFile.Length.ToString())
      .ContentType = ReturnContentType(oFile.Extension.ToLower())
      .AddHeader("Content-Disposition", "attachment; filename=" & i_sDisplayName)
      .TransmitFile(oFile.FullName)
      .End()
   End With

End Sub

The code accepts 2 parameters: i_sServerPath – full path to the file on the server and i_sDisplayName – file name that will be displayed to the user in the “Save As” dialog. Code also populates response headers based on file information. I use this handy function to populate ContentType based on file extention:

Function ReturnContentType(ByVal i_sfileExtension As String) As String
   Select Case i_sfileExtension
      Case ".htm", ".html", ".log" : Return "text/HTML"
      Case ".txt" : Return "text/plain"
      Case ".doc" : Return "application/ms-word"
      Case ".tiff", ".tif" : Return "image/tiff"
      Case ".asf" : Return "video/x-ms-asf"
      Case ".avi" : Return "video/avi"
      Case ".zip" : Return "application/zip"
      Case ".xls", ".csv" : Return "application/vnd.ms-excel"
      Case ".gif" : Return "image/gif"
      Case ".jpg", "jpeg" : Return "image/jpeg"
      Case ".bmp" : Return "image/bmp"
      Case ".wav" : Return "audio/wav"
      Case ".mp3" : Return "audio/mpeg3"
      Case ".mpg", "mpeg" : Return "video/mpeg"
      Case ".rtf" : Return "application/rtf"
      Case ".asp" : Return "text/asp"
      Case ".pdf" : Return "application/pdf"
      Case ".fdf" : Return "application/vnd.fdf"
      Case ".ppt" : Return "application/mspowerpoint"
      Case ".dwg" : Return "image/vnd.dwg"
      Case ".msg" : Return "application/msoutlook"
      Case ".xml", ".sdxl" : Return "application/xml"
      Case ".xdp" : Return "application/vnd.adobe.xdp+xml"
      Case Else : Return "application/octet-stream"
   End Select
End Function

It’s all good, but what if you need to delete the file from the server immediately after user downloaded it? For example it was a report, generated by user’s request and saved into temporary file, and that file needs to be deleted after user downloads it.

We have to user Response.End() after Response.TransmitFile() otherwise download won’t work. But any server-side command after Response.End() doesn’t work either. The solution is to flush data, delete file and then call Response.End(). Here is the modified version of DownloadFile:

Sub DownloadFile(ByVal i_sServerPath As String, ByVal i_sDisplayName As String)
   Dim oFile As FileInfo = New FileInfo(i_sServerPath)

   With Response
      .Clear()
      .ClearHeaders()
      .AddHeader("Content-Length", oFile.Length.ToString())
      .ContentType = ReturnContentType(oFile.Extension.ToLower())
      .AddHeader("Content-Disposition", "attachment; filename=" & i_sDisplayName)
      .TransmitFile(oFile.FullName)
      .Flush()
      oFile.Delete()
      .End()
   End With

End Sub

Take a look at Lines 11 and 12 – the code flushes the data and then deletes the file. If you call this function in a server-side code (e.g. as a response to a button click) user gets a prompt to download file and then, after file is downloaded – it is deleted from the server.

The solution is specify BorderStyle in HoverItemStyle. It can be any value besides NotSet, but the actual attribute has to be there. So for example if you want your hover style to have no borders and your original style looks like:

<HoverItemStyle
   ForeColor="White"
   BackColor="#81C0E9"
   Height="18px"
   BorderWidth="0px">
</HoverItemStyle>

change it to

<HoverItemStyle
   ForeColor="White"
   BackColor="#81C0E9"
   Height="18px"
   BorderWidth="0px"
   BorderStyle="None">
</HoverItemStyle>

I don’t know why border style affects showing of the background, but there you have it. Adding BorderStyle to HoverItemStyle will enable displaying of background color on hover.

Sorry, got carried away there for a while. But you must agree, a lot of bugs in code makes you think that you are in the Twilight Zone indeed. Anyway. You happily click the grid’s rows, selection changes, AfterSelectChangeHandler is getting executed, life goes on. Until your JavaScript code inside of AfterSelectChangeHandler displays an alert message to the user. After that a new UltraWebGrid feature is born: Row selection change on mouse move – a simple mouse wave over a row selects that row. It’s magic! Not the good kind though.

Traveling through another dimension looking at Infragistics JS library that handles mouse events I found that in igtbl_cellMouseMove function selection occurs if grid’s attribute mouseDown is set to 1. Wild guess – it is used for drag-selection, but this ain’t the case and the attribute shouldn’t be set. So the solution: unset it. At the end of your AfterSelectChangeHandler handler insert:

igtbl_getGridById(gridName).Element.setAttribute('mouseDown', 0);

and enjoy the happy end.

This issue was found in Infragistics NetAdvantage for ASP.NET 2011.1.2097, it probably exists in other versions.

In my case every time user clicks [+] to expand a row, VB.NET code calls an SQL Server Stored procedure to bring in child rows. I grew suspicious and fired up SQL Profiler. What I saw surprised me. Number of calls to the stored procedure increased the deeper in grid’s hierarchy I expanded the children. When I clicked [+] on the root level it resulted in 1 SP call. Clicking [+] on the child to expand grandchild – 2 calls. Expanding grandchild to see grand-grandchild rows – 3 calls, etc.

I went back to the VB.NET code that calls the SP, it’s the handler for RowIslandsPopulating event:

 Protected Sub xmyGrid_RowIslandsPopulating(ByVal sender As Object, _
ByVal e As ContainerRowCancelEventArgs) Handles xmyGrid.RowIslandsPopulating

   e.Cancel = True
   CreateRowIslands(e.Row)

End Sub

Where CreateRowIslands is a VB sub that calls SQL Server Stored procedure to create child grid. Setting a breakpoint here I confirmed my suspicions: RowIslandsPopulating event is called for rows that already have been expanded. E.g. if I expand grand-child to display grand-grand-child rows, the event will fire for root, child and grand-child – 3 times, in turn calling stored procedure 3 times.

How to avoid this? While comparing the multiple calls I realized that rows already expanded had their Expanded property set to True. And while we can prevent RowIslandsPopulating event from firing multiple times, we can at least tell it not to do anything if RowIslands are already populated. So, the very slight change:

 Protected Sub xmyGrid_RowIslandsPopulating(ByVal sender As Object, _
ByVal e As ContainerRowCancelEventArgs) Handles xmyGrid.RowIslandsPopulating

   e.Cancel = True
   If e.Row.Expanded = False CreateRowIslands(e.Row)

End Sub

Solves the issue.