How to: Center PopUp Edit Form in RadTreeList

[Thanh]

Hi
Following are the lines from my HTML page.  I want to control the position of popup window duing add/edit.
It should be center align to the screen/browser window.  How do set it ?

[Veli]

Hello Thanh,

You can use the client-side OnTreeListCreated event that will fire when the RadTreeList client component is loaded on the page. Inside the event handler, you can find the first popup edit form (with a CSS class of "rtlEditForm"). Finally, jQuery or another approach can help you calculate the position of the element relative to the viewport. Here is a text page:

<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" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
    </Scripts>
</asp:ScriptManager>
<div>
    <telerik:RadTreeList ID="RadTreeList1" runat="server">
        ...
        <ClientSettings>
            <ClientEvents OnTreeListCreated="treeListCreated" />
        </ClientSettings>
    </telerik:RadTreeList>

    <script type="text/javascript">

        (function($) {
            $.fn.center = function () {
                this.css("position","absolute");
                this.css("top", (($(window).height() - this.outerHeight()) / 2) + $(window).scrollTop() + "px");
                this.css("left", (($(window).width() - this.outerWidth()) / 2) + $(window).scrollLeft() + "px");
                return this;
            }
        })($telerik.$);

        function treeListCreated(sender, args) {
            $telerik.$(".rtlEditForm", sender.get_element()).center();
        }
    </script>
</div>
</form>

Veli
the Telerik team

[Thanh]

Thank you Veli.