Category Archives: HTML/CSS

WebDataMenu: Incorrect displaying after upgrade

This is the second post in saga titled Upgrading Infragistics Controls to a new version. Chances are that your WebDataMenu looks weird after upgrade to 2010+ version. In my case the menu had following options/features:

  • It was a context popup menu, called on right mouse click
  • Text of menu items was assigned dynamically at runtime in JavaScript Client code

After upgrading NetAdvantage from version 2009.2 to 2011.1 strange things started to happen. Text of the menu items was cut short, submenues appeared at wrong places it looked like something from a Dali’s painting.
Numerous experiments later I found out that the problem was with EnableScrolling property of the menu control. Setting it to False returned menu to realm of realism.

WebHierarchicalDataGrid: JavaScript errors after upgrade

Upgrading 3rd party library to a new version is bound to have problems and Infragistics is no exception. In my case I was upgrading NetAdvantage for ASP.NET from version 2009.2 to to 20011.1 and right away WebHierarchicalDataGrid started to crash client-side. If ScriptManager was in debug mode I’d get error:

Microsoft JScript runtime error: Sys.ArgumentUndefinedException: Value cannot be undefined.Parameter name: type

With ScriptManager in Release mode it’d be:

Microsoft JScript runtime error: Object expected

But always in Sys.Component.Create – it looked like grid’s client-side scripts weren’t loading at all. After A LOT of digging I found out that the culprit was grid’s server-side Bands.Clear() method. When called, it caused client-side WHDG JavaScript not to load. When that method was commented – JavaScript errors disappeared. So until Infragistics comes out with a bug fix – if you experience similar problem, try to avoid Bands.Clear() method.

IE8: Display borders around empty cells

By default Internet Explorer 8 does not display blank cells in HTML tables (technically it does’t show borders around such cells) and visuals aren’t pretty. The solution below may not work for everybody, but I’d imagine will help in many cases:

Just set the table style to 

border-collapse:collapse

Presto-chango! Missing borders now appear.

Prevent Cross Site Scripting thru hidden fields

ASP.NET protects you pretty good when user tries to post a malicious content thru an entry form. With @page directive “ValidateRequest=true” (which is true by default) if anybody attempts to enter something like <script type=”text/javascript”>…nasty stuff here…</script> the page will throw HttpRequestValidationException exception: A potentially dangerous value was detected from the client…

But this does not work for some form elements, for example framework variables such as __EVENTVALIDATION or __VIEWSTATE over which user or developer do not have direct control. A maliciously crafted POST request can insert JavaScript into those elements which then can execute in user’s browser. Yes the page may crash because of invalid data, but JavaScript is still echoed to the client and gets executed. In this case ASP.NET needs a little help. Continue reading →

WebHierarchicalDatagrid: Sys.ArgumentException: Cannot deserialize on Row Expand

I have been using WebHierarchicalDataGrid with manual load on demand bands with a pretty good success until I hit this snag.

The WHDG has correctly displayed HTML fields before, but this time a column with HTML data (an HREF link to be precise) is needed as one of the grid’s DataKeyFields to provide uniqueness of the row:

WHDG with HTML column Continue reading →

Solution for UltraWebGrid missing scrollbars

I was working with classic Infragistics UltraWebGrid when noticed strange thing – even though scrollbars were enabled for the grid, the grid had fixed size and number of rows was bigger than the grid could display – no scrollbars appeared. For me it was a combination of grid being shown in a modal dialog in IE7 browser, but it could happen in other scenarios.

I also noticed when grid experienced any kind of user interaction (row added, row selected, checkbox cell checked etc.) scrollbars would magically appear. So the solution? Simulate user interaction. For example this code can be included in grid’s client-side InitializeLayout event:

function xMyGrid_InitializeLayout() {
    var oGrid = igtbl_getGridById('xMyGrid')
    oGrid.Rows.getRow(0).setSelected(true);
    oGrid.Rows.getRow(0).setSelected(false);
}

What happens here is first row of the grid is selected and an instant later unselected. It happens so fast that there’s no visual indication. But the grid gets its “user interaction” and scrollbars appear.

Affecting page during WebDataGrid AJAX calls

When Infragistics WebDataGrid perform AJAX operations such as sorting and paging – it sends grid data directly to page’s DOM. But it also allows you to send your own custom data via server-side GridResponse object and its client-side counterpart. This feature allows you to establish effective link between server and client to perform custom operations otherwise available only during full postback or partial postback via update panel. There’re multiple cases where this can be used, let’s take a look at 3 most common:

  • Updating a related control with server-side generated data
  • Running a server-side generated JavaScript
  • Handling server-side errors, for example Session timeout

Continue reading →

Solution for ‘previousSibling’ is null or not an object error in grouped UltraWebGrid

Infragistics UltraWebGrid offers standard keyboard navigation for record selection. For example you can click a row, and holding Shift key press Down Arrow to select multiple records. This works fine for a flat grid, but try this with grid in OutlookGroupBy mode and you’ll get an error ‘previousSibling’ is null or not an object:

Error selecting records in grouped UltraWebGrid

After some digging I found the culprit. Continue reading →

Making HoverCssClass work in WebDataTree

Infragistics WebDataTree control offers extensive support of CSS for tree styling. One of the options HoverCssClass is intended to alter tree node appearance when mouse pointer hovers over it:

HoverCssClass properting in Infragistics WebDataTree

Unfortunately it doesn’t seem to have any effect on the tree appearance. When I set that class to simple underline node:

.fnTreeHover {text-decoration:underline}

nothing happened. I found the workaround when I noticed that the tree is rendered as an ancor tag <A> inside of <LI> tag:

WebDataGrid rendered in HTML

The solution is to apply style to this combination:

LI A:hover {text-decoration:underline}

Bingo. Now tree nodes are underlying when mouse is over them.

WebHierarchicalDataGrid: Helpful client functions for row selection

Working with row selection in Infragistics WebHierarchicalDataGrid can be complicated since it maintains independent row selection collection for each row island and basic operations (select/unselect) aren’t that obvious. I put together a few functions to make it a little bit easier.

This first function is very basic, it returns total count of selected rows across all expanded row islands, no matter what depth. The key here is get_selectedRowsResolved() method of Selection behavior which returns an array of all selected rows:

// Returns number of selected rows from all rowislands in WebHiearchicalDataGrid
// i_oGrid: Infragistics WebHiearchicalDataGrid object
function selRowsCount(i_oGrid) {
    return  i_oGrid.get_gridView().get_behaviors().get_selection().get_selectedRowsResolved().length 
}

The following function loops thru all selected rows, collecting values from specific column (useful for example for collecting IDs of selected rows). It accepts 3 parameters – WebHiearchicalDataGrid object, column key and separator character and returns a string in which selected values are separated by that character (if nothing is passed – default separator is comma). Continue reading →