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

set radwindow size in percent

5 Answers 268 Views
Window
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 21 Aug 2013, 01:37 PM

Trying to set the radwindow to a percent of the screen size.  This way the user still knows its  a pop-up window and has to be closed apporpriately instead of thinking its a real window, found an example online but it does not work, so I though Telerik has done this somewhere, so here I am asking the question.

Here is what I have but nothing works.  I need to set it at about 90% of the screen size.

function SelectedName(source, eventArgs) {
            var txt = eventArgs.get_text();
            var val = eventArgs.get_value();
            var radWidow = $find("<%= RadWindow.ClientID%>");
            var textbox = document.getElementById("<%=txtSearch.ClientID%>");
 
            if (val == '') {
                alert('You must pick a recruit from drop down list.');
            }
            else {
                radWidow.show();
                radWidow.setUrl("ManageProcessor.aspx?Pass=" + val);
                var browserWidth = $telerik.$(window).width();
                var browserHeight = $telerik.$(window).height();
                radWidow.setSize(Math.ceil(browserWidth * value / 100), Math.ceil(browserHeight * value / 100));
                radWidow.center();
                textbox.value = '';
            }
           }
 
        function VerifyEnlist() {
            var Enlist = document.getElementById("<%=ddlEnlistment.ClientID%>").value;
            var radWidow = $find("<%= RadWindow.ClientID%>");
            if (Enlist == 4) {
                radWidow.show();
                radWidow.setUrl("WoTracker.aspx");
                var browserWidth = $telerik.$(window).width();
                var browserHeight = $telerik.$(window).height();
                radWidow.setSize(Math.ceil(browserWidth * value / 100), Math.ceil(browserHeight * value / 100));
                radWidow.center();
            }
            else {
                radWidow.show();
                radWidow.setUrl("ManageProcessor.aspx?Type=" + Enlist);
                var browserWidth = $telerik.$(window).width();
                var browserHeight = $telerik.$(window).height();
                radWidow.setSize(Math.ceil(browserWidth * value / 100), Math.ceil(browserHeight * value / 100));
                radWidow.center();
            }
        }

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 22 Aug 2013, 05:59 AM
Hi Kevin,

Please have a look at the following JavaScript code I tried to set the RadWindow size to 90% of its parent window size. Also note that by design, the RadWindow control does not accept values in percent and you need to use fixed values in its declaration.

ASPX:
<telerik:RadButton ID="RadButton1" runat="server" Text="Open RadWindow" OnClientClicked="openRadWindow"
    AutoPostBack="false">
</telerik:RadButton>
<telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="http://www.telerik.com">
</telerik:RadWindow>

JavaScript:
<script type="text/javascript">
    var $ = $telerik.$;
    var radwindow;
 
    function pageLoad() {
        radwindow = $find("<%= RadWindow1.ClientID%>");
    }
 
    function openRadWindow() {
        radwindow.show();
        setWindowsize();
    }
 
    $(window).resize(function () {
        if (radwindow.isVisible()) {
            setWindowsize();
        }
    });
 
    function setWindowsize() {
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();
        radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 90 / 100));
        radwindow.center();
    }
</script>

Thanks,
Shinu.
0
J
Top achievements
Rank 1
answered on 30 Oct 2018, 06:44 PM
How could this be modified if there were, say 4 RadWindows on the page please?
0
Rumen
Telerik team
answered on 31 Oct 2018, 03:56 PM
Hello,

You can use the client-side event handlers of all RadWindow controls to get a reference to their objects:

<script>
    var windows = [];
    var i = 0;
    function OnClientLoad(sender, args) {
        i++;
        windows[i] = sender; //this array contains references to the RadWindow objects and you can use them as per your requirements
    }
</script>
<telerik:RadWindow id="RadWindow1" runat="server" VisibleOnPageLoad="true" OnClientBeforeShow="OnClientLoad"></telerik:RadWindow>
<telerik:RadWindow id="RadWindow2" runat="server" VisibleOnPageLoad="true" OnClientBeforeShow="OnClientLoad"></telerik:RadWindow>
<telerik:RadWindow id="RadWindow3" runat="server" VisibleOnPageLoad="true" OnClientBeforeShow="OnClientLoad"></telerik:RadWindow>

Best regards,
Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
J
Top achievements
Rank 1
answered on 31 Oct 2018, 05:25 PM

Thank you!

An option that worked was as to put the following (or similar) code in for each radWindow function:

            function ShowTest() {
                var oWnd = $find("<%= radWinTest.ClientID %>");
                var myValue = "<%= StudentID %>";
                var browserWidth = $telerik.$(window).width();
                var browserHeight = $telerik.$(window).height();
                if (browserWidth < 1024) { var valueWidth = 85; var valueHeight = 85; }
                else if (browserWidth >= 1024) { var valueWidth = 50; var valueHeight = 80; };
                oWnd.setSize(Math.ceil(browserWidth * valueWidth / 100), Math.ceil(browserHeight * valueHeight / 100));
                oWnd.setUrl("Test.aspx?TestID=" + escape(myValue));
                oWnd.center();
                oWnd.show();
            }
0
Rumen
Telerik team
answered on 01 Nov 2018, 02:19 PM

I am glad you found the best solution for your scenario.

For the fellow developers, I'd like to also share these articles



  Best regards, Rumen
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Tags
Window
Asked by
Kevin
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
J
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or