New to Kendo UI for jQuery? Start a free 30-day trial

MediaQuery

methods

Enables you to handle media queries in JavaScript using the MediaQueryList object. The method returns an object with the mediaQueryList field and the onChange, onEnter, onLeave, and destroy methods. The onChange, onEnter and onLeave methods accepts a callback function that will be executed when the media query is matched or not matched. The callback function will be passed a single argument - the MediaQueryListEvent instance and return the mediaQuery object that enables you to pipe more handlers.

The onChange method will be executed when the media query is matched or not matched. The onEnter method will be executed when the media query is matched and when the mediaQuery is initialized and media is matched. The onLeave method will be executed when the media query is not matched.

The destroy method will remove the event listeners and destroy the MediaQueryList instance. Note that developers should call the destroy method when the media query is no longer needed.

You can modify the default media queries for the adaptive components by modifying the breakpoints defined in kendo.defaults.breakpoints. The default break points are defined as:

kendo.defaults.breakpoints = { small: '(max-width: 700px)', medium: '(min-width: 700.1px) and (max-width: 768px)', large: '(min-width: 768.1px)' }

mediaQuery

Parameters:mediaString

The media query that will create the MediaQueryList instance.

Returns:Object

with the mediaQueryList field and the onChange, onEnter, onLeave and destroy methods.

<script>
    const mediaQueryListener = kendo.mediaQuery('(max-width: 500px)')
                                .onEnter(() => {
                                    console.log('entered 500px width');
                                });
</script>

<script>
    const mediaQueryListener = kendo.mediaQuery('(min-width: 500px) and (max-width: 1000px)')
                                .onChange(() => {
                                    console.log('changed screen width between 500px and 1000px');
                                })
                                .onEnter(() => {
                                    console.log('entered screen width between 500px and 1000px');
                                })
                                .onEnter(() => {
                                    // some other logic
                                })
                                .onLeave(() => {
                                    console.log('left screen width between 500px and 1000px');
                                });
</script>

<script>
    const mediaQueryListener = kendo.mediaQuery('(min-width: 500px) and (max-width: 1000px)')
                                .onEnter(() => {
                                    console.log('entered screen width between 500px and 1000px');
                                });

    mediaQueryListener.destroy();
</script>

    <input id="dropdownlist"/>
    <script>
      let defaultBreakpoints = {
        small: '(max-width: 2000px)',
        medium: '(min-width: 2000px) and (max-width: 2800px)',
        large: '(min-width: 2800px)'
      }

      kendo.setDefaults('breakpoints', defaultBreakpoints);

      $("#dropdownlist").kendoDropDownList({
        adaptiveMode:"auto",
        dataSource: ["Item1", "Item2"],
        value: "Item1"
      });
    </script>