TitlebarTemplate : Why the result is different in Firefox / IE?

18 posts, 0 answers
  1. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 17 Dec 2009 Link to this post

    Hi,

    I was able to implement a custom TitlebarTemplate in my RadDock, but the problem is that I don't have the correct result when the page is loaded inside Internet Explorer, but it is correct in Firefox. I have attached the results from each browser.

    What should I do so that Internet Explorer display it correctly? (I am using Internet Explorer 7)

    Edit: With styling changes, I was able to display it correctly in Internet Explorer, but I have another problem. It displays my radio button, but I can't click or select them. I can only move the RadDock and the mouse cursor is a crossed arrows.

    Thanks,
    Paul

  2. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 18 Dec 2009 Link to this post

    I had the same problem before.
    What did the trick for me was some CSS

    .RadDock .rdTable .rdTop .rdCenter 
        line-height25px !important; 


    The reason why you can't click them is because of this: 

    DockHandle = "TitleBar" 

    It treats your whole titlebar as the "draghandler" except for your DockCommands area. 

    This link might help:
    http://www.telerik.com/help/aspnet-ajax/dock_usabilitydraganddrop.html

    EDIT:
    I examined your screenshots again and realized you only have 2 options for your radio button. May I suggest you use a DockToggleCommand for this ?
    that saves you allot of time on implementation.
    You can achieve this by using the following code:

            private void addSettingsCommandToDock(RadDock dock) 
            { 
                var dockSettingsToggleCommand = new Telerik.Web.UI.DockToggleCommand 
                { 
                    AutoPostBack = true
                    OnClientCommand = "OnClientSettingsClick"
                    Name = "SomeName", 
                    Text = "Kg", 
                    AlternateText = "Lbs", 
                    CssClass = "rdKGcss"
                    AlternateCssClass = "rdLBScss" 
                }; 
     
                dock.Commands.Add(dockSettingsToggleCommand); 
            } 

    To switch the CSS and Text on Client side you can use this:
    function OnClientSettingsClick(dock, args) { 
        var command = args.command; 
        var state = command.get_state() == 1 ? 2 : 1; 
        command.set_state(state); 

    This will switch between the "Kg" and "Lbs" tooltip text and switch to a different CSS Class.

    In Code behind you could implement the logic of changing whatever it is you actually want changed.

    Hope this helps !
    If it does. Please mark your question as resolved ;)
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 21 Dec 2009 Link to this post

    Hi Paul,

    You need to disable the dragging of the Dock control when you select an option from the radio button. For example in one of our online demos we have a LinkButton placed inside the dock's TitleBar. When the button is clicked the user can edit the title text. Notice that the dragging of the dock is disabled using client-code.

    Best wishes,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  5. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 21 Dec 2009 Link to this post

    To Gido Geek:

    - Your CSS does help for the display in Internet Explorer.
    - For the the DockHandle, I have no choice to use the TitleBar option. The other option are Grip and None and they don't fit my needs since I need the title bar.

    To Pero:

    - The problem is that I can not select my radio buttons in Internet Explorer. My radio buttons are only displayed, but I can only drag and move the dock. When I set the property EnableDrag to false, everything works fine, except that I can not drag the dock anymore and I need it. The weird thing is that it works on all other browsers (Firefox, Safari, Chrome) except Internet Explorer.

    Thanks,
    Paul



  6. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 22 Dec 2009 Link to this post

    Dear Paul,

    I was glad I could help on the styling part.

    My ToggleCommand was not a valid option either ?
    (The part after "EDIT:").

    And if not, why ? If I understand why this doesn't work for you maybe I know a different way to solve your issue.

    Merry X-mas,
    Gido
  7. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 22 Dec 2009 Link to this post

    Hello Paul,

    Try setting the following CSS class to the RadioButtonList placed inside the TitleBar. It will set the cursor CSS property back to its default value (auto) when the mouse cursor is over the RadioButtonList.

    <style type="text/css">
        .rblClass
        {
            cursor: auto;
        }
    </style>

    This is the full source code of the project that I tested:

    .aspx
    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="Head1" runat="server">
        <title></title>
        <style type="text/css">
            .rblClass
            {
                cursor: auto;
            }
        </style>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <div>
            <telerik:RadDockLayout ID="RadDockLayout1" runat="server">
                <telerik:RadDockZone ID="RadDockZone1" runat="server" MinHeight="300px" Width="300px">
                    <telerik:RadDock ID="RadDock1" runat="server" Width="300px" Title="RadDock-Title">
                        <TitlebarTemplate>
                            <div style="float: left;">
                                <asp:RadioButtonList ID="RBL1" runat="server" AutoPostBack="true" OnSelectedIndexChanged="RBL1_SelectedIndexChanged"
                                    RepeatDirection="Horizontal" CssClass="rblClass">
                                    <asp:ListItem Text="Kg"></asp:ListItem>
                                    <asp:ListItem Text="Lb"></asp:ListItem>
                                </asp:RadioButtonList>
                            </div>
                        </TitlebarTemplate>
                        <ContentTemplate>
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                            CONTENT
                            <br />
                            <br />
                            <br />
                            <br />
                            <br />
                        </ContentTemplate>
                    </telerik:RadDock>
                </telerik:RadDockZone>
            </telerik:RadDockLayout>
        </div>
        <asp:Label ID="Label1" runat="server"></asp:Label>
        </form>
    </body>
    </html>
            
    .cs
    using System;
    using System.Collections.Generic;
    using System.Linq;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
     
    public partial class _Default : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
     
        }
     
        protected void RBL1_SelectedIndexChanged(object sender, EventArgs e)
        {
            Label1.Text = DateTime.Now.ToString();
        }
    }



    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  8. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 22 Dec 2009 Link to this post

    Hi,

    To Gido: I haven't try your ToggleCommand option, because we absolutely want some radio buttons since it is more visual for the user.

    To Pero: Ok I tried your solution and it works, but only the first time! Once I click on the radio button, it goes back to the drag mode. I tried to reset the CssClass in the PreRender and it didn't help.
  9. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 22 Dec 2009 Link to this post

    Hello Paul,

    I couldn't experience any errors with the sample project that I sent you in my previous reply? Here is a video captured while running the project.

    Could you please provide more information (browser, are docks dynamically created, etc.) about the problem you are experiencing? A sample running project (or sample source code) where the issue can be observed will help us a lot.


    All the best,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  10. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 23 Dec 2009 Link to this post

    Hi Pero,

    I took a video capture that explains in details the problem I am having.

    It is working in : Mozilla Firefox, Google Chrome, Safari
    Not working in : Internet Explorer

    Docks are not dynamically created.

    I am currently trying to recreate the problem outside of my project. I think it is something in my project that triggers this problem.

    I'll post my sample project when it'll be ready.

    Happy Holidays,
    Paul
  11. Gido Geek
    Gido Geek avatar
    28 posts
    Member since:
    Nov 2009

    Posted 24 Dec 2009 Link to this post

    Hey Paul,

    I'm not a big expert on cross-browser compatibility even though I always try to enforce it in my own apps. Having that said I have a suggestion for a 'dirty' solution. What if you make a ClientClick event that reapplies the CSS ? I have a feeling your CSS get's overwritten. Or try adding an !impotrant to the css. Just some suggestions to try before posting the project. If it doesn't work I'll wait for the project to give it a try and assist you further.

    Merry X-mas
  12. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 25 Dec 2009 Link to this post

    Hi Paul,

    Thank you for the video, but it didn't help me reproduce the problem locally. I tried to reproduce your setup in the following way, but still could not get the error that you are experiencing.
    • Placed the DockLayout and the RadDocks in a WebUserControl. Referenced the control in a WebForm.
    • Replaced the asp:RadioButtonList with two separate asp:RadioButton controls.

    Also, please remove the <contenttemplate> from the <div> placed in the Dock's TitleBar template.

    I will be waiting for the sample code.

    Merry Christmas and Happy New Year!

    Sincerely yours,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  13. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 05 Jan 2010 Link to this post

    Hi,

    Hope you all had some great holidays.

    Sorry if I didn't answer earlier! (vacations..)

    I did some further test and I think I found out what is making it not work. I did a separate Web User Control containing the dock + radio buttons and I tested it in a normal aspx and it is working. But when I include this Web User Control in another full AJAX Web User Control, that is when it is not working. I think it is because the AJAX refresh does not correctly refreshes the TitleBarTemplate. When I do a refresh from the browser, the state is back to normal. But now, how do we fix this?

    I'll try to reproduce it in a simple project and post it here.

    Thanks,
    Paul
  14. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 06 Jan 2010 Link to this post

    My suggestion is to use a custom dockHandle. All you need is to handle the DockInitialize event and to set a new dockHandle.
    The code below is similar to your scenario and everything will work.
    <%@ 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 id="Head1" runat="server">  
        <title></title>  
        <style type="text/css">  
            .RadDock .rdTop .rdTitleHandle  
            {  
                float:left;      
            }  
            .RadDock .rdTop .rdRadioButtonList  
            {  
                float:left;      
            }  
        </style> 
        <script type="text/javascript">  
            function DockInit(dock, args) {  
                var titleBar = dock.get_titleBar();  
                var dockHandle = $telerik.getElementByClassName(titleBar, "rdTitleHandle", "div");  
                dock.set_handle(dockHandle);  
            }  
        </script> 
    </head> 
    <body> 
        <form id="form1" runat="server">  
        <asp:ScriptManager ID="ScriptManager1" runat="server">  
        </asp:ScriptManager> 
        <div> 
            <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock1" Skin="Vista" OnClientInitialize="DockInit">  
                <TitlebarTemplate> 
                    <div class="rdTitleHandle">  
                        SomeText  
                    </div> 
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server" RepeatDirection="Horizontal"   
                    class="rdRadioButtonList">  
                        <asp:ListItem Text="Kg"></asp:ListItem> 
                        <asp:ListItem Text="Lbs"></asp:ListItem> 
                    </asp:RadioButtonList> 
                </TitlebarTemplate> 
            </telerik:RadDock> 
        </div> 
        </form> 
    </body> 
    </html> 
     
    Hope this helps.
  15. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 06 Jan 2010 Link to this post

    It works!!!

    Thank you all for the help!
  16. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 07 Jan 2010 Link to this post

    After further tests, I found out that it is working because by handling the DockInitialize event, it disables the Drag & Drop of the dock. The problem is that I want the Drag & Drop functionality. We are now back to where we were..
  17. Obi-Wan Kenobi
    Obi-Wan Kenobi  avatar
    460 posts
    Member since:
    Aug 2007

    Posted 08 Jan 2010 Link to this post

    The drag&drop functionality is not disabled. Only the DragHandle is changed - You can drag the RadDock with <div class="rdTitleHandle">  
    If the div is empty, it will not have width and you can't drag the RadDock.
    You can write some JavaScript code in DockInitialize, which will resize the div to fit the width (without commands, and radiobutton list).
  18. Paul Tran
    Paul Tran avatar
    13 posts
    Member since:
    Jul 2009

    Posted 08 Jan 2010 Link to this post

    Hi,

    What happens when I put the the title in the div is once I click on the radio button, everything after the title disappears as you can see in my attached files (1.jpg -> Before and 2.jpg -> After).

    When I put the title and the radio buttons in the div, after a click on the radio button, everything after it disappears (custom command button, collapse button and close). And again, I cannot click on my radio buttons, I can only drag the dock.


  19. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 13 Jan 2010 Link to this post

    Hi Paul,

    As a last resort maybe you should try disabling the drag of the RadDock when the mouse is over any of the RadioButtons, and enabling it again when it leaves the buttons. Please take a look at the project that I have attached to see how the dragging is enabled and disabled.

    If you still cannot resolve the problem, we would not be able to help you unless you provide a sample working project (or sample code) that demonstrates the problem. I tried recreate the problem with both solutions suggested in some of the previous threads but with no success.


    Greetings,
    Pero
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017