Tag Archives: trick

FusionCharts: Use non-numeric Xaxis in Bubble and Scatter Charts

FusionCharts states in their documentation that in Bubble and Scatter Charts both X-Axis and Y-Axis must be numeric. But what if you want X-Axis to display some names or dates or other non-numeric values? That is still possible via label attribute of chart’s categories element.

The method below utilizes ADO.NET/VB.NET to build XML for chart data, but similar approach can be easily used in other languages/technologies.

Consider the following ADO.NET DataTable, called dtChartData:

               Login Failure  Login Success
-------------- -------------- -------------
2013-03-27     1              69
2013-03-26     0              32
2013-03-25     1              86
2013-03-22     0              11

It holds data for number of successful/unsucessful logins for a given date. We want to display this data as a Bubble chart with dates displayed on X-Axis. Continue reading →

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.

Infragistics WebDataGrid: Hidden columns become visible after AJAX postback

A recent update to .NetAdvantage for ASP.NET v12.2 introduced a weird bug – hidden columns of WebDataGrid and WHDG become visible after postback. Service release 12.2.20122.2031 fixed that issue – but only for full postback. Under some circumstances if grid performs an AJAX call (sorting, paging etc.) hidden columns become visible again. This does not happen in IE, but other browsers, such as Chrome and FireFox do exhibit the issue.

This is happening because hidden columns lose “display:none” property in their style. If this happens to you – you have to take matter in your own hands. Continue reading →

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.

Run Adobe Flash Player on Android 4.1 Jelly Bean (and above)

It is a well known fact that Adobe is willingly shooting itself in the foot stopped supporting flash on Android devices. If you run Android 4.1 (Jelly Bean) it is not even available on the Google Play. Oh and speaking of Google – unlike its desktop counterpart Chrome for Android doesn’t support Flash either.

So.. is this the end of the era?

Fear not. Just download and install this handy Flash APK and install it on your device. Voila! Your mighty tablet/phone now has Flash. It still won’t work in Google Chrome, but other browser (Stock, Dolphin) will happily use it.

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 →

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 →

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 →

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.

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 →