How to set the bottom for a RadDock on client side ?

4 posts, 0 answers
  1. Bhanu
    Bhanu avatar
    41 posts
    Member since:
    Jul 2010

    Posted 12 Dec 2014 Link to this post


    We are using Telerik RadControls for ASP.NET Ajax version 2013.3.1114.45.
    I have a label in the raddock and the size of the label can be varied.
    It may have just one line of text and 20 lines of text (not known until it is displayed).

    I have been using the below client side code to display the raddock currently.
    But the raddock goes beyond the bottom of IE now as the label has more lines of text.

    var dock = $find('<%= RejectRadDock.ClientID%>');
    dock.set_left((document.body.clientWidth - parseInt(dock.get_width())) / 2);
    dock.set_top(document.body.clientHeight - 220);

    How to display the raddock where the bottom of the raddock is fixed and 
    the top can be grown as the label text grows ?


  2. Slav
    Slav avatar
    1351 posts

    Posted 13 Dec 2014 Link to this post

    Hello Bhanu,

    The floating RadDock control (its property DockMode is set to Floating) does not have functionality that ensures it is always in the boundaries of the screen, so you need to configure its coordinates manually in such a scenario.

    In your case I am not sure what is the exact difficulty you encountered. First you mentioned that the dock goes beyond the bottom border of the browser when its content is higher, then you added that the bottom of the dock is fixed and its top can get higher and possibly go beyond the top of the viewport of the browser.

    Also, the script you posted will position the dock outside of the boundaries of the browser screen if the height of the body element is small, in case the dock is floating.

    I cannot provide a concrete suggestion, because I do not have enough information about the configuration of the dock and the layout of the page, nevertheless you could add a check that ensures the value set as parameter to the set_top method is not negative. If this does not help, I will need more detailed information about what actually happens with the dock and a fully runnable sample page that isolates the problematic scenario.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  3. DevCraft R3 2016 release webinar banner
  4. Bhanu
    Bhanu avatar
    41 posts
    Member since:
    Jul 2010

    Posted 16 Dec 2014 Link to this post

    We have "Approve" and "Reject" buttons on the bottom of the aspx page. 
    On Reject button click, we are showing the raddock to select reject reason details on top of the "Approve" and "Reject" buttons exactly.
    Once the Raddock is displayed, restrict users to see "Approve" & "Reject" buttons until reject reason is selected on the reject raddock.

    That's why, the bottom part of raddock should be fixed so that users won't see "Approve" and "Reject" buttons when raddock is displayed.
    But "lblRejectItems" can have 30 lines of text or more to display on the raddock.

    By using the dock.set_left() and dock.set_top(), we are showing the raddock on top of 

    Here is the Raddock definition.

     <telerik:RadDock ID="RejectRadDock" runat="server" DefaultCommands="None" Pinned="true" Closed="true" DockHandle="None">
                    <asp:Label ID="lblRejectItems" runat="server"></asp:Label>
                    <asp:Label ID="lblRejectionReasonCodeText" runat="server" Text="Reject Reason Code:"></asp:Label>
                    <telerik:RadComboBox ID="rejectReasonCodeComboBox" EnableLoadOnDemand="true" runat="server" DataValueField="ReasonId" DataTextField="ReasonCode" CssClass="RejectCodeDD">
                    <asp:Label ID="lblCommentsText" runat="server" Text="Comments (Optional):" CssClass="RejectCommentField"></asp:Label>
                    <span class="RejectButtons">
                        <telerik:RadTextBox ID="rejectReasonCommentsTextBox" MaxLength="200" runat="server" TextMode="MultiLine" CssClass="RejectCommentInput"></telerik:RadTextBox>
                        <asp:LinkButton ID="cancelButton" runat="server" ToolTip="Cancel" CssClass="black-button pcb CancelButton" >
                    <asp:LinkButton ID="rejectButton" runat="server" ToolTip="OK" CssClass="black-button pcb OKButton" OnClick="RejectButton_Click" >

    We are displaying the raddock using the below javascript function on "Reject" button click.

    function ShowRejectRadDock() {  
                var dock = $find('<%= RejectRadDock.ClientID%>');
                var isClosed = dock.get_closed();
                if (isClosed) {
                    dock.set_left((document.body.clientWidth - parseInt(dock.get_width())) / 2);
                    dock.set_top(document.body.clientHeight - 160);}

    Please let me know how to achieve the required functionality.

  5. Danail Vasilev
    Danail Vasilev avatar
    1476 posts

    Posted 19 Dec 2014 Link to this post

    Hello Bhanu,

    I can suggest that you try the following approaches:
        - Instead of hiding the buttons behind the RadDock, wrap the buttons inside some HTML element (e.g., a div element) and switch the visibility of this wrapping element.
        - Use the $telerik.getBounds() method in order to obtain the height of the dock and based on it offset the control:

    var dockBounds = $telerik.getBounds($find('<%= RejectRadDock.ClientID%>').get_element());
    alert('width: ' + dockBounds.width + '\nheight: ' + dockBounds.height);

    You may also find useful the Telerik Static Client Library help article.

         - Consider using a modal Window. You may find useful the Differences From Telerik RadDock help article.

    Danail Vasilev

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

Back to Top