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

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

3 Answers 70 Views
Dock
This is a migrated thread and some comments may be shown as answers.
Bhanu
Top achievements
Rank 1
Bhanu asked on 12 Dec 2014, 06:59 AM
Hi,

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 ?


Thanks
Bhanu.

3 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 13 Dec 2014, 02:45 PM
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.

Regards,
Slav
Telerik
 

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.

 
0
Bhanu
Top achievements
Rank 1
answered on 16 Dec 2014, 02:02 PM

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">
            <ContentTemplate>
                <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">
                </telerik:RadComboBox>
                <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" >
 <span>Cancel</span>
                    </asp:LinkButton>
                </span>
                <asp:LinkButton ID="rejectButton" runat="server" ToolTip="OK" CssClass="black-button pcb OKButton" OnClick="RejectButton_Click" >
 <span>OK</span>
                </asp:LinkButton>
            </ContentTemplate>
        </telerik:RadDock>

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_closed(!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.

0
Danail Vasilev
Telerik team
answered on 19 Dec 2014, 10:27 AM
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.


Regards,
Danail Vasilev
Telerik
 

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.

 
Tags
Dock
Asked by
Bhanu
Top achievements
Rank 1
Answers by
Slav
Telerik team
Bhanu
Top achievements
Rank 1
Danail Vasilev
Telerik team
Share this question
or