RadDock with asp:panel control scrolling

4 posts, 0 answers
  1. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 09 Sep 2010 Link to this post

    Hi,

    I have a problem,
    i have an asp.net panel with scrolling. That panel control is built in layers, so the RadDockLayout is one of its layers. The RadDocks control which are added dynamicly to this layer must be relative to a specific point (Top and Left properties). If I remove the scrolling property of the panel then it is works fine, BUT, if I keep the scrolling property and scroll up, down, right or left then the raddock will stay in its postion and will refer to another point in the map (Please view the attached images).

    aspx page:

    <

     

     

    td style="width:76%;" >

     

     

     

    <asp:Panel ID="Panel2" Width="710px" style="margin-top:-18px;" BorderWidth="0" Height="390px" runat="server" >

     

     

     

    <asp:Panel ID="bg" Height="410px" ScrollBars="Auto" runat="server" >

     

     

     

    <asp:Image ID="CMapImage" runat="server" />

     

     

     

    <asp:Label ID="Label1" runat="server" Visible="false" Text="Label"></asp:Label><br />

     

     

     

    <asp:Label ID="Label2" runat="server" Visible="false" Text="Label"></asp:Label>

     

     

     

    </asp:Panel>

     

     

     

    <asp:Panel ID="LayerPanel1" runat="server">

     

     

     

    <telerik:RadDockLayout ID="RadDockLayout1" runat="server">

     

     

     

     

    </telerik:RadDockLayout>

     

     

     

    </asp:Panel>

     

     

     

    <asp:Panel ID="content" runat="server">

     

     

     

    <table border="0" cellpadding="0" cellspacing="0" width="100%">

     

     

     

    <tr>

     

     

     

    <td align="left" valign="middle">

     

     

     

    <asp:Panel ID="CityNameOnTheMapPanel" style="margin-left:10px" runat="server">

     

     

     

    <asp:Label ID="CityNameLabel" Font-Size="14pt" runat="server" ></asp:Label>&nbsp;

     

     

     

    <asp:Label ID="OnTheMapLabel" runat="server" Font-Size="14pt" Font-Bold="true" Text="ON THE MAP"></asp:Label>

     

     

     

    </asp:Panel>

     

     

     

    </td>

     

     

     

    <td align="right">

     

     

     

    <asp:Label ID="excuteWindowOpenInFullScreen" runat="server" Visible="false"></asp:Label>

     

     

     

    <asp:ImageButton ID="ImageButton1"

     

     

     

    ImageUrl="~/Common/Img/Buttons/FullScreen.jpg" runat="server"

     

     

     

    OnClientClick="UseRadWindow();return false;" />

     

     

     

    <asp:ImageButton ID="ImageButton2" Visible="false" ImageUrl="~/Common/Img/Buttons/Print.jpg"

     

     

     

    runat="server" />

     

     

     

    </td>

     

     

     

    </tr>

     

     

     

    </table>

     

     

     

    </asp:Panel>

     

     

     

    </asp:Panel>

     

     

     

     

    </td>

     



    c# code:

    private

     

     

    RadDock CreateRadDock(string dockNum, string bsnsName, string website, int top, int left, string colr)

     

    {

     

     

    int docksCount = CurrentDockStates.Count;

     

     

     

    RadDock dock = new RadDock();

     

    dock.ID =

     

    string.Format("RadDock{0}", dockNum);

     

    dock.Title =

     

    string.Format("Dock {0}", dockNum);

     

    dock.Width =

     

    Unit.Pixel(180);

     

    dock.EnableEmbeddedSkins =

     

    false;

     

    dock.Left =

     

    Unit.Pixel(left);

     

    dock.Top =

     

    Unit.Pixel(top);

     

    dock.BackColor.GetBrightness();

    dock.OnClientInitialize =

     

    "SetHandleDock";

     

    dock.DockMode =

     

    DockMode.Docked;

     

    dock.DockHandle =

     

    DockHandle.Grip;

     

    dock.Text =

     

    "<table border='0' cellpadding='0' cellspacing='0' width='100%'><tr><td style='background-color:#" + colr + "; border-bottom-style:solid; border-left-style:solid; border-right-style:solid; border-top-style:solid; border-bottom-width:thin; border-top-width:thin; border-right-width:thin; border-left-width:thin;'><div style='margin:2px;'" + string.Format("<a href='{0}'>{1}</a> ", website, bsnsName) + "</div></td><td>&nbsp;</td></tr><tr><td>&nbsp;</td><td><img alt='' src='Common/Img/Lines/000000.gif' /></td></tr></table>";

     

    dock.UniqueName =

     

    Guid.NewGuid().ToString();

     

     

     

    return dock;

     

    }



    protected

     

     

    void CommonCheckBox_CheckedChanged(object sender, EventArgs e)

     

    {

     

     

    string _iDs = string.Empty;

     

     

     

     

    DataLstObjctGetData _dataLstObjctGetData = new DataLstObjctGetData();

     

     

     

    DataSet _myDataSet = new DataSet();

     

    _myDataSet = _dataLstObjctGetData.GetHotSpots(GetCtgryLst(), City, SmallMapPosition);

     

     

    DataTable _myDataTable = new DataTable();

     

    _myDataTable = _myDataSet.Tables[0];

    Session[

     

    "HotSpotsDataTable"] = _myDataTable;

     

    GridView1.DataSource = _myDataTable;

    GridView1.DataBind();

    RadDockLayout1.Controls.Clear();

     

     

    foreach (DataRow _row in _myDataTable.Rows)

     

    {

     

     

    RadDock dock = CreateRadDock(_row["HSHotSpotID"].ToString(), _row["BBsnsName"].ToString(), _row["BBsnsWebsite"].ToString(), Convert.ToInt32(_row["HSYCord"]), Convert.ToInt32(_row["HSXCord"]), _row["CCtgryColr"].ToString());

     

    RadDockLayout1.Controls.Add(dock);

     

     

    if (_iDs.ToString().Equals(string.Empty))

     

    {

    _iDs += _row[

     

    "HSHotSpotID"].ToString();

     

    }

     

     

    else

     

    {

    _iDs +=

     

    "," + _row["HSHotSpotID"].ToString();

     

    }

    }

    Label1.Text = _iDs.ToString();

    }

    Please, I need your help to make my raddock refers to the same point even if I scroll.
    It is apprecited to send me the modified code.

    Regards,
    Bader

  2. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 14 Sep 2010 Link to this post

    Hello Bader,

    Have you considered the RadToolTip control for this specific scenario? It can be configured to be shown relatively to a given point. The following online demo shows how to show ToolTip for different areas of an image: http://demos.telerik.com/aspnet-ajax/tooltip/examples/imagemaptooltipmanager/defaultcs.aspx.

    Now, regarding your issue with the RadDock control. When the RadDock is with DockMode="Floating", i.e. it is not docked to a zone, the dock has position: absolute and is child to the <form/> element. This means that it does not matter whether the dock is over an element, it will always retain its position relative to the <form/>. That's why when you scroll the <div/> (the panel) the dock will not be scrolled together with the other content, because it is not a child to the <div/>. Essentially this is the solution to your issue. Make the dock, child to the panel (<div/>) and set position: relative to the panel.

    For your convenience I created a sample application that makes the dock child to a given element, when the page is loaded for the first time, and on every movement of the dock. Here is the code:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function OnClientInitialize(dock, args)
            {
                var divMap = $get("divMap");
                divMap.appendChild(dock.get_element());
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="RadScriptManager1" runat="server">
        </asp:ScriptManager>
        <script type="text/javascript">
            //Put your JavaScript code here.
        </script>
        <div id="divMap" style="width: 700px; height: 400px; overflow: auto; position: relative;">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum suscipit, diam
            eu ornare consectetur, metus nisi ornare sem, quis commodo risus eros a nisi. Lorem
            ipsum dolor sit amet, consectetur adipiscing elit. Etiam vel purus sit amet velit
            ultricies blandit ac eget nisl. Curabitur quis tellus luctus risus tincidunt commodo.
            Vivamus nec ligula arcu. Maecenas ut auctor odio. Morbi at ante est. Lorem ipsum
            dolor sit amet, consectetur adipiscing elit. Fusce et nisi sem. Pellentesque feugiat
            blandit mauris, a adipiscing purus dictum eu. Donec ornare mauris vitae augue iaculis
            nec feugiat eros condimentum. Proin eget dui orci, id vulputate tellus. Phasellus
            aliquet elit vitae erat volutpat vestibulum semper purus aliquet. Quisque faucibus
            tortor sed ante lobortis et laoreet purus hendrerit. Sed quis diam et lacus aliquam
            ornare vel faucibus justo. Aenean nisl lorem, euismod ut adipiscing ut, eleifend
            at risus. <span style="color: Red; background-color: Black">Morbi</span> eu adipiscing
            nisi. Donec placerat hendrerit nisl sed accumsan. Pellentesque fermentum aliquam
            massa, eget sagittis quam mattis at. Sed ut est enim. Donec non ipsum tortor. Nulla
            facilisi. In fringilla fringilla risus, a tincidunt eros imperdiet sed. Nunc mollis
            vestibulum neque at eleifend. Cras eget eros dolor, at tincidunt lorem. Sed libero
            ante, vulputate ut semper id, laoreet in diam. Quisque rutrum dui in est sagittis
            vulputate. Quisque adipiscing, dui sed laoreet commodo, eros ipsum luctus urna,
            euismod fringilla diam massa ornare velit. Nulla quam mauris, congue vitae commodo
            vestibulum, mollis sed ipsum. Donec feugiat sagittis dui a pharetra. Cras tincidunt
            leo nec nisi ultrices quis viverra tortor mattis. Nullam justo orci, tincidunt non
            congue quis, interdum vitae odio. Proin lectus nunc, sollicitudin non cursus pellentesque,
            mattis eget velit. Vestibulum sodales nunc ut augue fringilla dictum. Maecenas scelerisque
            pulvinar neque, nec feugiat ante lacinia eu. Nam ac ligula risus, at facilisis velit.
            Quisque pharetra ligula vel diam feugiat vitae luctus felis molestie. Vivamus porta
            nulla sed est lobortis nec gravida elit interdum. Sed ornare dui sit amet metus
            tincidunt sagittis. Integer hendrerit augue eget justo imperdiet sed pharetra dui
            dignissim. Donec bibendum velit ac sapien vehicula non accumsan quam luctus. Aliquam
            orci nibh, volutpat non imperdiet et, malesuada id sapien. In nec purus eu justo
            consectetur ultrices. Etiam suscipit mollis nisi ut aliquet. Proin posuere elit
            eu tellus aliquet et gravida arcu volutpat. Ut eu odio ante. Duis ante quam, feugiat
            non interdum eget, porttitor sit amet odio. Nam volutpat commodo vulputate. Integer
            nisl odio, bibendum sed vulputate ac, scelerisque non risus. Nunc pellentesque dictum
            nulla at eleifend. Vivamus gravida venenatis nunc, non vulputate purus feugiat eu.
            Praesent non nibh nisl, faucibus condimentum metus. In hac habitasse platea dictumst.
            Suspendisse a mi lorem. Nunc arcu orci, posuere a mattis id, placerat id turpis.
            Aenean ut mi vitae sem vestibulum elementum. Integer ut libero nibh, vel pharetra
            velit. Cras vestibulum luctus magna, non condimentum nisi tempor in. Ut dolor risus,
            suscipit non tempus eget, fringilla eget massa. Etiam at velit a purus mattis pretium.
            Praesent mattis porttitor pretium. Lorem ipsum dolor sit amet, consectetur adipiscing
            elit. Aliquam congue pharetra justo, sed luctus tellus fermentum a. Maecenas accumsan,
            leo eu vestibulum pretium, arcu eros pellentesque enim, sit amet placerat justo
            nibh in purus. Duis ut magna mi, rutrum congue augue. Mauris consectetur auctor
            diam. Vestibulum in metus id augue porta lobortis in cursus sem. Cum sociis natoque
            penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti.
            Duis sollicitudin nisl vel leo tempor sed placerat diam mattis. Proin leo augue,
            posuere posuere fringilla ac, imperdiet tristique nunc. Nullam malesuada, est vitae
            volutpat convallis, nibh nisl elementum risus, ac gravida urna mi ac ipsum. Cras
            blandit pulvinar massa, at vehicula lorem porttitor eu. In hac habitasse platea
            dictumst.
        </div>
        <telerik:RadDock ID="RadDock1" runat="server" Title="RadDock-Title" Width="300px"
            Left="50" Top="170" Style="position: relative;" OnClientInitialize="OnClientInitialize"
            OnClientDragEnd="OnClientInitialize">
            <ContentTemplate>
                <br />
                <br />
                <br />
                <br />
                <br />
                CONTENT
                <br />
                <br />
                <br />
                <br />
                <br />
            </ContentTemplate>
        </telerik:RadDock>
        </form>
    </body>
    </html>


    Greetings,
    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Bader
    Bader avatar
    215 posts
    Member since:
    Aug 2008

    Posted 20 Oct 2010 Link to this post

    Hello,

    Thank you for last reply, it was very useful.
    I have a question, is there any control in your library which doing the same functionality (displaying panel controls in layers)?

    Regards,
    Bader
  5. Pero
    Admin
    Pero avatar
    1156 posts

    Posted 22 Oct 2010 Link to this post

    Hi Bader,

    I think RadWindow or RadToolTip might be suitable for  your scenario. The following demo of the RadWindow control shows how to use it as content container: http://demos.telerik.com/aspnet-ajax/window/examples/internalcontent/defaultcs.aspx.

    Kind regards,
    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