Often, when drawing a chart, there’s a need to show a threshold – basically a line that indicates whether your values are going above or below it. Take for example this ColumnChart:
Infragistics WebDataTree control offers extensive support of CSS for tree styling. One of the options HoverCssClass is intended to alter tree node appearance when mouse pointer hovers over it:
Unfortunately it doesn’t seem to have any effect on the tree appearance. When I set that class to simple underline node:
.fnTreeHover {text-decoration:underline}
nothing happened. I found the workaround when I noticed that the tree is rendered as an ancor tag <A> inside of <LI> tag:
The solution is to apply style to this combination:
LI A:hover {text-decoration:underline}
Bingo. Now tree nodes are underlying when mouse is over them.
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:
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:
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:
Infragistics Aikido WebDataGrid offers a nice built-in ColumnMoving behavior. When enabled – it allows user to drag columns to change their order:
But what if you want to keep this behavior and add your own custom column drag-and-drop? For example to create your own column grouping, since WebHierarchicalDataGrid doesn’t handle grouping well.
In this post I will describe a simple technique how to both keep behavior shown above and implement custom column drag-and-drop:
I had high hopes for Infragistics Web Hierarchical Data Grid control. Especially in NetAdvantage 10.3 release (current as of this post). Control from Aikido Framework, build on AJAX from ground up, lightweight and fast – I was really excited.
Unfortunately it didn’t turned out exactly as I expected.
First – WHDG cannot bind to a flat ADO.NET data table. Why, you ask, I need to bind flat data to an hierarchical control? Well, it’s the only grid in Aikido that supports OutlookGroupBy mode and I need to be able to group my flat data. But attempt to bind WHDG to DataTable throws an enigmatic InvalidOperationException without giving any clue as why. There’s a workaround – to create a dummy DataSet, add the table to it and bind control to the dataset – but that’s just silly. And that’s not the worst of it. Continue reading 'WebHierarchicalDataGrid: Not ready for prime-time'»
In the previous post I described how using QuickPages property and a bit of creative HTML enhanced pager for Infragistics UltraWebGrid could be created. The only problem with QuickPages – the pager in this mode displays inconsistent number of page links. For example if you set QuickPages property equal 5, the pager will display from 5 page links (when you’re at the beginning or at the end of the grid) to 11 (when you’re in the middle). If you want that number to be consistent, you have to draw the page links yourself. Which turned out is surprisingly easy. Continue reading 'Displaying consistent number of links in Infragistics UltraWebGrid Pager'»
When you design columns for UltraWebGrid, one of the settings available to you is Column Type. For example you can set it to Button, and all cells within the column will render and behave as HTML buttons. Other options available such as Check Box or Hyperlink.
But what if you want some of the column cells to be of a different type? For example some of cells aren’t supposed to be links, but plain text instead? The solution is to set Column Type of those cell thru code. Consider following example:
Protected Sub xmyGrid_InitializeRow(ByVal sender As Object, ByVal e As RowEventArgs) Handles xmyGrid.InitializeRow
If e.Row.Index > 0 Then
e.Row.Cells.FromKey("LINK_CELL).TargetURL = "http://mysite.com?ID=" & e.Row.Cells.FromKey("LINK_ID)
Else
e.Row.Cells.FromKey("OBJ_NAME").Column.Type = ColumnType.NotSet
End If
end sub
Above is a handler for UltraWebGrid’s InitializeRow event. It checks if a row is a first row in the grid and if so – sets its column type to “NotSet” effectively removing “Hyperlink” type set at design time. And even though it references type of entire column – the change applies only to the current cell.
Internet Explorer has a well known proprietary modal dialog window that can be opened using showModalDialog DOM command. While it is not a good idea to use browser-specific functionality, for many it’s a convenient way to display a modal window and return result back to the parent.
Modal Dialog is designed to display data, accept user input and close window, returning the input back to the parent. It is not meant for postbacks, if you try initiating postback in Modal Dialog, all kinds of weird stuff could happen – from opening postback in a new window to JavaScript errors.
But there is an easy fix for that. If you include following line: