RadDock's Pin function does not work in IE6

[Joseph]

While doing some pre-client testing, I discovered that 6.0 versions of IE / IE6 do not work with the RadDock's pin function/behavior.  If you undock a dockpanel and then pin it, the panel does not follow the page when you scroll.  This behavior does not occur on IE7.  I have also verified it on two different machines that are both running the same XP SP2 IE 6.0.2900 SP2.  I am using the latest 2008.2.1001.20 assembly version of Telerik.Web.UI.dll

I have found an old thread which talks about it this from May, and it said that this issue was to be resolved already.  FYI incase perhaps it was left out or is occurring now for a different reason: 
http://www.telerik.com/community/forums/aspnet-ajax/docking/raddock-ie-6-0.aspx 

much obliged for your time,
joseph johnson jr.

[Nikolay Raykov]

Hello Joseph,

Does this behavior occur in our online demo pages? I made some tests on this demo page and everything is OK.

I also noticed that the version that you are using is not the latest one. I suggest to update to the latest version which is Service Pack 1 for Q3 2008 (2008.3.1125).

Regards,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joseph]

Hey Nikolay, I tested it against your demo page (http://demos.telerik.com/aspnet-ajax/Dock/Examples/Commands/DefaultCS.aspx),  which had a PIN demo and the same behavior occurred.  Clicking neither the pin nor the unpin icon resulted in any pin behavior as the dock scrolled.  This seems to only occur in IE6, although I haven't tried it in any earlier a version.

I'll checkout that new dll, but I the version I tested it against was your website (which may have the latest version?) so it seems to be something browser specific.

joseph

[Joseph]

Telerik, I have tested this with the Q3 dll and I cannot seem to get it to work.  I went so far as to drop debug statements into your RadDock.js file after disabling EmbeddedScripts, and what I found is there is a rogue "return" statement in your script that returns if the browser is IE6 after the user invokes the set_pinned function (see below).

It seems like someone intentionally added the return statement perhaps to fix the issue of the docks dissapearing in IE6.  Because if I remove the return statement, the dock dissapears when I click pin (because the "fixed" style.position property is not supported in IE6).

I checked the Q3 2008 scripts released in November after all of the right-to-left support stuff was added, and the pin function still has the same code in there.

So I guess the question is can I get someone to fix this or provide me with a code snippet that I can inject into RadDock.js to fix the issue of the pinning not working in IE6?  I've found a few articles that talk about how, but have been unable to get them to work in my trials, such as: 

http://www.nowcss.com/javascript/emulating-position-fixed-in-ie-6-below
http://gregwolejko.com/positionfixed-in-ie6/

Please see the aforementioned code in RadDock.js:

set_pinned:function(_d0){

this._pinned=_d0;

var _d1=this.getCommand("PinUnpin");

if(_d1){

_d1.set_state(_d0?2:1);

}   // *DEBUG* Are we using IE6?

if($telerik.isIE6){

if(_d0){

this.set_enableDrag(false);

}else{

this.set_enableDrag(true);

}

// *DEBUG* RIGHT HERE it's returning if IE6! :-) return;

}

// *DEBUG* This code below executes in IE7 but not 6.  If it executes, the docks will dissapear in IE6 as written. var _d2=this.get_element();

_d2.style.position="absolute";

var _d3=$telerik.getScrollOffset(_d2,true);

var _d4=this._getLocation(_d2);

if(_d0){

_d4=this.subtractPoints(_d4,_d3);

this._setLocation(_d4);

_d2.style.position="fixed";

this.set_enableDrag(false);

}else{

_d4=this.addPoints(_d4,_d3);

this._setLocation(_d4);

this.set_enableDrag(true);

}

thanks,
joseph

[Nikolay Raykov]

Hello Joseph,

Due to lack of support of position: fixed in IE 6 this functionality does not work. There are known hacks on the web for fixing this but not all of them are appropriate because using hacks might introduce a new bug.

I came up with the following solution:

<script type="text/javascript">
        Telerik.Web.UI.RadDock.prototype.oldSet_pinned = Telerik.Web.UI.RadDock.prototype.set_pinned;
        Telerik.Web.UI.RadDock.prototype.set_pinned = function(value)
        {
            this.oldSet_pinned(value);
            if($telerik.isIE6)
            {
                if (value)
                {
                    var element = this.get_element();
                    var top = parseInt(element.style.top);
                    var left = parseInt(element.style.left)
                    window.onscroll = function()
                    {
                          element.style.top = document.documentElement.scrollTop + top + 'px';
                          element.style.left = document.documentElement.scrollLeft + left + 'px';
                    };
                }
                else
                {
                    window.onscroll = null;
                }
            }
        }
    </script>

This code uses the onscroll event to move the dock on scrolling and fixes the problem with position: fixed in IE 6. You need to put this function at the bottom of your page.

All the best,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joseph]

Thank you for your prompt reply Nikolay, that solution actually works quite well in IE6.  Do you have plans at some point of including it as apart of the embedded RadDock.js script?  If so I will make plans to remove the script in your next scheduled quarterly release.  If not then no worries, I will keep the script in the source of my app.

Also I would point out one small bug with this script/solution you provided.  If you attempt to pin a panel at the bottom of the page (below the raddockzones), scrolling up will cause the pinned dock to "dissapear" and not return to the page until the next postback, after which time the dock will be present at the bottom of the page.  This is a very small issue and in fact no user would attempt to pin a dock down there unless they were a QA tester attempting to break the implementation intentionally.  However this behavior does occur with your solution so I wanted to report it to you.

Also another thing I noticed with the Docking's pin feature (not quite the same issue, but related to it): in IE7 if you attempt to drag a dock off the screen to some far amount (e.g. to the far right, to where the content of the page is no longer even visible) and pin it, the dock will reset its position to the farthest it can go left within the viewable/scrollable area (which I would say is correct/expected/reasonable behavior and not the issue); however, when you cause a postback the dock will no longer be visible (because the framework actually renders its top/left position off the page where it was positioned prior to the postback, even though the pinning script seems to reset its position to within the viewable area of the page prior to submitting to the server).  This is an extremely minor/non-critical issue (because no reasonable user would do this in real world scenarios) however I noticed it and felt that I should report it.  You can reproduce it in your examples in IE7 (http://demos.telerik.com/aspnet-ajax/Dock/Examples/Commands/DefaultCS.aspx) by dragging the floating dock off the screen to the far right and hitting "pin" then hitting the "Custom" command (which causes a postback) on one of the docked panels (notice how it dissapears).

Very good work on your products and as always thanks for the excellent support.

joseph johnson jr.

[Nikolay Raykov]

Hi Joseph,

As you pointed out this code is not perfect for all scenarios. For the time being it will not be part of the next official release until we come up with a better solution.

Service Pack 2 for Q3 2008 release version will be out this week and it will not feature this fix. You need to continue to use the workaround I provided you with.

All the best,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joseph]

Thanks Nikolay.

By any chance is there a way I can modify this script so that when pinned and a postback occurs, the RadDock's DockCommand event has the left and top positions of the panel correctly registered?  For whatever reason, this particular script does not seem to be registering the right flags somewhere on the page that updates the DockCommand.  I don't know if this is a clientstate field or what?  Perhaps this is an issue with not running set_top and set_left commands in the RadDock client object (instead the script seems to be modifying the top and left style properties directly).

The pinning functionality works fine, however whenever a postback occurs it seems to force the dock to the very bottom left of my page with this script (just in IE6 of course)?

Also the pinning only works for the last object pinned.

It seems to me like we need to modify the onscroll function so that it discovers all undocked objects with a pinned property (or appends to / removes from an array that the onscroll function can read from) and calls the set_top and set_left functions of the raddock object so that the clientstate updates when a postback occurs.

            window.onscroll = function()
            {
                  element.style.top = document.documentElement.scrollTop + top + 'px';
                  element.style.left = document.documentElement.scrollLeft + left + 'px';
            };

joseph

[Nikolay Raykov]

Hello Joseph,

Thank you for noticing these problems. I made some modifications to the code that I last sent you - now the Command event reflects the changed X and Y coordinates and the pin functionality works for all docks on the page.

Here is the revised code:

<script type="text/javascript">
        var pinnedDocks = [];

        Telerik.Web.UI.RadDock.prototype.oldSet_pinned = Telerik.Web.UI.RadDock.prototype.set_pinned;
        Telerik.Web.UI.RadDock.prototype.set_pinned = function(value)
        {
            this.oldSet_pinned(value);
            if($telerik.isIE6)
            {
                var addDock = function(obj)
                {
                    pinnedDocks.push(obj);
                };

                var removeDock = function(obj)
                {
                    for (var i = 0; i < pinnedDocks.length; i++)
                    {
                        if (pinnedDocks[i].dock == obj.dock)
                        {
                            pinnedDocks.splice(i, 1);
                            break;
                        }
                    }
                };

                var dock = this;
                var element = this.get_element();
                var top = parseInt(element.style.top);
                var left = parseInt(element.style.left);

                if (value)
                {
                    addDock({dock: dock, top: top, left: left});
                    window.onscroll = function()
                    {
                          for (var i = 0; i < pinnedDocks.length; i++)
                          {
                            var dock = pinnedDocks[i].dock;
                            var top = pinnedDocks[i].top;
                            var left = pinnedDocks[i].left;

                            dock.set_top(document.documentElement.scrollTop + top);
                            dock.set_left(document.documentElement.scrollLeft + left);
                          }
                    };
                }
                else
                {
                    removeDock({dock: dock, top: top, left: left});
                    if (pinnedDocks.length == 0)
                    {
                        window.onscroll = null;
                    }
                }
            }
        }

I added a global array object which will hold all pinned docks - used to reflect the position of the dock on the page when the user is scrolling. Two helper functions are added to add and remove docks from this array and the event handler for the onscroll event iterates over the array to re-position the docks.

Regards,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joseph]

Nikolay, this is a lot better.  However I have noticed that when the postback happens, the docks that were pinned are all shoved to the bottom left of the screen.  I think what's happening is the window.onscroll function you made is using set_top and set_left to set the position of the pinned docks as the page scrolls, and this is being stored in the clientstate for the docks and restored on postback/page-refresh. 

I believe you just need to do a set_top and set_left once for each pinned dock when they are first pinned (to where the docks were originally pinned) and then modify the top and left values directly in the window.onscroll function (e.g. element.style.top and element.style.left) so that the scroll values do not get submitted to the server.

I think if you were to fix that then 95% of the desired behavior would be there for IE6.

One minor issue though is if you pin the dock on the bottom of the screen as opposed to the top, and you scroll up, the pinned docks dissapear completely from the page.  That is a very minor issue but I wanted to mention it for completeness.

much obliged,
joseph

[Nikolay Raykov]

Hi Joseph,

I made slight modifications to the code that fix the issues that you found. Below is the new version of the code:

<script type="text/javascript">
        var pinnedDocks = [];

        Telerik.Web.UI.RadDock.prototype.oldSet_pinned = Telerik.Web.UI.RadDock.prototype.set_pinned;
        Telerik.Web.UI.RadDock.prototype.set_pinned = function(value)
        {
            this.oldSet_pinned(value);
            if($telerik.isIE6)
            {
                var addDock = function(obj)
                {
                    pinnedDocks.push(obj);
                };

                var removeDock = function(obj)
                {
                    for (var i = 0; i < pinnedDocks.length; i++)
                    {
                        if (pinnedDocks[i].dock == obj.dock)
                        {
                            pinnedDocks.splice(i, 1);
                            break;
                        }
                    }
                };

                var dock = this;
                var element = this.get_element();
                var top = parseInt(element.style.top) - document.documentElement.scrollTop;
                var left = parseInt(element.style.left) - document.documentElement.scrollLeft;

                if (value)
                {
                    addDock({dock: dock, top: top, left: left});
                    window.onscroll = function()
                    {
                          for (var i = 0; i < pinnedDocks.length; i++)
                          {
                            var dock = pinnedDocks[i].dock;
                            var top = pinnedDocks[i].top;
                            var left = pinnedDocks[i].left;

                            dock.set_top(document.documentElement.scrollTop + top);
                            dock.set_left(document.documentElement.scrollLeft + left);
                          }
                    };
                    element.style.position = 'absolute';
                }
                else
                {
                    removeDock({dock: dock, top: top, left: left});
                    if (pinnedDocks.length == 0)
                    {
                        window.onscroll = null;
                    }
                }
            }
        }
    </script>

You should be aware that after a postback you might see for a fraction of a second the dock positioned at the wrong place. This cannot be avoided because it is caused by the server-side rendering which sets the position of the dock to fixed.

You should set the Page directive MaintainScrollPositionOnPostback to true to prevent some odd behavior that might occur when the dock is positioned at the bottom of the page and the page is scrolled down.

Thank you for the continuous feedback.

Greetings,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Joseph]

Nikolay, this script works great.  The docks pin well at the top of the page and at the bottom, and they maintain their pinned positions across postbacks.  No bugs that I can see.  Thanks for the assistance.  I would still recommend that you include this at some point as apart of your compiled DLL, but this will work in the mean time.

*Edit* BTW, I did notice one small thing in testing.  In my portal configuration, I actually had to wrap everything below "var pinnedDocked = [];" in an if statement that checked to see if Telerik.Web.UI.RadDock or Telerik.Web.UI.RadDock.prototype was null first, otherwise I would get a javascript error when I switched tabs.  This may be implementation specific for me only, as I have a rather "unique" implementation of the MyPortal page (I have multiple radlayouts that each live in separate RadTabs, all dynamically loaded from the database, and your portal changes depending on what tab you're in [like my.yahoo.com]).  Again probably my issue. 

Other than that no issues!!

var pinnedDocks = [];

// Check for null first before assignment.
if (Telerik.Web.UI.RadDock != null && Telerik.Web.UI.RadDock.prototype != null) {
        Telerik.Web.UI.RadDock.prototype.oldSet_pinned = Telerik.Web.UI.RadDock.prototype.set_pinned;
        Telerik.Web.UI.RadDock.prototype.set_pinned = function(value)
        {
                 ....
        }
}

much obliged,
joseph

[Nikolay Raykov]

Hello Joseph,

The reason why you receive this error is because of your scenario. When you are using tabs for layout and the visible tab does not contain RadDocks the embedded script files are not loaded. However the script that fixes the pinning in IE6 is on the page and Telerik.Web.UI.RadDock is not available at the moment.

Enclosing the script in an "if" conditional statement is the right way to tackle the problem and you would be sure that no such error will occur.

Best wishes,
Nikolay Raykov
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.