Tag Archives: workaround

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.

TSQL: work with yyyy-mm-dd date format in British English

If you work with SQL Server that is set to use UK (British English) format you may experience a strange behavior: when you try to assign a date that is in ‘yyyy-mm-dd’ format to a DateTime variable or insert it into a DateTime column – an error is thrown

The conversion of a varchar data type to a datetime data type resulted in an out-of-range value

or similar. Or even worse – no error is thrown, but an incorrect date is inserted. This is happening because even though ‘yyyy-mm-dd’ looks like universal ISO format, a UK SQL Server interprets it as ‘yyyy-dd-mm’. So a date like ‘2011-07-21’ will throw the above error, but the date ‘2011-08-01’ will be stored as ‘January 8, 2001’ instead of expected ‘August 1, 2011’.

To alleviate this problem simple add a time part to your date – make the format ‘yyyy-mm-ddThh:mm:ss’. So the dates above will become ‘2011-07-21T00:00:00’ and ‘2011-08-01T00:00:00’ and be interpreted correctly by SQL Sercer

UltraWebGrid strange behavior in IE8 when IE=EmulateIE7

If you’re using Infragistics UltraWebGrid in Internet Explorer 8 you may experience strange visual (and other) issues if you have page compatibility set to emulate IE7, e.g.

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

Issues can range from column moving not working to weird distortion in grouped mode. According to Infragistics this combination is not supported as “unstable”, but you can still make it work.

Infragistics keeps internal flags of what browser is currently in use: ig_shared.IsIE7, ig_shared.IsIE8, etc. The trick is to detect IE8 and make it fall back to IE7:

if (ig_shared.IsIE8) {
    ig_shared.IsIE8 = false;
    ig_shared.IsIE7Compat = true;
}

Place this code on top of your page JavaScript code and when it sees IE8 it will tell grid to use IE7 rendering. This is most definitely a hack, but it works.

UltraWebGrid: “Input string was not in a correct format” error while setting width of a column

Infragistics UltraWebGrid allows you to set width of a column in client-side JavaScript, you can do it using code similar to this:

igtbl_getGridById('xmyGrid').Bands[0].Columns[3].setWidth(someValue)

But, while executing this code on the client, you may get a nasty surprise by getting following error from the server:

Input string was not in a correct format.
Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.FormatException: Input string was not in a correct format.

Source Error:

An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Stack Trace:

[FormatException: Input string was not in a correct format.]
System.Number.StringToNumber(String str, NumberStyles options, NumberBuffer& number, NumberFormatInfo info, Boolean parseDecimal) +10163939
System.Number.ParseInt32(String s, NumberStyles style, NumberFormatInfo info) +207
Infragistics.WebUI.UltraWebGrid.StateChangeProcessor.ProcessChanges() +6230
Infragistics.WebUI.UltraWebGrid.UltraWebGrid.ProcessChanges(StateChanges stateChanges, Boolean fireEvents) +701
Infragistics.WebUI.UltraWebGrid.UltraWebGrid.LoadPostData(String postDataKey, NameValueCollection values) +7580
System.Web.UI.Page.ProcessPostData(NameValueCollection postData, Boolean fBeforeLoad) +945
System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint) +2071

Now, you do know that your someValue is definitely a number, why this error then? Let alone – why client-size resize causes a server call? But I will leave this to Infragistics. Actual cause of the error – number not being Integer. If you change the code from above to

igtbl_getGridById('xmyGrid').Bands[0].Columns[3].setWidth(Math.ceil(someValue))

it will execute without any errors. Go figure.

Correctly compare file date against TSQL stored date

If you need to track whether a particular file has changed or not (and I am not talking about FileSystemWatcher, often it’s an overkill), one way is to compare file’s LastWriteTime against stored value. But if you store the date value in SQL Server you may be in for a surprise – even if file date hasn’t changed – dates will not compare as equal. Consider following example:

'Reading current system file date/time
Dim dCurrentFileDate As DateTime = File.GetLastWriteTime(sFilePath)

'Storing file date/time in SQL Server table
CMyDatabaseClass.SaveDate(sFilePath, dCurrentFileDate)

'Immediately reading date/time value back
Dim dStoredFileDate As DateTime = CMyDatabaseClass.LoadDate(sFilePath)

'Comparing stored value against current
If dCurrentFileDate = dStoredFileDate
'
End If

The If statement on Line 11 will produce False results even if the dates seem identical. The reason – millisecond part of the datetime. SQL Server and .NET disagree on how to treat it so the best thing to do is to strip milliseconds from system file date/time before storing it or comparing against stored value.

Joe from StackOverflow.com offers a very elegant solution. That solution is in C# and here it is converted to VB.NET. To apply it to the example above simple add after the second line:

dCurrentFileDate = dCurrentFileDate.Value.AddTicks(-(dCurrentFileDate.Value.Ticks Mod TimeSpan.TicksPerSecond))

This will remove milliseconds from the date/time value and next time if you compare to the same value – values will be really equal.

WHDG: Correctly detect Async Callback

When using Infragistics WebHierarchicalDataGrid often there’s a need to detect grid’s async callback (for example we need to rebind the grid if it performs AJAX paging or expanding children). For flat WebDataGrid it was suggested to use grid’s RunBot.IsCallback property:

If xMyGrid.RunBot.IsCallback Then
   'Perform some operations for grid's async callback
End If

Now, WHDG also has RunBot.IsCallback property, but the above code always returns False for it. I know I’ve seen this before – a situation where a property doesn’t work on WHDG control itself, but works on the WHDG’s GridView object. Sensing a pattern I modified the code above for WHDG:

If xMyGrid.GridView.RunBot.IsCallback Then
   'Perform some operations for grid's async callback
End If

And bingo! Now Async callback is detected correctly.

UPDATE 4/27/2012: Turned out the above method doesn’t always work either. (To Infragistics stuff, if anybody happened to read this: The scenario above happens with WHDG in manual load on demand mode when grid’s RowIslandPopulating event is handled and ContainerGrid is created on demand and bound to data retrieved from the Database). The above method works when rows of the top level expanded (xMyGrid.GridView.RunBot.IsCallback is True) but fails if child rows are expanded to show grandchildren (in that case xMyGrid.GridView.RunBot.IsCallback is False).

We need another more reliable way to detect callback, no matter what caused it. And we can do that by checking HTTP Request. If it’s an Infragistics callback it will have a Form parameter with key like "__IGCallback************". So the code to always detect the callback correctly is:

If Request.Form.AllKeys.Any(Function(S As String) S IsNot Nothing AndAlso S.StartsWith("__IGCallback")) Then
   'Perform some operations for grid's async callback
End If

WebDataTree returns multiple selected nodes in single-select mode

This could be a bug in Infragistics WebDataTree control or it could be a very specific scenario (maybe it’s even by design, I don’t know) but here’s a weird behavior that I encountered. Using following code in WebDataTree’s event handler (oh and by the way, tree control is in a single-select mode):

Protected Sub xMyTree_SelectionChanged(ByVal sender As Object, ByVal e As NavigationControls.DataTreeSelectionEventArgs) Handles MyTree.SelectionChanged
   if e.NewSelectedNodes(0).Text = "Some Value"
      'do something with newly selected tree node
   end if
End Sub

I intended to use newly selected node to perform some operations. To my surprise e.NewSelectedNodes(0) referred to previously selected node (despite the name of the property) and newly selected value were located in e.NewSelectedNodes(1)! So the quick workaround was to use slightly modified code:

Protected Sub xMyTree_SelectionChanged(ByVal sender As Object, ByVal e As NavigationControls.DataTreeSelectionEventArgs) Handles MyTree.SelectionChanged
   if e.NewSelectedNodes(e.NewSelectedNodes.Count-1).Text = "Some Value"
      'do something with newly selected tree node
   end if
End Sub

This way it will always get latest selected node and the solution is universal. If the bug described above occurs – code will grab e.NewSelectedNodes(1) (because Count = 2). If the tree behaves as expected – code will get grab e.NewSelectedNodes(0) (because Count = 1)

@@ROWCOUNT is affected by IF statement

Let’s say you’re writing T-SQL code and need to make sure that your query returns one and only row. If no records returned – an error message needs to be shown. If more than one record is returned – another error message needs to be show. The code goes something like this:

-- ... query runs here and returns row

IF @@ROWCOUNT = 0 RAISERROR('No records found', 18, 1)
ELSE IF @@ROWCOUNT > 0 RAISERROR('More than one record found', 18, 1)

-- ... continue when exactly one row is returned

Now if your query returns 3 records you’d expect it to trip the second IF statement and raise error with correct message. Unfortunately this doesn’t happen. The reason being – the first IF statement resets @@ROWCOUNT to 0. So, to avoid this we need to preserve the @@ROWCOUNT value in a local variable:

DECLARE @iRowCount int

-- ... query runs here and returns row

SET @iRowCount = @@ROWCOUNT

IF @iRowCount = 0 RAISERROR('No records found', 18, 1)
ELSE IF @iRowCount > 0 RAISERROR('More than one record found', 18, 1)

-- ... continue when exactly one row is returned

This way count of rows returned by the query is saved and is not affected by any following statements.

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 →

UltraWebMenu: When background doesn’t change on hover in IE9

If you tried to use Infragistics classic UltraWebMenu control in IE9 you may experience issue (even in the latest version, 11.2 at the time of this post) whereby menu items don’t change background on mouse hover even though background is specified in menu’s HoverItemStyle property.

The solution is specify BorderStyle in HoverItemStyle. It can be any value besides NotSet, but the actual attribute has to be there. So for example if you want your hover style to have no borders and your original style looks like:

<HoverItemStyle
   ForeColor="White" 
   BackColor="#81C0E9"
   Height="18px"
   BorderWidth="0px"> 
</HoverItemStyle>

change it to

<HoverItemStyle
   ForeColor="White"
   BackColor="#81C0E9"
   Height="18px"
   BorderWidth="0px" 
   BorderStyle="None">
</HoverItemStyle>

I don’t know why border style affects showing of the background, but there you have it. Adding BorderStyle to HoverItemStyle will enable displaying of background color on hover.