Posts tagged: design

How to add threshold line to MSChart in ASP.NET

By , January 10, 2012 3:35 pm

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:

Chart Without Threshold

Let’s say we need to show a threshold for the value of 7. Here’s how. Continue reading 'How to add threshold line to MSChart in ASP.NET'»

Making HoverCssClass work in WebDataTree

By , March 16, 2011 10:21 am

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:

HoverCssClass properting in Infragistics WebDataTree

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:

WebDataGrid rendered in HTML

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.

If HtmlEncode doesn’t work for WebDataGrid…

By , February 15, 2011 2:01 pm

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.

HtmlEncode doesn't work

Continue reading 'If HtmlEncode doesn’t work for WebDataGrid…'»

Improved Auto-size columns for Infragistics WebHierarchicalDataGrid

By , February 15, 2011 11:04 am

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 'Improved Auto-size columns for Infragistics WebHierarchicalDataGrid'»

Auto-size columns in Infragistics WebDataGrid

By , November 15, 2010 3:52 pm

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:

  1. 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
  2. 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:

    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:

WebDataGrid with autosized columns

But there’s one problem with this approach. Continue reading 'Auto-size columns in Infragistics WebDataGrid'»

WebDataGrid: Custom drag and drop columns when Colum Moving behavior is enabled

By , October 30, 2010 9:16 am

Infragistics Aikido WebDataGrid offers a nice built-in ColumnMoving behavior. When enabled – it allows user to drag columns to change their order:

WebDataGrid with ColumnMoving behavior enabled

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:

WebDataGrid with custom column drag-and-drop
Continue reading 'WebDataGrid: Custom drag and drop columns when Colum Moving behavior is enabled'»

WebHierarchicalDataGrid: Not ready for prime-time

By , October 21, 2010 9:00 am

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'»

Displaying consistent number of links in Infragistics UltraWebGrid Pager

By , April 27, 2010 9:33 pm

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'»

Selectively change cell type in Infragistics UltraWebGrid

By , April 20, 2010 11:28 am

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.

IE Modal Dialog and ASP.NET PostBack solution

By , December 2, 2009 2:08 pm

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.

Panorama Theme by Themocracy

Bitnami