Kendo UI for Angular


Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The Kendo UI for Angular Grid is one of the most powerful data grid components available for Angular developers. Built from the ground up for Angular and with focus on performance, the Angular Data Grid contains must-have features, including paging, sorting, filtering, grouping and editing. For scenarios that require handling hundreds of thousands of data items, the Angular Data Table supports rendering large datasets thanks to row and column virtualization. The Angular Grid provides more essential features, such as resizing and reordering of columns, displaying hierarchical data, context menus that appear when right-clicking on a row, column menus to provide additional functionality on a column-by-column basis, as well as custom templates.

    See Angular Grid Overview demo.

  • Grouping and Aggregates

    Users can drag and drop columns in the Kendo UI for Angular Grid to group them by field. This is not limited to a single column and there is no limit to the number of groups and subgroups that can be defined. When grouped, each group can be expanded or collapsed by users clicking on the appropriate expand/collapse icons. Each group can also provide aggregate information in both a header and a footer area and each group can be sorted in an ascending or descending order.

    See Angular Grid Grouping and Aggregates demo.

  • Filtering

    With the out-of-the-box filtering feature of the Kendo UI for Angular Grid, users can quickly slice and dice the data bound to the Angular Data Table with ease. Filtering can be done through a dedicated filter row, which displays a dedicated row just for filters, or through a filter menu that pops up when clicking on a filter icon in the header of a column. The Angular Data Grid can also be extended to provide a custom component to handle filtering, allowing you to have full control over the user experience.

    See Angular Grid Filtering demos.

  • Sorting

    Enable users to sort data items in the Angular Data Table in an ascending or descending order with the Kendo UI for Agular sorting function. Users can click on the column header to cycle through sorting in an ascending, descending or no sort order. You can also allow users to sort a single or multiple columns or disable sorting on a column-by-column basis. Developers can also render the Angular Data Grid with pre-sorted data, defining which columns to sort and in which order ahead of time.

    See Angular Grid Sorting demo.

  • Editing

    There are various ways user can edit data items in the Kendo UI for Angular Grid. They can edit row by row through a dedicated edit button, edit individual cells by clicking on them or use an external form to edit the currently selected item. The Angular Grid can then work with any Angular service layer to persist changes back to a database.

    See Angular Grid Editing demo.

  • Selection

    The Kendo UI for Angular Grid features selection in multiple forms, including single row and multi-row selection. You can enable users to select an individual row through clicking on it, select multiple rows by CTRL-clicking on them or through a column of dedicated checkboxes.

    See Angular Grid Selection demos.

  • Custom Cells

    By default, the Kendo UI for Angular Grid displays information in text format and has built-in editors to handle data items when in edit mode. To give cells a unique look and feel, both the read view and edit view of each cell in the Angular Grid can be passed an Angular template.

    See Angular Grid Custom Cells demo.

  • Hierarchy

    With the built-in Hierarchy feature, the Kendo UI for Angular Grid can showcase multiple Angular Data Tables in a parent-child relationship. The hierarchy allows for each Angular Data Table to have its own unique set of features enabled (like sorting, paging, filtering, etc.) based on the data it should display. With no limit for now deep the hierarchy can go, the Angular Data Grid is perfect for displaying any type of related data tables.

    See Angular Grid Hierarchy demo.

  • Detail Rows

    In addition to its capability to display data in a parent-child relationship, the Kendo UI for Angular Grid can display a unique detail row with a completely customized layout. By passing in an Angular template, you have full control over what additional information should be displayed and how. Just like with a hierarchy, the detail rows of the angular Data Table can be expanded or collapsed on a row-by-row basis.

    See Angular Grid Detail Rows demo.

  • Column Interactions

    The Kendo UI for Angular Grid provides built-in functionality for various column interactions. Users can toggle between showing or hiding columns, resize and reorder columns, drag columns to be grouped and more. These options can be applied across all columns or defined on a column-by-column basis.

    See Angular Grid Column Interactions demos.

  • Multi-Header Columns

    Multi-header columns allow for columns to be rendered in a hierarchical fashion, providing parent column headers that span over single or several columns. With the Kendo UI for Angular Grid, there is no limit to how many parent headers are configured, and just like individual columns, headers can be reordered or resized, which will apply to the underlying headers as well.

    See Angular Grid Multi-Header Columns demo.

  • Frozen Columns

    The Kendo UI for Angular Grid allows for frozen columns (also known as locked columns) to be configured upon initial rendering or on –the fly. Columns can be added to the left-hand side or right-hand side of the Angular Data Table.

    See Angular Grid Frozen Columns demo.

  • Row and Column Virtualization

    Virtualization is critical to successfully bind and display large datasets with hundreds of thousands of data items. The Angular Data Grid supports both row virtualization and column virtualization, letting users maintain a buttery smooth scrolling experience in both horizontal and vertical scrolling.

    See Angular Grid Virtualization demo.

  • Paging

    Easily break down large data sets into pages to deliver an optimal user experience with higher performance. With its built-in Paging mechanism, the Kendo UI for Angular Grid offers users to page through data with a specific page size, which can be updated both by the user and programmatically by the developer. Though intuitive controls, users can navigate to the next and previous pages or jump to a specific page by selecting its number. Paging in the Angular Data Grid can be enabled by setting a single configuration to true and can also be deeply customized through additional options.

    See Angular Grid Paging demo.

  • Export to Excel and PDF

    The Kendo UI for Angular Grid integrates with both the Angular Excel Export package and the Angular PDF Export package found in the Kendo UI for Angular library. Through this integration, the content of the Angular Data Table can be exported to either an Excel file or a PDF file with a single button click. For scenarios that require some customization of the exported files, the Angular Data Grid provides a large set of configuration options to ensure any exported file fulfills all requirements.

    See Angular Grid Export to Excel and PDF demos.

  • Keyboard Navigation

    Even though the Kendo UI for Angular Grid is an extremely powerful component with a huge range of features, users can quickly and easily navigate through every element of the Angular Data Table using keyboard navigation. This also extends to the CRUD operations of the Angular Data Grid, allowing users to quickly manipulate data using just their keyboard.

    See Angular Grid Keyboard Navigation demo.

  • Accessibility

    The Kendo UI for Angular Grid is AAA rated with WCAG 2.0 and is compliant with Section 508 and WAI-ARIA standards.

    See Angular Grid Accessibility demo.

Kendo Angular UI Getting Started Background

Get Started with Kendo UI for Angular

Kendo UI