Monday, September 13, 2010

Moving the Notes Control & Managing Scrolling Issues

I recently came across an issue on one of the forums where there was a need to “scroll” to the top of a CRM form.

If you’ve ever tried moving the “Notes” section from the default Notes tab to the first tab (where it is placed lower down on the form, resulting in a vertical scrollbar), you will have noticed that when the form is loaded, the page seems to jump/scroll down just enough to give apparent focus to the “Notes” section.

This is quite interesting as the “Notes” control (in its own unique way) has its own onLoad event in addition to the form onLoad ... notice that the form focus is in fact on the first field (you can be sure of this as when you scroll up, the value within this first field will be highlighted).

Unfortunately ... the difficulty with this situation is that the onLoad event of the “Notes” control occurs AFTER the form onLoad event; this means that simply using .SetFocus() or .scrollTop in the onLoad event will not scroll the form back up to the top as when the “Notes” control loads, it will just jump the scrollbar back down!

Fortunately ... this can easily be resolved by using .attachEvent to tell the system what to do once the Notes control has reached the “Ready State” (ie. finished loading).

The following JavaScript in your onLoad event should successfully scroll the form back to the top:
// Capture the "Notes" Control  
var NotesControl = document.getElementById('notescontrol');    

// Attach an event to the OnReadyStateChange of the "Notes" Control  
NotesControl.attachEvent('onreadystatechange', ScrollTop);    

// Refresh the "Notes" Control  

// Define the Actions to Execute when the "Notes" Control has Loaded  
function ScrollTop()  
    // Scroll back to the top of the form  
    document.getElementById('tab0').scrollTop = 0; 

1 comment:

  1. The above code is working fine for CRM 4 as the tabs are displayed in horizontal manner. But if you want to do the same in CRM 2011 it does not work.

    In that case, just copy the below code which is working perfectly.

    1. If your have already added JQuery web resource to the form then just copy below code to a function and call at form- onload


    2. Or if you prefer the javascrips then just copy below code to a function and call at form- onload

    document.getElementById('crmFormTabContainer').scrollTop = 0;