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.
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 is500
.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 is768
and thesmall
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 } }
],
})
The following example demonstrates how to customize the adaptive settings of the Kendo UI for Angular DatePicker.
Changing the Adaptive Settings Dynamically
If you need to dynamically modify any of the adaptive breakpoints in your application at runtime, use the following approach:
-
Include the
AdaptiveSettingsService
in theproviders
array of the root component.ts@Component({ ... providers: [ AdaptiveService, AdaptiveSettingsService, { provide: ADAPTIVE_SETTINGS , useValue: { small: 600, medium: 850 } } ], })
-
Inject the
AdaptiveSettingsService
in the constructor of the component.tsconstructor(private adaptiveService: AdaptiveSettingsService) { }
-
Call the
notify
method exposed by the service and pass the newAdaptiveSettings
object as an argument.tsexport class AppComponent { public adaptiveBreakpoints: AdaptiveSettings = { small: 600, medium: 850 }; public changeAdaptiveBreakpoints(): void { this.adaptiveBreakpoints = { small: 750, medium: 1150 }; this.adaptiveService.notify(this.adaptiveBreakpoints); } }
The following example demonstrates how to dynamically update the adaptive settings of the Kendo UI for Angular DatePicker.