Category Archives: VB.NET

Totally custom filter for UltraWebGrid using LINQ

Last time I described how LINQ can be used to custom filter ADO.NET DataTable. This time I will demonstrate how this technique can replace built-in server-side filtering in Infragistics UltraWebGrid.

By default if server-side filtering is enabled in UltraWebGrid controls, it displays a small “funnel” icon in the column header, if you click this icon – a list of unique values from this column is displayed and selecting a value filters the grid by displaying only rows that have this value.

This default behavior works, sort of – it has many issues. If your grid has paging enabled – only values from the current page will be displayed. If your columns or values has characters that grid doesn’t like (commas, square brackets etc.) an exception will be thrown (this happens because under the hood grid converts your filters into a string that is passed to DataTable’s RowFilter), there’re other issues as well.

Why leave anything to chance when you can provide filtering yourself? Continue reading →

Replace DataTable RowFilter with LINQ

ADO.NET DataTable offers handy RowFilter property (via its DefaultView object), for example to filter by some string value and display filtered data in a grid a code like this is used:

odtMyData.DefaultView.RowFilter = "Field = 'value'"
odgDataGrid.DataSource = odtMyData
odgDataGrid.DataBind()

where odtMyData is a DataTable object and odgDataGrid is a Data Grid.

This works well, but what if you need preprocess data in the DataTable prior comparing it to the filter value – what if you need to apply a user-defined function to it? In my case I had a VB function called ProcessTags which stripped HTML tags from a string, so for example strings like this:

<a href="http://someurl">This is a sample text</a>

and this

<span style="color:red">This is a </span><label>sample text</label>

would be converted into the same text

This is a sample text

So I needed to create condition that would return DataTable rows with that have both HTML values by comparing to "This is a sample text".

How? RowFilter‘s syntax is pretty poor and external function cannot be used, so something like

odtMyData.DefaultView.RowFilter = "ProcessTags(Field) = 'This is a sample text'"
odgDataGrid.DataSource = odtMyData
odgDataGrid.DataBind()

would throw an error.
Continue reading →

Speed up UltraWebGrid with direct DOM access

Infragistics UltraWebGrid offers rich client-side programming model, but often it can be extremally slow. As an example consider a simple task: Given a particular Row ID hide the rest of the grid rows, keeping only this row visible.

Using UltraWebGrid’s CSOM (Client Side Object Model) JavaScript code looks like this:

var oGrid = igtbl_getGridById('xMyGrid');    // Get reference to grid object

for (var sRowID in oGrid.Rows) {   // Looping thru all rows in grid's rows collection

   if (sRowID != sSelectedRowID) {   // If current row ID is not given ID
      igtbl_getRowById(sRowID).setHidden(true) // Get reference to row and hide it
   }

}

The code works – it really does. But to loop thru 50 rows in this manner can take 10-15 seconds, not something your user will be happy about when instant action is expected. Continue reading →

Style Rounded Corner images of UltraWebTab thru external stylesheet

Infragistics UltraWebTab control offers multiple styling options, many of them can be set via external CSS classes. As a matter of fact about only element you cannot style via external stylesheet is rounded corner images. Or can you?

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:

Default Selected Image of UltraWebTab

It will give your tab appearance like this

Selected Image of UltraWebTab in action

Let’s examine it closer. Continue reading →

Correctly apply external styles to UltraWebGrid

Classic Infragistics UltraWebGrid allows you to programmaticaly specify CSS styles for its various elements. For example code like this:

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 TopItemSpacing=”Auto”: Solution for FireFox

If you’re still using classic Infragistics Controls and want to make them work in modern browsers, sometimes a little additional work is required. Hopefully this little trick will save you some time.

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.

WebDataGrid: Prevent scrolling on row selection

If you working with Infragistics Aikido controls and your WebDataGrid or WHDG is too long – a common approach to make content scrollable is to place grid control inside of a DIV with fixed dimensions and overflow set to auto:

WHDG scrollable inside of parent DIV

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. Continue reading →

Shorten URL in HelloTXT WordPress plugin

HelloTXT is a very cool service that can post your updates to multiple social networks with a single click. You can feed it data in multiple ways from RSS feeds to Android phones. One such way is a small neat WordPress plugin by Matthew Phillips. Once installed in your blog it will ping HelloTXT whenever you write a new post, notifying all your connected services from Facebook to Twitter.

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