Как сделать RadWindow адаптивным на основе размера экрана / области просмотра с использованием JavaScript и CSS Grid - PullRequest
Новая
       38

Как сделать RadWindow адаптивным на основе размера экрана / области просмотра с использованием JavaScript и CSS Grid

0 голосов
/ 10 сентября 2018

Я искал решение, чтобы заставить Telerik RadWindow работать быстро.Необходимо реагировать на две вещи: содержимое RadWindow и собственно RadWindow.

Проблема:

За Telerik: « RadWindow не поддерживает адаптивное изменение размера и не меняет размер автоматически в соответствии с областью просмотра, поскольку поведение в таком сценарии нельзя строго определить »

1 Ответ

0 голосов
/ 10 сентября 2018

Решение: (содержимое в RadWindow должно быть отзывчивым, как и само RadWindow)

Содержимое RadWindow: Я использовал CSS Grid, чтобы сделать содержимое RadWindow отзывчивым в этом примере. 

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

Отзывчивость RadWindow:

Окно просмотра может быть установлено в процентах от экрана, для этой статьи . Затем вы можете использовать медиазапросы JavaScript для настройки процентного соотношения высоты и ширины области просмотра в зависимости от размера экрана.

Используя комбинацию и модификацию нескольких сообщений, включая эту , следующее примерное решение помогло мне сделать отзывчивым RadWindow. 

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