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

RadDock Possible to have only one table cell for content

3 Answers 93 Views

Calendar

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

3 Answers, 1 is accepted

Accepted

answered on 11 May 2010, 03:00 PM

Hello Birger,

You could remove the left and right table-cells using the following CSS:

<style type="text/css">

.RadDock .rdMiddle .rdLeft, .RadDock .rdMiddle .rdRight

{

display: none !important;

}

</style>

Then handle the OnClientInitialize client-side event of the dock, and set colspan=3 to the middle table-cell. To get instance to the middle table cell use the following line:

var mCell = dock.get_contentContainer().parentNode;

Please note that you also need to set borders (left and right) to the table-cell or the content container.

Best wishes,
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.

Accepted

answered on 04 Jun 2010, 01:33 PM

Hi Birger,

It might be too late to set colspan=3 on the client-side, so my suggestion is to try to do it on the server instead. This is the code that sets colspan=3 to the respective table-cell:

HtmlControl mCell = RadDock1.Controls[0].Controls[1].Controls[1] as HtmlControl;

mCell.Attributes.Add("colspan", "3");

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

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

.RadDock .rdMiddle .rdLeft, .RadDock .rdMiddle .rdRight, .RadDock .rdBottom

{

display: none !important;

}

</style>

<script type="text/javascript">

function OnClientInitialize(dock, args)

{

var mCell = dock.get_contentContainer().parentNode;

}

</script>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server">

<Scripts>

<asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />

</Scripts>

</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" Title="RadDock-Title" Width="300px"

OnClientInitialize="OnClientInitialize">

<ContentTemplate>

<telerik:RadGrid ID="Grid1" runat="server" Width="100%">

</telerik:RadGrid>

</ContentTemplate>

</telerik:RadDock>

</telerik:RadDockZone>

</telerik:RadDockLayout>

</div>

</form>

</body>

</html>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

using System.Web.Caching;

using System.Web.UI.HtmlControls;

public partial class Default_Dock : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

HtmlControl mCell = RadDock1.Controls[0].Controls[1].Controls[1] as HtmlControl;

mCell.Attributes.Add("colspan", "3");

Grid1.DataSource = new string[] { "1", "2", "3", "4", "1", "2", "3", "4", "1", "2", "3", "4" };

Grid1.DataBind();

}

All the best,
Pero
the Telerik team