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

RadDock with asp:panel control scrolling

3 Answers 135 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Bader
Top achievements
Rank 1
Bader asked on 10 Sep 2010, 12:23 AM
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

3 Answers, 1 is accepted

Sort by
0
Pero
Telerik team
answered on 14 Sep 2010, 04:34 PM
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
0
Bader
Top achievements
Rank 1
answered on 20 Oct 2010, 09:31 PM
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
0
Pero
Telerik team
answered on 22 Oct 2010, 05:30 PM
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
Tags
Dock
Asked by
Bader
Top achievements
Rank 1
Answers by
Pero
Telerik team
Bader
Top achievements
Rank 1
Share this question
or