• Home
  • About
  • Resume

WHDG: Position “Group by” area anywhere on the page

By , 09/28/2012 9:17 PM

WebHierarchicalDataGrid grouping feature offers handy “Group By” area – a place where columns can be dragged to for grouping. It has one limitation though: by default it can be positioned only on top or the bottom of the grid. But what if you want to place it elsewhere? For example you have a dedicated navigation part of your page where you want to display grouped columns.

DOM to the rescue. As I mentioned in my previous post Group By area is a DIV that can be located by its CSS class name (either assigned by you or, barring that, class of a StyleSet used by the grid control). After the area is located, it can be moved to a location of your choice, for example another DIV by standard appendChild DOM method:

function positionGroupByArea() {
   var aGroupAreas = document.getElementsByClassName('ighg_Office2007BlueGroupArea'); 
   var oDivActionControls = $get('xdivNavigation'); 

   if (aGroupAreas.length > 1) {
   } else {

Lines 2-3 Locate Group By area and target DIV respectfully. Note Line 5: like nature abhors a vacuum – WHDG abhors Group By area missing from its default place, if it is missing – grid will try to recreate it. If this happens you will have 2 Group By areas. If code on Line 5 detects this situation it removes old area and re-adds new one. Otherwise it simple moves original area.

You will have to call this code on initial grid load and after every grid operation (sorting, paging etc.) since grid will try to recreate Group By at the old place. Also, if the grid feels jumpy during this move – hide Group By area initially via it’s CSS class by setting display:none and make it visible again after the move.

Overall effect is quite seamless

WHDG: Give Grouped columns correct captions

By , 09/28/2012 4:42 PM

If you work with Infragistics WebHierarchicalDataGrid and try to use its grouping features, you may notice that it uses grid column keys instead of column header’s captions to name items in “Group By” area.

To work around this limitation, let’s take a look at how Grouped By area is rendered:

Group By Area in WebHierarchicalDataGrid

Basically a container DIV holds a bunch of SPANs representing grouped columns. Both DIV and SPAN can be located by their CSS class (your own, if it’s assigned or Infragistics StyleSet class name, used by the grid control). Knowing the location of the SPANs we can loop thru them altering their text:

function renameColumnsInGroupByArea() {

   //locating GroupBy area DIV 
   var oGroupArea = document.getElementsByClassName('ighg_IGGroupArea')[0]; 

   //locating GroupedColumn SPANs
   var aGroupedColumns = oGroupArea.getElementsByClassName('ighg_IGGroupedColumn');

   // looping thru SPANS with grouped columns, replacing their text
   for (var I = 0; I < aGroupedColumns.length; I++) {
      aGroupedColumns[I].firstChild.nodeValue = // put your new value here;

One way of using this function is generate a JavaScript associative array (ColumnData['ColumnKey'] = 'Column Caption') in ASP.NET server side code. Armed with such array Line 11 in the previous code could be simple

aGroupedColumns[I].firstChild.nodeValue = ColumnData[aGroupedColumns[I].firstChild.nodeValue]

Sync NEW files from external folders to Skydrive

By , 09/11/2012 2:40 PM

If you use Microsoft Skydrive cloud storage, you know it has a neat desktop client that automatically syncs content of a desktop folder to the cloud. It uses its own dedicated folder, but if you have existing folders that accumulated photos and music for decades – there’s an easy way to add them as well.

The problem with this approach – Skydrive client will happily sync existing files, but will pass on any new ones added after initial sync. This happens because it cannot detect changes in symlinked folders. If you regularly shutdown/startup your machine – it’s not a problem, when client is restarted it rescans entire content for the changes – and follows symlinks as well.

But if your machine is “always on” e.g. a server there is an easy way as well. Just create an empty folder inside of a “real” Skydrive folder and delete it right away. This, similar to restart, will force Skydrive client to rescan entire content and sync with the cloud. Folder creation can be automated (a batch run on schedule for example) so you will always be in sync.

Run Adobe Flash Player on Android 4.1 Jelly Bean (and above)

By , 09/11/2012 2:18 PM

It is a well known fact that Adobe is willingly shooting itself in the foot stopped supporting flash on Android devices. If you run Android 4.1 (Jelly Bean) it is not even available on the Google Play. Oh and speaking of Google – unlike its desktop counterpart Chrome for Android doesn’t support Flash either.

So.. is this the end of the era?

Fear not. Just download and install this handy Flash APK and install it on your device. Voila! Your mighty tablet/phone now has Flash. It still won’t work in Google Chrome, but other browser (Stock, Dolphin) will happily use it.

Panorama Theme by Themocracy