Tag Archives: solution

Implement “onVisible” event for HTML DOM element in JavaScript

Well, not exactly, but method described in this particular scenario can be expanded to other cases. Imagine you have a clickable element, let’s say a SPAN and when user clicks this element – it is covered by an absolutely positioned DIV with a higher z-index. In other words a dialog is displayed:

<span onclick="showDialogDiv()">Click here</span>

When user closes the dialog – your SPAN needs to detect this event, to perform some functions (refresh data on the page etc.) but you have no control over function that closes the DIV, so you can’t hook into it. All you know is that DIV’s display style is set to “none” when this happens. It would be cool if there was an “onvisible” event so you could do something like

<span onclick="showDialogDiv()" onvisible="performAction()">Click here</span>

but there’s no such event, so we need to simulate it. Which is surprisingly easy:

<span onclick="showDialogDiv(); var i=setInterval(function(){if ($('xdivDialog').style.display=="none") {clearInterval(i);performAction()}},1000)">Click here</span>

Basically when user clicks the SPAN to show the dialog – at the same time a timer is started that regularly checks visibility of the dialog DIV (whether it’s style display became “none” again). Once this is detected, that means opener SPAN is visible again – timer is stopped and function to handle event is called.

FusionCharts.RenderChart and ASP.NET UpdatePanel

Fusion Charts

FusionCharts is a very cool cross-platform charting library – it offers huge variety of chart types and mind-blowing special effects. It also offers wide variety of chart rendering options both client- and server-side.

One such option is to render chart in an ASP.NET application. FusionCharts.dll that you get with the package offers handy FusionCharts.RenderChart method that generates all the client-side code you need to display a beautiful chart. Usually it is used something like this:

xLabel1.text = FusionCharts.RenderChart("FusionCharts/Pie2D.swf", "", sChartXmlData, sChartID, iChartWidth, iChartHeight, False, True)

where xLabel1 is a Label or Literal control in your ASPX page and FusionCharts.RenderChart is a function that accepts number of parameters, like chart type, chart XML data, dimensions etc.

It works very well until you want to render the chart inside of Microsoft Ajax UpdatePanel – then nothing works. This happens because FusionCharts.RenderChart function emits some HTML along with JavaScript that do not work during partial postback. FusionCharts suggest hooking up to UpdatePanel life-cycle events, but it’s seems like an overkill, and often doesn’t work (especially if you have a complex project, which this hookup can interfere with). But there’s an alternative solution.
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 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 →

Solution for: Value of type ‘System.Web.UI.HtmlControls.HtmlGenericControl’ cannot be converted to ‘System.Web.UI.HtmlControls.HtmlTableRow’ error

If you’re trying to compile an ASP.NET project/website in Visual studio 2012 or 2010 and getting error:

Value of type ‘System.Web.UI.HtmlControls.HtmlGenericControl’ cannot be converted to ‘System.Web.UI.HtmlControls.HtmlTableRow’

chances are you have an HTML table in your ASPX markup with runat="server" attribute set and <tbody> or <thead> tags present. Remove <tbody> and <thead> tags and the error should go away.

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.

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 →

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.

Attract traffic and increase your site Google PR

Do you want to get #1 place on Google and significantly increase your site traffic & sales?

Then I recommend you to check out this PR4-PR8 Contextual Link Building Service – it’s quite effective. They GUARANTEE rankings & PageRank increase on Google.

Now, I know as much about SEO as a fire hydrant (and it perhaps knows more), but these guys make site promotion incredible easy. They’re doing it by providing high quality PR4-PR8 link building service, which will skyrocket your site rankings on Google, increase your site traffic & sales for ~250% within 3 months on average, and increase its Google PageRank up to PR4, PR5 or even PR6! Sign up for free at linksmanagement.com today to see what kind of links they cab build for you, and where they’ll come from. Once you sign up, you’ll also get some valuable BONUS!