如何使用JavaScript和CSS Grid根据屏幕/视口大小使RadWindow响应

Question

I've been looking for a solution to make a Telerik RadWindow work responsively. There are two things that need to be responsive, the contents in the RadWindow, and the RadWindow itself.

Problem:

Per Telerik: " RadWindow does not support responsive size change and it does not change size automatically according to the viewport, because the behavior in such a scenario cannot be strictly defined "

Answer 1

Solution: (The contents inside the RadWindow need to be responsive, as does the RadWindow itself)

RadWindow Contents: I used CSS Grid to make the contents of the RadWindow responsive in this example.

        .sectionSearch {
            display: grid;
            grid-gap: 3px;
            grid-template-columns: repeat(auto-fit, 200px);
            align-items: end;
            max-width: 809px;
        }

RadWindow Responsiveness:

The viewport can be set to a percentage of the screen, per this article. You can then use JavaScript media queries to adjust the percentages of the height and width of the viewport, depending on the size of the screen.

Using a combination and modification of a few posts, including this one, the following sample solution worked for my needs of making a RadWindow responsive.

          var $ = $telerik.$;
        var radwindow;

        function pageLoad() {
            radwindow = $find("<%= radwindow.ClientID%>");
        }

        $(window).resize(function () {
            if (radwindow.isVisible()) {
                setWindowsize();
            }
        });

        function setWindowsize() {

            //var viewportWidth = $(window).width();
            //var viewportHeight = $(window).height();

            /* ==================================================== */

            // media query event handler
            if (matchMedia) {
                var mqls = [ // array of media queries
                    window.matchMedia("(min-width: 0px) and (max-width: 399px)"),
                    window.matchMedia("(min-width: 400px) and (max-width: 600px)"),
                    window.matchMedia("(min-width: 600px) and (max-width: 800px)"),
                    window.matchMedia("(min-width: 800px) and (max-width: 1000px)"),
                    window.matchMedia("(min-width: 1000px) and (max-width: 4000px)")
                ]

                for (i = 0; i < mqls.length; i++) { // loop though media queries
                    mqls[i].addListener(WidthChange); // listen for queries
                    WidthChange(mqls[i]); // call handler func at runtime
                }
            }

            // media query change
            function WidthChange(mql) {

                if (mqls[0].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 90 / 100));
                } else if (mqls[1].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 60 / 100));
                } else if (mqls[2].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 40 / 100));
                } else if (mqls[3].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 90 / 100), Math.ceil(viewportHeight * 40 / 100));
                } else if (mqls[4].matches) {
                    var viewportWidth = $(window).width();
                    var viewportHeight = $(window).height();
                    radwindow.setSize(Math.ceil(viewportWidth * 70 / 100), Math.ceil(viewportHeight * 45 / 100));
                }
            }
                radwindow.center();
            }