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

Adaptive Settings

The increasing variety of mobile devices requires an adaptive rendering for your application that covers all different screen resolutions and ensures a smooth user experience. You can customize the adaptive rendering of the Kendo UI for Angular components by modifying the default adaptive breakpoints or updating them at runtime.

The following example demonstrates how to customize the adaptive settings of the Kendo UI for Angular DatePicker.

Change Theme

Theme

Loading ...

Adaptive Settings Configuration

You can modify the default adaptive breakpoints used across the Kendo UI for Angular components globally by setting the following AdaptiveSettings properties:

small—Sets the horizontal screen width in pixels up to which the component will display as a full-screen modal. The default value is 500.
medium—Sets the horizontal screen width in pixels up to which the component will display as a docked-to-the-bottom modal. The default value is 768 and the small adaptive breakpoint is used as a lower boundary.

To configure the new adaptive settings globally, include the AdaptiveService in the providers array of the root component and use the ADAPTIVE_SETTINGS token to provide the AdaptiveSettings object as a value.

@Component({
    ...
    providers: [
        AdaptiveService, 
        { provide: ADAPTIVE_SETTINGS , useValue: { small: 600, medium: 850 } }
    ],
})

Changing the Adaptive Settings Dynamically

The following example demonstrates how to dynamically update the adaptive settings of the Kendo UI for Angular DatePicker.

Change Theme

Theme

Loading ...

If you need to dynamically modify any of the adaptive breakpoints in your application at runtime, use the following approach:

Include the AdaptiveSettingsService in the providers array of the root component.

@Component({
    ...
    providers: [
        AdaptiveService, 
        AdaptiveSettingsService, 
        { provide: ADAPTIVE_SETTINGS , useValue: { small: 600, medium: 850 } }
    ],
})

Inject the AdaptiveSettingsService in the constructor of the component.
ts
```
constructor(private adaptiveService: AdaptiveSettingsService) { }
```

Call the notify method exposed by the service and pass the new AdaptiveSettings object as an argument.

export class AppComponent {
    public adaptiveBreakpoints: AdaptiveSettings = { small: 600, medium: 850 };

    public changeAdaptiveBreakpoints(): void {
        this.adaptiveBreakpoints = { small: 750, medium: 1150 };
        this.adaptiveService.notify(this.adaptiveBreakpoints);
    }
}

Adaptive Settings

Adaptive Settings Configuration

Changing the Adaptive Settings Dynamically

Suggested Links