How to: Center PopUp Edit Form in RadTreeList

3 posts, 1 answers
  1. Thanh
    Thanh avatar
    2 posts
    Member since:
    Jul 2010

    Posted 29 Sep 2011 Link to this post

    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 ?
  2. Answer
    Veli
    Admin
    Veli avatar
    2002 posts

    Posted 03 Oct 2011 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Thanh
    Thanh avatar
    2 posts
    Member since:
    Jul 2010

    Posted 12 Oct 2011 Link to this post

    Thank you Veli.
Back to Top