Category Archives: Infragistics

Solution for WebHierarchicalDataGrid’s “Async request failed” error

This is a solution for specific (and maybe somewhat obscure, but it helped me, so perhaps it will be helpful to someone else) scenario for Infragistics’ WebHierarchicalDataGrid error “Async request failed“.

It could be accompanied by inner errors

Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request

or more generic

Object Reference not set

In this particular scenario WHDG uses manual LoadOnDemand for to populate children (i.e. RowIslandPopulating event is used) and parent grid is sorted by one or more columns. Error is happening when attempting to expand second child or a grandchild. Continue reading →

WebDataMenu: Use your own hover

Infragistics WebDataMenu comes with variety of styles and lets you specify your own. At a very basic it allows you to specify styles for normal menu items and hovered menu items:

<ig:WebDataMenu ID="xwdmMyMenu" runat="server">
   <ItemSettings CssClass="MenuItem" HoverCssClass="MenuItemHover"/>
</ig:WebDataMenu>

This markup can correspond to CSS classes, for example:

.MenuItem {
   background-image:none;
   background-color:white;
}

.MenuItemHover{
   background-color:rgb(213,224,198);
}

This works fine in most cases, but since the hover/unhover is done via JavaScript sometimes there’re issues. Continue reading →

Infragistics WebTab: Simulating SelectedIndexChanging event when programmaticaly changing tabs via set_selectedIndex

Infragistics WebTab control is very versatile and offers rich server- and client-side model. Among client-side events are

  • SelectedIndexChanged – fires after user has changed the tab to provide ways to interact with newly selected tab
  • SelectedIndexChanging – fires before user has changed the tab to provide ways to interact with currently selected tab and to give user a chance to cancel change.

Both work fine if user manually changes tabs by clicking on tab headers, but call to client-side set_selectedIndex() function (which changes tabs programmaticaly) only fires SelectedIndexChanged, skipping SelectedIndexChanging altogether. But there’s a way to make it work.
Continue reading →

Solution: eventArgs.get_type() incorrectly detects header of WebDataGrid in FireFox as cell

If you use CSOM of Infragistics WebDataGrid you may encounter a bug in client-side event handlers. Let’s say some action is needed on double clicking of a grid cell. The handler looks something like this:

function xMyGrid_DoubleClick(sender, eventArgs) {
   if (eventArgs.get_type() == "cell") {
      //perform action
   }
}

IF condition on line 2 makes sure that action is executed only if actual grid cell is double clicked. If you double click column header, eventArgs.get_type() would return "header" and the action would be skipped.

But not in FireFox. In that browser eventArgs.get_type() returns "cell" even when header is clicked. So an additional condition is needed. Grid column header is rendered as a TH HTML element and this is what we can check:

function xMyGrid_DoubleClick(sender, eventArgs) {
   if (eventArgs.get_type() == "cell" &&  eventArgs.get_item().get_element().tagName != 'TH') {
      //perform action
   }
}

This solution works universally in all browsers.

Solution for Infragistics WebDataGrid filtering error “Length cannot be less than zero”

Infragistics WebDataGrid/WHDG controls for ASP.NET offer nice filtering features. Out of the box you just have to enable the behavior and badabingo:

WebDataGrid filtering

There is one glitch though in the way text filtering is implemented: If you enter an empty string as a filter value – an error is thrown:

Async refresh failed. Length cannot be less than zero

Apparently internal grid code cannot handle empty strings (as of version 12.2) so we have to take matter in our own hands.
Continue reading →

Infragistics WebDataMenu last item disappears

While using Infragistics WebDataMenu control from their NetAdvantage for ASP.NET Suite (version 2012.2, current as of this post) I noticed that last menu item in horizontal menu disappears. To me this only happened in Firefox.

Disappearing Act

This post suggested to set EnableScrolling menu property to False as a solution. Which is fine and well, but did not work for me since I need my menu to scroll (it has limited width available and menu items are added programmatically in code-behind so total items width can be wider than width available for the menu).

Continue reading →

Infragistics WebDataGrid: Hidden columns become visible after AJAX postback

A recent update to .NetAdvantage for ASP.NET v12.2 introduced a weird bug – hidden columns of WebDataGrid and WHDG become visible after postback. Service release 12.2.20122.2031 fixed that issue – but only for full postback. Under some circumstances if grid performs an AJAX call (sorting, paging etc.) hidden columns become visible again. This does not happen in IE, but other browsers, such as Chrome and FireFox do exhibit the issue.

This is happening because hidden columns lose “display:none” property in their style. If this happens to you – you have to take matter in your own hands. Continue reading →

Infragistics WebDataMenu: Enable client-side resize with scrolling

Infragistics WebDataMenu control for ASP.NET has a neat feature: if items for horizontal menu don’t fit in allocated width – it automatically adds scroll buttons:

Scrolling in WebDataMenu

Unfortunately this works only if you set menu width in ASPX markup or server-side code. But what if menu is built dynamically and you don’t know in advance how many items there will be. Or if user resizes browser window and available width changes?

We need to be able to set menu width in client-side JavaScript code. Also we need to check whether all items fit into menu width and if not – enable scroll buttons – on demand. The code below does just that. Continue reading →

WebDataTree: Use custom images for Expand/Collapse

Infragistics WebDataTree control offers variety of styles via supplied StyleSets and each StyleSet has its own Expand/Collapse images for tree branches. Unfortunately the control doesn’t offer built-in way to use your own expand/collapse images, to achieve that you need to replace respective images in the StyleSet currently used by the tree.

But if you’re reluctant to go this way for whatever reason (you’re using your own style or don’t want to change canonical Infragistics style) there’s another way – purely client-side JavaScript.

Note: The method below assumes that all the levels the tree are fully rendered on the client. If you’re employing load-on-demand, the method will require some adjustments.

Place the code below in Tree client-side Init event:

function xwdTree_Init(sender, eventArgs) {
   /// <summary>
   /// Fires when tree is initialized
   /// </summary>

   //{******* Replacing Expand/Collapse images in the tree with custom ones

   // Looping thru images in the tree itself
   var aTreeImages = sender.get_element().getElementsByTagName('img');
   
   for (I = 0; I < aTreeImages.length; I++) {
      if (aTreeImages[I].src.indexOf('Plus') != -1) aTreeImages[I].src = 'images/my_expand.png'
      else if (aTreeImages[I].src.indexOf('Minus') != -1) aTreeImages[I].src = 'images/my_collapse.png'
   }

   // Looping thru images in hidden div used for replacement after click
   var aTreeActionImages = $get(sender.get_id() + '_Images').getElementsByTagName('img');
   
   for (I = 0; I < aTreeActionImages.length; I++) {
      if (aTreeActionImages[I].src.indexOf('Plus') != -1) aTreeActionImages[I].src = 'images/my_expand.png'
      else if (aTreeActionImages[I].src.indexOf('Minus') != -1) aTreeActionImages[I].src = 'images/my_collapse.png'
   }

   //******* Replacing Expand/Collapse images in the tree with custom ones }
        
}

Take a look at Lines 8-14. This code locates Tree control and its respective DOM element. Then it loops thru all the images inside. If it’s an “expand” image (has the word “plus” in its name) – we replace it with our custom expand image. If a tree node already rendered expanded – the code will locate “collapse” image (which has the word “minus” in its name).

This is all good and well for currently rendered nodes. But when you start expand and collapse nodes – images are replaced dynamically (“expand” becomes “collapse” when node is expanded and vice-versa) by Infragistics code. If you only execute code in Lines 8-14 and then expand or collapse tree nodes – your images will get replaced with Infragistics original ones from their secret repository.

Fortunately that secret repository is a plain hidden DIV with the ID “yourTreeID_Images”. Take a look at Lines 16-22. This code locates the DIV that holds replacement images and replaces them with our own similarly to Lines 8-14. After it ran, when Infragistics code needs to grab an image to replace expand/collapse one – it will get yours.

As a result Tree is rendered (both statically and dynamically) with your own beautiful images.

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

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) {
      oDivActionControls.removeChild(aGroupAreas[0]);
      oDivActionControls.appendChild(aGroupAreas[1])
   } else {
      oDivActionControls.appendChild(aGroupAreas[0])
   }
}

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