RadDock Possible to have only one table cell for content

4 posts, 2 answers
  1. Birger Grønvold
    Birger Grønvold avatar
    2 posts
    Member since:
    Oct 2009

    Posted 06 May 2010 Link to this post

    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
  2.
  3. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 11 May 2010 Link to this post

    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.
  5. Birger Grønvold
    Birger Grønvold avatar
    2 posts
    Member since:
    Oct 2009

    Posted 02 Jun 2010 Link to this post

    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?
  7. Answer
    Pero
    Admin
    Pero avatar
    1156 posts

    Posted 04 Jun 2010 Link to this post

    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.
Back to Top