Stacked Layout Mode
The stacked layout mode in the Kendo UI for Angular Grid provides an adaptive, card-like display for component data, ensuring optimal performance and usability across various screen sizes.
By default, the Grid renders its content in a table-like structure with columns for the various properties of the data and a designated header element. On the other hand, the stacked layout mode visualizes each record as a block with field labels and values. This makes it ideal for delivering a consistent and user-friendly experience across desktop and mobile environments.
The following example demonstrates how to enable the stacked display mode for the Grid.
Configuring the Layout
The Grid exposes a designated dataLayoutMode property that allows you to configure the component display mode.
The property accepts a value of either of the following types:
DataLayoutMode—allows you to choose between the traditional columns layout and the stacked display mode.DataLayoutModeSettings—gives you a more fine-grained control over the Grid layout. The interface provides the following properties:mode—configures the display mode.stackedCols—controls the number of columns and their width in the Grid when in stacked mode.
The following example demonstrates how to configure the stacked layout using the DataLayoutModeSettings interface.
Toggling the Layout Mode
The Grid enables you to dynamically switch between its standard column-based layout and the adaptive stacked layout mode. This flexibility allows you to optimize the display for different devices or preferences, ensuring a seamless user experience.
The following example demonstrates how to programmatically change the Grid display mode.
Supported Features
The stacked display mode supports most of the standard Grid functionalities:
-
Data Rendering—All data is rendered in a card-like format, with each record displayed as a separate block. Field names appear as labels next to their corresponding values.
-
Filtering, Sorting, and Grouping—By default, the stacked layout does not render a designated header element that allow the user to perform these features. To enable these features in stacked mode, you can use the built-in Toolbar tools.
-
Paging—Paging is fully supported in stacked layout mode, allowing users to efficiently navigate through large sets of data one page at a time.
-
Selection—The stacked layout mode only supports row selection. To enable a feature allowing the selection of all records inside the Grid, you can use the built-in
SelectAllToolbarToolComponent. -
Export—Both the PDF and Excel Export functionalities are supported.
-
Editing—All types of editing are supported in stacked display mode:
- Inline editing - Fields are edited directly within the stacked layout.
- In-cell editing - Individual cells can be edited.
- External editing - A Dialog appears for editing the record.