set radwindow size in percent

[Kevin]

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();
            }
        }

[Shinu]

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.

[J]

How could this be modified if there were, say 4 RadWindows on the page please?

[Rumen]

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

[J]

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();
            }

[Rumen]

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

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

• How-to create a javascript array of all particular RadControls on the page
• Get Client-side Reference to a Control Object
• Access Telerik Controls on Client-Side

  Best regards, Rumen
Progress Telerik