Daniel Ellis
Top achievements
Rank 1
Rank 1
Daniel Ellis
asked on 19 Feb 2010, 07:54 PM
We are trying to resolve an issue that happens when using the dock on any WebKit based browsers (Google Chrome, Safari for Windows, etc.) The issue appears to be that when dock.set_handle is called, it causes controls to not work on these browsers. The example below should run unmodified and show that a dropdownlist works fine as long as the dock handle is not set. As soon as you call dock.set_handle, the dropdownlist will no longer dropdown at all. This is a pretty big issue for us. Any ideas?
UPDATE: Added code sample.
UPDATE 2: This is still an issue but it can be worked around by adding the control to the dock's ContentContainer instead of using a ContentTemplate. Using that workaround produces a few new issues. First, since you're changing the control hierarchy, the asp.net client id will change and you'll have to do a second check in the SetHandle javascript to look for the element in webkit browsers. The other (worse) issue is that all the styling I did in the template no longer works so you now have elements that are drag-and-drop, but unstyled. I can probably work around this by setting the styles manually somewhere else but the effect of this is styles in two places. No other ideas, explanations or workarounds from the telerik staff about this?
UPDATE 3: Here is code similar to what I am using to resolve the above issues. This causes my docks to work on webkit browsers and the style is not duplicated. Since the style is in a css normally used by the ITemplate, I just set it manually in javascript. Again, a hack but it works at least.
UPDATE: Added code sample.
| <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %> |
| <%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml" > |
| <head runat="server"> |
| <title></title> |
| <script type="text/javascript" language="javascript"> |
| function SetDockHandle(dock) { |
| var d = document.getElementById("Handle_1") |
| //comment the next line out and the dropdownlist will work. |
| dock.set_handle(d); |
| } |
| </script> |
| </head> |
| <body> |
| <form id="form1" runat="server"> |
| <div> |
| <asp:ScriptManager ID="scriptmanager1" runat="server" /> |
| <telerik:RadDockLayout runat="server" EnableViewState="false" StoreLayoutInViewState="false" ID="RadDockLayout1"> |
| <telerik:RadDockZone runat="server" Skin="" ID="RadDockZone1" BorderColor="Transparent" Orientation="Horizontal"> |
| <telerik:RadDock runat="server" ID="raddock_1" OnClientInitialize="SetDockHandle"> |
| <ContentTemplate> |
| <div id="Handle_1"> |
| <asp:DropDownList ID="test" runat="server"> |
| <asp:ListItem Value="0" Text="test 0" /> |
| <asp:ListItem Value="1" Text="test 1" /> |
| </asp:DropDownList> |
| </div> |
| </ContentTemplate> |
| </telerik:RadDock> |
| </telerik:RadDockZone> |
| </telerik:RadDockLayout> |
| </div> |
| </form> |
| </body> |
| </html> |
UPDATE 2: This is still an issue but it can be worked around by adding the control to the dock's ContentContainer instead of using a ContentTemplate. Using that workaround produces a few new issues. First, since you're changing the control hierarchy, the asp.net client id will change and you'll have to do a second check in the SetHandle javascript to look for the element in webkit browsers. The other (worse) issue is that all the styling I did in the template no longer works so you now have elements that are drag-and-drop, but unstyled. I can probably work around this by setting the styles manually somewhere else but the effect of this is styles in two places. No other ideas, explanations or workarounds from the telerik staff about this?
UPDATE 3: Here is code similar to what I am using to resolve the above issues. This causes my docks to work on webkit browsers and the style is not duplicated. Since the style is in a css normally used by the ITemplate, I just set it manually in javascript. Again, a hack but it works at least.
| function SetDockHandle(dock) { |
| //crazy string stuff because asp.net is messing with client ids. |
| var id = dock.get_id(); |
| var idx = id.indexOf("RadDock"); |
| var sub = id.substring(idx); |
| //jquery doesn't work here. something about the jquery draggable plugin the telerik control uses clashing? |
| //var d = $("#" + dock.get_id() + "_C_Handle_" + sub) |
| var d = document.getElementById(dock.get_id() + "_C_Handle_" + sub); |
| if(d == undefined) { |
| //webkit fixes, since we have to add to the content container instead, the naming convention is different. |
| d = document.getElementById(dock.get_id() + "_C"); |
| //also set the style class manually since the template that contains the styles can't be used. |
| d.setAttribute("class", "SectionEdit"); |
| } |
| dock.set_handle(d); |
| } |
2 Answers, 1 is accepted
0
Hi Daniel,
I am glad you found a work around to this problem.
I just wanted to let you know that this is expected behavior. The same will happen if you put a DropDown inside the dock's TitleBarTemplate. To avoid this behavior you need to disable dragging of the dock when the DropDown is clicked. Please take a look at the following online demo: http://demos.telerik.com/aspnet-ajax/dock/examples/edittitle/defaultcs.aspx. If you carefully examine the source code you will notice that the movement is disabled when the user edits the title.
Greetings,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
I am glad you found a work around to this problem.
I just wanted to let you know that this is expected behavior. The same will happen if you put a DropDown inside the dock's TitleBarTemplate. To avoid this behavior you need to disable dragging of the dock when the DropDown is clicked. Please take a look at the following online demo: http://demos.telerik.com/aspnet-ajax/dock/examples/edittitle/defaultcs.aspx. If you carefully examine the source code you will notice that the movement is disabled when the user edits the title.
Greetings,
Pero
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Daniel Ellis
Top achievements
Rank 1
Rank 1
answered on 26 Feb 2010, 03:33 PM
Thanks for the update. That's an easy detail to miss, even after going through the demos. I added a function (called when the page loads) that will load all of the dropdownlists I'm looking for (using jQuery, loaded by a css class they share) and adds the mousedown handler. My code that fixes this now looks like this:
| function EnableDockDrag(enable) |
| { |
| var ddls = $("select.mDdl") |
| if(ddls.length > 0) { |
| for(i = 0; i <= (ddls.length - 1); ++i) { |
| if (enable) { |
| $addHandler(ddls[i], "mousedown", function(e) { |
| e.stopPropagation(); |
| }); |
| } |
| } |
| } |
| } |