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 41 Views
Calendar
This is a migrated thread and some comments may be shown as answers.
Birger Grønvold
Top achievements
Rank 1
Birger Grønvold asked on 06 May 2010, 02:09 PM
Hi,

I use RadDock, and have the EnableRoundedCorners= true, so i get three table columns in the header which is fine.
But i also get three table columns in the contents area. I need it to be One table-cell with colspan=3 in the contents area. Is this possible?

The issue is, I don't want borders inside the radDock for my content.

regards,
Birger

3 Answers, 1 is accepted

Sort by
0
Accepted
Pero
Telerik team
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.
0
Birger Grønvold
Top achievements
Rank 1
answered on 02 Jun 2010, 08:36 AM
You suggestion worked fine, until I updated to the latest version,
Now the Contents (a Grid) gets it's width set to a px value, even though i have specified it to be 100%.

The Grid inside gets it's correct width when it's rebound. So it seems like this problem only are on postback, not ajaxrequest.

Any ideas?
0
Accepted
Pero
Telerik team
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">
<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

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.
Tags
Calendar
Asked by
Birger Grønvold
Top achievements
Rank 1
Answers by
Pero
Telerik team
Birger Grønvold
Top achievements
Rank 1
Share this question
or