Tag Archives: style

WHDG: Give Grouped columns correct captions

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]

Solution: WebDataGrid loses styles after postback

Infragistics WebDataGrid control offers very flexible styling option – you can set font, color, size of almost any element from column to individual cell. Here is an example of basic markup that sets CSS classes of overall grid control, grid header, grid odd row and grid even row:

<ig:WebDataGrid ID="xMyGrid" runat="server"
   CssClass = "GridStyle"
   HeaderCaptionCssClass = "GridHeaderCellStyle"
   ItemCssClass = "GridCellStyle"
   AltItemCssClass = "GridAltCellStyle" 
>

And corresponding example of CSS class for even row:

tbody > tr.GridAltCellStyle > td
{
   font-size:11px;
   font-weight:normal;
   font-family:Verdana, Geneva, sans-serif;
   height:20px;
   padding: 2px 2px 2px 2px;
   border-bottom: none;
   border-right: 1px solid rgb(190,198,178);
   background-color:rgb(240,240,240);
}

(For a complete grid styling reference take a look at this styling guide)

And it all works fine, your grid renders so beautifully, Picasso would cry. But only on initial page load. And here comes dreadful postback. Continue reading →

Position:Absolute within Position:Absolute

Let’s say we have a basic HTML layout: a container DIV and within it another DIV and an image:

<div id="xdivContainer">
   <div id="xdivMenu" style="position:absolute"></div>
   <img id="ximgIcon" src="icon.gif" />
</div>

Inner (child) div is positioned absolutely and we want to place it at the coordinates of the image (think popup menu appearing on icon click). A very basic JavaScript function obtains position of the image:

// Class placeholder for coordinates
function CTopLeft(i_nTop, i_nLeft) {
   this.nTop = i_nTop;
   this.nLeft = i_nLeft;
}

// obtain position of a DOM element
function GetTopLeft(i_oElem) {
   var cTL = new CTopLeft(0, 0);
   var oElem = i_oElem;

   while (oElem) {
      cTL.nLeft += oElem.offsetLeft;
      cTL.nTop += oElem.offsetTop;
      oElem = oElem.offsetParent;
   }
   
   return cTL;
}

As you can see it simple collects offset positions of the HTML element, combining them into absolute coordinates. So to absolutely position our child DIV at the coordinates of the image we can call it like this (I am using $() notation as a shortcut for document.getElementById)

var oPos = GetTopLeft($('ximgIcon'));
$('xdivMenu').style.top = oPos.nTop + 'px';
$('xdivMenu').style.left = oPos.nLeft + 'px'

And it works fine. Until container DIV is in turn absolutely positioned: Continue reading →

Partially hide external content with CSS overflow

If you ever hosted a content from external website in an IFRAME on your own site and wanted, for no reason whatsoever, to hide either top, bottom, left or right portion of that content – there’s an easy way.

Imaginge you have HTML markup like this:

<iframe frameborder="no" width="275" height="95" src="https://www.google.com/images/srpr/logo3w.png" />

It will display a pretty logo of some 3rd party company:

Now you got an idea to improve it a bit, by removing unneeded characters. Take a look at following markup:

<div style="width:275px;overflow:hidden">
   <div style="margin:0px 0px 0px -120px">
      <iframe frameborder="no" width="275" height="95"
      src="https://www.google.com/images/srpr/logo3w.png" />
   </div>
</div>

Our IFRAME is now enclosed into 2 DIVs. Internal one shifts left margin of its content 120px into the content, and external one effectively hides everything outside the margins via hidden overflow. The result:

Of course the content doesn’t have to be IFRAME with external content, but if it’s internal to your site that means you have full control over it and don’t need to use this hack.

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 →

Style Rounded Corner images of UltraWebTab thru external stylesheet

Infragistics UltraWebTab control offers multiple styling options, many of them can be set via external CSS classes. As a matter of fact about only element you cannot style via external stylesheet is rounded corner images. Or can you?

By default images used to give the tabs rounded-corner look are referenced directly in UltraWebTab ASPX markup:

<RoundedImage
   SelectedImage="./images/ig_tab_selected.jpg"
   NormalImage="./images/ig_tab_normal.gif"
   HoverImage="./images/ig_tab_hover.jpg"
   FillStyle="LeftMergedWithCenter">
</RoundedImage>

So, for example if SelectedImage looks like this:

Default Selected Image of UltraWebTab

It will give your tab appearance like this

Selected Image of UltraWebTab in action

Let’s examine it closer. Continue reading →

Style IFRAME scrollbars in IE

Internet Explorer offer CSS elements to style scrollbars, for example class

.FlatScrollbars
{
   scrollbar-face-color: #f0f0f0;
   scrollbar-shadow-color: silver;
   scrollbar-highlight-color: silver;
   scrollbar-3dlight-color: #f0f0f0;
   scrollbar-darkshadow-color: #f0f0f0; 
   scrollbar-track-color: #f0f0f0;
   scrollbar-arrow-color: #000000;
}

applied to a DOM element will render nice flat scrollbars:

Flat Scrollbars in Internet Explorer

Yes, it’s not standard CSS, but other browsers offer similar extensions (WebKit, I am looking at you). So, it works nice and well, but what if you want to style scrollbars of an IFRAME? Continue reading →

Correctly apply external styles to UltraWebGrid

Classic Infragistics UltraWebGrid allows you to programmaticaly specify CSS styles for its various elements. For example code like this:

xmyGrid.DisplayLayout.HeaderStyleDefault.CssClass = "HeaderStyle"
xmyGrid.DisplayLayout.RowStyleDefault.CssClass = "RowStyle"

Would set style of grid header and rows via external CSS class. You would expect that simple defining classes like this:

.HeaderStyle {  /* style definition goes here */ }
.RowStyle {  /* style definition goes here */ }

should do the trick, but you may experience some unwanted, erratic behavior: styles getting lost, styles getting mixed up (row would get a header style and vise versa).

To fix this we should let grid know that header style should apply only to header row (THEAD/TH HTML elements) and row style applies only to rows with data (TBODY/TD elements). This is done via slight adjustments of the above CSS to point it to specific elements:

THEAD.HeaderStyle TR TH{  /* style definition goes here */ }
TBODY.RowStyle TR TD {  /* style definition goes here */ }

This way there’s no confusion, styles apply exactly were they belong. Also you may need to set grids MergeStyles property to False and make each class fully define it’s element (including fonts, colors, backgrounds etc.)

UltraWebGrid TopItemSpacing=”Auto”: Solution for FireFox

If you’re still using classic Infragistics Controls and want to make them work in modern browsers, sometimes a little additional work is required. Hopefully this little trick will save you some time.

UltraWebGrid has a neat property TopItemSpacing, when set to Auto it automatically spreads top level menu items across the menu control, giving them nice spacing in between. Unfortunately this property seems to work in Internet Explorer only, in Firefox (and Chrome and etc.) it is ignored, rendering menu in Compact mode giving top level items crowded “too-close-for-comfort” look.

The solution is to take spacing in our own hands. Set TopItemSpacing to Compact and instead add right padding to TopLevelParentItemStyle and TopLevelLeafItemStyle elements of the menu. For example (from the markup point of view):

<TopLevelLeafItemStyle Cursor="Hand" Height="18px" BorderWidth="1px" Font-Size="8pt">
   <Padding Right="6px" />
</TopLevelLeafItemStyle>

Actual pixel value of the padding is up to your particular scenario, but the final result is top level menu items will be nicely spaced both in IE and in Firefox.

WebHierarchicalDataGrid: Extra Row after Update

If after upgrading to a new version of Infragistics NetAdvantage you suddenly found your WHDG sprouting an extra blank row on top:

Extra Row in Aikido WHDG

most likely it’s because grid’s ItemCssClass property is used. In theory (at least according to ever so verbose documentation) it should define what grid’s cells look like. In practice it have no effect whatsoever. Or rather had no effect until upgrade (verified in version 2011.1, perhaps even earlier). Now if your CSS class used in this property contains HEIGHT attribute – a blank row of that height will be inserted on top of the grid.

Solution? Remove ItemCssClass property. It’s useless anyway.