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:
Let’s say we need to show a threshold for the value of 7. Here’s how. Continue reading →
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:
.nowrapHTML {white-space:nowrap}
.nowrapPLAIN {white-space:pre}
In following grid first column was being set with HtmlEncode = True, second with HtmlEncode = False, yet both columns were rendered as HTML.
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 →
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:
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 →
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 →
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 →
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:
<base target="_self"></base>
inside of your page header in HTML source, e.g.:
<head>
<title>My Page</title>
<base target="_self"></base>
</head>
modal dialog will be able to successfully postback to itself.