Hi,
I am using a RadToolBar inside a RadDock. I would like to know if is possible to fit perfectly the toolbar inside the raddock. The image in attachment shows the problem I want to solve.
Thanks in advance,
Michael Pinheiro
I am using a RadToolBar inside a RadDock. I would like to know if is possible to fit perfectly the toolbar inside the raddock. The image in attachment shows the problem I want to solve.
Thanks in advance,
Michael Pinheiro
4 Answers, 1 is accepted
0
Hello Michael,
The left and right spacing of the dock is left, so you could easily make the dock resizable on the client (they are used as resizing handles). To remove it we need to use custom CSS code, and JavaScript. For your convenience I have implemented a sample project that does this. Here is the full source code:
Let me know if you have questions, or need further clarification.
Greetings,
Pero
the Telerik team
The left and right spacing of the dock is left, so you could easily make the dock resizable on the client (they are used as resizing handles). To remove it we need to use custom CSS code, and JavaScript. For your convenience I have implemented a sample project that does this. Here is the full source code:
<%@ 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"
>
.rdMiddle .rdLeft, .rdMiddle .rdRight, .rdBottom
{
display: none !important;
}
.rdContent
{
border: 1px solid #a7bac5 !important;
border-top:none;
width: auto !important;
}
</
style
>
<
script
type
=
"text/javascript"
>
function DockInit(dock, args)
{
var middleTableCell = dock.get_contentContainer().parentNode;
middleTableCell.setAttribute("colSpan", 3);
}
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
asp:ScriptManager
>
<
table
id
=
"table"
cellspacing
=
"3"
>
</
table
>
<
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"
Skin
=
"Vista"
EnableRoundedCorners
=
"true"
OnClientInitialize
=
"DockInit"
Height
=
"300px"
>
<
ContentTemplate
>
<
div
style
=
"height: 100px; background: red;"
>
</
div
>
</
ContentTemplate
>
</
telerik:RadDock
>
</
telerik:RadDockZone
>
</
telerik:RadDockLayout
>
</
div
>
</
form
>
</
body
>
</
html
>
Let me know if you have questions, or need further clarification.
Greetings,
Pero
the Telerik team
0
USI
Top achievements
Rank 1
answered on 17 Mar 2011, 03:20 PM
Hi,
Thanks for the fast answer. It works. The problem is that I want to keep the resize functionality.
Is it possible to make only the toolbar fit perfectly in the dock and let the content with the left and right spacing in order to keep the resize funcionality? Or maybe adding a statusbar that could be the resize handler?
Michael Pinheiro
Thanks for the fast answer. It works. The problem is that I want to keep the resize functionality.
Is it possible to make only the toolbar fit perfectly in the dock and let the content with the left and right spacing in order to keep the resize funcionality? Or maybe adding a statusbar that could be the resize handler?
Michael Pinheiro
0
Hello Michael,
I modified my code from the previous post, and it turns out, we can keep the bottom border (i.e. statusbar) of the dock, so it can be resized. Here is the modified code:
Note that, depending on the skin used you might need to change the color of the border (highlighted in yellow). In this example I have used the color for the Vista skin.
Kind regards,
Pero
the Telerik team
I modified my code from the previous post, and it turns out, we can keep the bottom border (i.e. statusbar) of the dock, so it can be resized. Here is the modified code:
<%@ 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"
>
.rdMiddle .rdLeft, .rdMiddle .rdRight
{
display: none !important;
}
.rdContent
{
border: 1px solid #a7bac5 !important;
border-top: 0px !important;
border-bottom: 0px !important;
width: auto !important;
}
</
style
>
<
script
type
=
"text/javascript"
>
function DockInit(dock, args)
{
var middleTableCell = dock.get_contentContainer().parentNode;
middleTableCell.setAttribute("colSpan", 3);
}
</
script
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"ScriptManager1"
runat
=
"server"
>
</
asp:ScriptManager
>
<
table
id
=
"table"
cellspacing
=
"3"
>
</
table
>
<
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"
Resizable
=
"true"
Skin
=
"Vista"
EnableRoundedCorners
=
"true"
OnClientInitialize
=
"DockInit"
Height
=
"300px"
>
<
ContentTemplate
>
<
div
style
=
"height: 100px; background: red;"
>
</
div
>
</
ContentTemplate
>
</
telerik:RadDock
>
</
telerik:RadDockZone
>
</
telerik:RadDockLayout
>
</
div
>
</
form
>
</
body
>
</
html
>
Note that, depending on the skin used you might need to change the color of the border (highlighted in yellow). In this example I have used the color for the Vista skin.
Kind regards,
Pero
the Telerik team
0
USI
Top achievements
Rank 1
answered on 21 Mar 2011, 12:39 PM
Hi,
That's exactly what I was looking for.
Thank you.
Michael Pinheiro
That's exactly what I was looking for.
Thank you.
Michael Pinheiro