mediaQuery

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)' }

Parameters

media String

The media query that will create the MediaQueryList instance.

Returns

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

Example - Using a string

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

Example - Piping more handlers

<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>

Example - Destroying the media query listener

<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>

Example - Modify the default breakpoints for the the adaptive components

    input

      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>