Category Archives: Javascript

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.

HTML Table RowSpan: Autofit spanned cells to content

Let’s say you have created an HTML table with following markup:

<table id="xMyTable" style="width:100%;">
   <tr >
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:red; height: 100px;">
         </div>
      </td>
      <td style="vertical-align:top" rowspan="3">
         <div style="border: 2px solid black; background-color:orange; height: 600px">
         </div>
      </td>
   </tr>
   <tr>
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:green; height: 100px">
         </div>
      </td>
   </tr>
   <tr>
      <td style="vertical-align:top">
         <div style="border: 2px solid black; background-color:blue; height: 100px">
         </div>
      </td>
   </tr>
</table>

It’s very basic, one rowspanned cell that holds a content with large height on the right and 3 corresponding cells with content of smaller height on the left. You’d expect it to look like this:

Desired layout of rowspanned HTML table

Unfortunately as is it works only in Google Chrome. In the rest of the browsers, including Interned Explorer and famed FireFox it looks like this:

Current layout of rowspanned HTML table

What happens is browsers automatically spread spanned cells height to evenly fit height of the cell with rowspan. To rectify this situation we need a little help from JavaScript. Continue reading →

Solution for “Operation is not valid due to the current state of the object” error

Typically this happens when AJAX controls are involved (Microsoft’s UpdatePanel or others that utilize AJAX POST requests.) The error may be displayed outright or, if nothing is shown on the UI – logged in the Event Viewer. In any case you will get a message similar to:

0x800a139e – Microsoft JScript runtime error: Sys.WebForms.PageRequestManagerServerErrorException: Operation is not valid due to the current state of the object

Issue happens because Microsoft Security Update MS11-100 limits number of keys in Forms collection during HTTP POST request. To alleviate this problem you need to increase that number.

This can be done in your application Web.Config in the <appSettings> section (create the section directly under <configuration> if it doesn’t exist). Add 2 lines similar to the lines below to the section:

<add key="aspnet:MaxHttpCollectionKeys" value="2000" /">
<add key="aspnet:MaxJsonDeserializerMembers" value="2000" /">

The above example set the limit to 2000 keys. This will lift the limitation and the error should go away.

Regenerate JavaScript function code in ASP.NET partial postback after initial load

ASP.NET has a handy way of generating client side JavaScript code, but using it can be sometimes unpredictable. For example your client-side script needs to call function MyAlert, but the function itself is generated server-side on page load:

ClientScript.RegisterStartupScript(Me.GetType, "JSCode", _
                  "function MyAlert() {alert('This is the FIRST call')}", True)

Function is generated, and in due time, when needed is called by the client and the message “This is the FIRST call” is displayed. All is well.

Now, your page also has an UpdatePanel, and during a partial postback you need to modify that client-side function:

ScriptManager.RegisterStartupScript(Me, Me.GetType, "JSCode", _
                  "function MyAlert() {alert('This is the SECOND call')}", True)

In due time, when again needed by client code, function MyAlert is called and the message (wait for it, you’re in for a surprise) “This is the FIRST call” is displayed again. Originally generated function is called and second generation is ignored. Continue reading →

‘this.Column.Band’ is null or not an object error in UltraWebGrid filtering

When you filter Infragistics UltraWebGrid by clicking Filter icon in the column header – dropdown with filter values appears. Normally if you click elsewhere on the page – dropdown disappears. But sometimes it doesn’t, for example if you click an element that invokes a JavaScript function. Filter dropdown stays open and this could cause problems – when grid refreshes (and possibly other actions are performed) error is thrown:

‘this.Column.Band’ is null or not an object

The solution to this is to close filter dropdown ourselves. Put these lines into your client-side code whenever clicking outside the filter doesn’t close it:

var aGridCols = igtbl_getGridById('xMyGrid').Bands[0].Columns
   for (var I = 0; I < aGridCols.length; I++)
      aGridCols[I].showFilterDropDown(false);

Here we’re looping thru grids column collection (This example assumes grid is in Flat or OutlookGroupBy mode, if your grid is hierarchical, you will have to loop thru band collection as well). For every column we pass False to showFilterDropDown method which (probably showing Infragistics cute sense of humor) hides filter dropdown if it is open. If dropdown is hidden for the column already – nothing happens.

As a result opened filter dropdown is now always closed prior to previously offending action and the error doesn’t happen.

Speed up UltraWebGrid rendering on rebind

If you’re using Infragistics UltraWebGrid with it’s property Browser="Xml", you may find yourself living in a shotgun shack in a strange situation: When grid is rebinding – it takes (comparatively) short time to do server-side processing and then a very long time to render grid in the browser.

In my case it was most felt when grid (which had ViewType="OutlookGroupBy") was initially grouped with a lot of data in each group and then ungrouped back into flat view when user dragged last group column out. Using IE9 built-in developer tools I ran JavaScript profiler I found that culprit was Infragistics JS function “disposeNode” which was called numerous times and had worst both inclusive and exclusive execution time. Continue reading →

Absolute coordinates of element inside of IFRAME

Often there’s a need to determine absolute coordinates of an HTML element within a page, for example you need to display a popup menu on a button click at the button coordinates. Code for this is well known, here is one of the variations:

// Define class that will hold Object coordinates
function CTopLeft(i_nTop, i_nLeft) {
   this.nTop = i_nTop;
   this.nLeft = i_nLeft;
}

// Get Top, Left coordinates of a DOM element
function GetTopLeft(i_oElem) {
   var cTL = new CTopLeft(0, 0);
   var oElem = i_oElem;
 
   do {
      cTL.nLeft += oElem.offsetLeft;
      cTL.nTop += oElem.offsetTop;
      oElem = oElem.offsetParent;
   } while (oElem)
   
   return cTL;
}

This code is pretty straightforward: we’re looping thru all element’s ancestors, adding up each parent’s offsetTop and offsetLeft to get actual element coordinates.

This works well when your page is at the top level. But what if the page is inside of an IFRAME? Then the code above would give you coordinates of an element within the IFRAME window only. But what if you still need absolute coordinates of the element within browser window? Taking the example above – you need to display popup menu on the button clicked inside of IFRAME, but the menu can grow big and go outside of IFRAME boundaries. So the menu element need to be hosted outside of the IFRAME and coordinates need to be absolute withing browser window.

Let’s throw IFRAMEs into the mix: 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 →

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 →