This is a migrated thread and some comments may be shown as answers.

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

17 Answers 155 Views

Dock

This is a migrated thread and some comments may be shown as answers.

Paul Tran asked on 17 Dec 2009, 07:42 PM

titlebartemplateinternetexplorer.JPG

titlebartemplatefirefox.JPG

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

17 Answers, 1 is accepted

answered on 18 Dec 2009, 08:15 AM

I had the same problem before.

What did the trick for me was some CSS

                    .RadDock .rdTable .rdTop .rdCenter         
            {         
                line-height: 25px !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 ;)

answered on 21 Dec 2009, 09:24 PM

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

answered on 22 Dec 2009, 12:02 PM

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">

<html xmlns="http://www.w3.org/1999/xhtml">

<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 />

CONTENT

<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.

answered on 25 Dec 2009, 08:44 AM

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.

answered on 05 Jan 2010, 10:14 PM

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

answered on 06 Jan 2010, 10:33 AM

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.

answered on 08 Jan 2010, 02:07 PM

1.JPG

2.JPG

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.

answered on 13 Jan 2010, 04:19 PM

dockradiobuttonlistintitlebar.zip

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

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

17 Answers, 1 is accepted

DockHandle = "TitleBar"