Scrolling to the Top of an Aspx page conditionally

Sounds like a simple task right? Maybe thats why I accepted to help my team mate on this functionality despite being in the middle of a really hectic week. I admit, it took me a little longer than my estimated "10 minutes" to get this to work. It was one LENGTHY "ajaxified" aspx page and the requirement was - to scroll the page to the top IF there were exceptions on save. Apparently there was an error message displayed on top of the page. So IF there were any exceptions on save - the friendly error text gets displayed there. Among many other options suggested and provided, the business users (you know, the people whom we bill our timesheets...) preferred the scroll functionality - because according to them, I quote - "that sounded the easiest". Yeah. Tell me about it!

I tried registering a javascript to scroll the window to co-ords 0,0 - which did not work.

If I made the page to always scroll to the top, then on EACH callback, the page would go right up - which is wrong again. So had to flag it and follow up and on a conditional basis.

For which I had to make the below code changes to get the page to scroll correctly:

Add the following to the markup:

<script language="javascript" type="text/javascript">

var errorEncountered;

errorEncountered = 0;

function scrollTop() {

 if (errorEncountered == 1) {

 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(scrollTop2);

 };

}

function scrollTop2() {

 if (errorEncountered == 1) {

  scrollTo(0, 0);

  errorEncountered = 0;

 };

}
</script>

Add the following to the code behind at the catch of an exception on save:

System.Web.UI.ScriptManager.RegisterClientScriptBlock(Me, Me.GetType(), "Script", "errorEncountered=1;scrollTop();", True)

Flex Glass Headers

When i first started to work in Flex almost a year back, I was so eagerly looking to grab as much goodies as possible and make my application look spiffy. I remember staying all night long at work so many times, just to explore options by visiting many sites and applications built using Flex, primarily to get sources of inspiration.

One such application was the Flex Style Explorer. The one thing that I loved the most was the mild glossy look it had on its title; Luckily it had the view source enabled and I went on to see how the guys had done that.

It was a mere reference to a transparent flash sprite compiled into a swiff file and was referred from inside the CSS - set as the backgroundImage of the panel.

I went on to build my own header using flash in the next few minutes and added my own version of the glossy look to my application.

Click here to see the image of my app title before and after.

It was such a mild difference, people could hardly notice it; but it hugely enhanced the overall aesthetics of my application. People LOVED the look and feel but no one guessed it. I went on to use this header smartly across the application onto different controls wherever possible.

Flex Renderer Recycling

Thought it would be useful to just mention about renderer recycling 'feature' that is inherent in the Flex UI control handling.

Often this could burn your time if not handled properly at the time of building your application.

The Problem:
When you scroll through a list control which has a huge list of items and is bound with an itemRenderer, the items in the list control tend to shift its positions randomly, as you scroll.

The Reason:
Flex by default tries to reuse the item renderers. In other words lets say your list control has about 40 items. It is not necessary that Flex would generate 40 itemRenderers to display the list.
Instead, based on the display area available, it would generate a few itemRenderers, just enough to handle the current display area and probably a few more for buffering.

As the users scroll through the same itemRenderers get reused and the contents that need to be displayed, in other words the next item data will be rewritten onto that itemRenderer.

So in total the creationComplete event on the item renderer would just fire once and it is not necessary that it would fire for every item added to the list again because of this reusing concept.





The Solution:
Override the set data function on your itemRenderer which would give you access to the actual item that is being bound to the itemRenderer at that point in time, and in this function you could take care of binding the item the way you want.

The set data is bound to get called many times during the process of creation/change resize etc...
For an example of overcoming the renderer recycling issue and how to override the set data function, check the example here.

Flex TileList ItemRenderer with Drag and Drop Sample

Moving on to Flex 4 since last month, I think it is time to publish a few of the small things I had done in Flex 3.

This one is a simple but nice - drag and drop example from one of the modules I had built. It is not the entire application of course; just a stripped down to basics version that just explains a few

The example handles issues like renderer recycling and explains how a custom item renderer can be used which in turn could have its own set of child controls.

The source for this can be found here and a live example here.

P.S.: When viewing the demo, just click on Open if your browser prompts you about handling the file.

Flex Expand Collapse Panel - Custom Component

It has been an extremely long time since my last post. To explain the delay, I would need to write about half a dozen posts. That comes later. This post is just to record a very simple and basic custom component I did a few days back.

It is a simple component extending the Panel and just adds a small Maximize/Minimize toggle button on the top right corner that resizes the panel based on the dimensions specified in the markup.

I blame the requirement for the simplicity of this component. It is just what they wanted. Nothing fancy about it.

It was quite simple to do. The only challenge was to deal with Flex as it does not know what to do when the component has its own set of child components declared internally and also when we try to add a few more, at the declaration…

The solution was pretty straightforward. The source code is available here and I tried to host an example here. When viewing the demo, just click on Open if your browser prompts you about handling the file.