@progress/kendo-angular-listview/listview.component.d.ts

Kendo UI Angular listview component

/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import { EventEmitter, NgZone, Renderer2, ElementRef, SimpleChanges, QueryList, ChangeDetectorRef, AfterViewInit, OnDestroy, OnChanges } from '@angular/core';
import { NavigationService } from './navigation/navigation.service';
import { ListViewNavigableItemDirective } from './navigation/listview-navigable-item.directive';
import { ItemTemplateDirective } from './templates/item-template.directive';
import { HeaderTemplateDirective } from './templates/header-template.directive';
import { FooterTemplateDirective } from './templates/footer-template.directive';
import { LoaderTemplateDirective } from './templates/loader-template.directive';
import { ScrollBottomEvent } from './models/scroll-bottom-event';
import { PageChangeEvent } from './models/page-change-event';
import { PageSizeChangeEvent } from './models/page-size-change-event';
import { PagerSettings } from './models/pager-settings';
import { ListViewDataResult } from './models/listview-data-result';
import { EditTemplateDirective } from './editing/edit-template.directive';
import { EditService } from './editing/edit.service';
import { EditEvent } from "./editing/events/edit-event-args.interface";
import { RemoveEvent } from "./editing/events/remove-event-args.interface";
import { SaveEvent } from "./editing/events/save-event-args.interface";
import { CancelEvent } from "./editing/events/cancel-event-args.interface";
import { AddEvent } from "./editing/events/add-event-args.interface";
import * as i0 from "@angular/core";
/**
 * Represents the Kendo UI ListView component for Angular.
 * Displays a list of data items and supports paging, editing, and custom templates
 * ([see overview]({% slug overview_listview %})).
 *
 * @example
 * ```typescript
 * @Component({
 *   selector: 'my-app',
 *   template: `
 *     <kendo-listview
 *       [data]="items"
 *       [pageable]="true"
 *       [pageSize]="5">
 *       <ng-template kendoListViewItemTemplate let-dataItem>
 *         <div class="item">
 *           <h3>{{ dataItem.name }}</h3>
 *           <p>{{ dataItem.description }}</p>
 *         </div>
 *       </ng-template>
 *     </kendo-listview>
 *   `
 * })
 * export class AppComponent {
 *   items = [
 *     { name: 'Item 1', description: 'First item' },
 *     { name: 'Item 2', description: 'Second item' }
 *   ];
 * }
 * ```
 */
export declare class ListViewComponent implements AfterViewInit, OnChanges, OnDestroy {
    ngZone: NgZone;
    element: ElementRef;
    renderer: Renderer2;
    private changeDetectorRef;
    editService: EditService;
    private navigationService;
    /**
     * @hidden
     */
    className: boolean;
    /**
     * @hidden
     */
    itemTemplate: ItemTemplateDirective;
    /**
     * @hidden
     */
    headerTemplate: HeaderTemplateDirective;
    /**
     * @hidden
     */
    footerTemplate: FooterTemplateDirective;
    /**
     * @hidden
     */
    loaderTemplate: LoaderTemplateDirective;
    /**
     * @hidden
     */
    contentContainer: ElementRef<HTMLElement>;
    /**
     * @hidden
     */
    editTemplate: EditTemplateDirective;
    /**
     * @hidden
     */
    listViewItems: QueryList<ListViewNavigableItemDirective>;
    /**
     * Specifies if a border should be rendered around the listview element.
     *
     * @default false
     */
    bordered: boolean;
    /**
     * Specifies the data collection that populates the ListView
     * ([see data binding examples]({% slug paging_listview %})).
     */
    set data(value: any[] | ListViewDataResult | undefined);
    get data(): any[] | ListViewDataResult | undefined;
    /**
     * Specifies whether the loading indicator of the ListView displays
     * ([see example]({% slug paging_listview %}#toc-remote-binding)).
     *
     * @default false
     */
    loading: boolean;
    /**
     * Specifies the CSS styles that render on the content container element of the ListView.
     * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
     */
    containerStyle?: {
        [key: string]: string;
    };
    /**
     * Specifies the CSS styles that render on each item element wrapper of the ListView.
     * Supports the type of values that [`ngStyle`](link:site.data.urls.angular['ngstyleapi']) supports.
     */
    itemStyle?: {
        [key: string]: string;
    };
    /**
     * Specifies the CSS class that renders on the content container element of the ListView.
     * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
     */
    containerClass?: string | string[] | Set<string> | {
        [key: string]: boolean;
    };
    /**
     * Specifies the CSS class that renders on each item element wrapper of the ListView.
     * Supports the type of values that [`ngClass`](link:site.data.urls.angular['ngclassapi']) supports.
     */
    itemClass?: string | string[] | Set<string> | {
        [key: string]: boolean;
    };
    /**
     * Specifies the content container `aria-label` attribute
     * ([see example]({% slug accessibility_listview %}#toc-accessible-names)).
     */
    containerLabel?: string;
    /**
     * Specifies the content container `role` attribute
     * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
     *
     * @default 'list'
     */
    containerRole: string;
    /**
     * Specifies the list item `role` attribute
     * ([more details]({% slug accessibility_listview %}#toc-wai-aria-support)).
     *
     * @default 'listitem'
     */
    listItemRole: string;
    /**
     * Specifies whether keyboard navigation is enabled
     * ([see example]({% slug keyboard_navigation_listview %})).
     *
     * @default true
     */
    set navigable(navigable: boolean);
    get navigable(): boolean;
    /**
     * Specifies the page size used by the ListView pager
     * ([more details]({% slug paging_listview %})).
     */
    pageSize?: number;
    /**
     * Defines the number of records to be skipped by the pager
     * ([more details]({% slug paging_listview %})).
     */
    set skip(skip: number);
    get skip(): number;
    /**
     * Configures whether the ListView renders a pager
     * ([more details]({% slug paging_listview %})).
     * When you provide a boolean value, it renders a pager with the default settings.
     */
    set pageable(pageable: boolean | PagerSettings);
    get pageable(): boolean | PagerSettings;
    /**
     * Specifies the height (in pixels) of the ListView component.
     * When the content height exceeds the component height, a vertical scrollbar renders.
     *
     * To set the height of the ListView, you can also use `style.height`. The `style.height`
     * option supports units such as `px`, `%`, `em`, `rem`, and others.
     */
    height?: number;
    /**
     * Fires when you scroll to the last record on the page
     * ([see endless scrolling example]({% slug scrollmodes_listview %}#toc-endless-scrolling)).
     */
    scrollBottom: EventEmitter<ScrollBottomEvent>;
    /**
     * Fires when you change the page or the page size of the ListView
     * ([see example]({% slug paging_listview %}#toc-remote-binding)).
     * You have to handle the event yourself and page the data.
     */
    pageChange: EventEmitter<PageChangeEvent>;
    /**
     * Fires when you change the page size of the ListView. You can prevent this event (`$event.preventDefault()`).
     * When not prevented, the `pageChange` event fires subsequently.
     */
    pageSizeChange: EventEmitter<PageSizeChangeEvent>;
    /**
     * Fires when you click the **Edit** command button to edit an item
     * ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
     */
    edit: EventEmitter<EditEvent>;
    /**
     * Fires when you click the **Cancel** command button to close an item
     * ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
     */
    cancel: EventEmitter<CancelEvent>;
    /**
     * Fires when you click the **Save** command button to save changes in an item
     * ([see example]({% slug editing_template_forms_listview %}#toc-saving-records)).
     */
    save: EventEmitter<SaveEvent>;
    /**
     * Fires when you click the **Remove** command button to remove an item
     * ([see example]({% slug editing_template_forms_listview %}#toc-removing-records)).
     */
    remove: EventEmitter<RemoveEvent>;
    /**
     * Fires when you click the **Add** command button to add a new item
     * ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
     */
    add: EventEmitter<AddEvent>;
    /**
     * @hidden
     */
    pagerSettings: PagerSettings;
    /**
     * @hidden
     *
     * Gets the data items passed to the ListView.
     * If a `ListViewDataResult` is passed, the data value is used. If an array is passed - it's directly used.
     */
    get items(): any[];
    /**
     * @hidden
     *
     * Gets the total number of records passed to the ListView.
     * If a `ListViewDataResult` is passed, the total value is used. If an array is passed - its length is used.
     */
    get total(): number;
    /**
     * @hidden
     */
    get containerTabindex(): number;
    /**
     * Gets the current active item index
     * ([see example]({% slug keyboard_navigation_listview %}#toc-controlling-the-focus)).
     * Returns `null` when keyboard navigation is disabled.
     */
    get activeIndex(): number;
    private removeNavigationListeners;
    private _skip;
    private _navigable;
    private _pageable;
    private lastScrollTop;
    private _data;
    private editServiceSubscription;
    constructor(ngZone: NgZone, element: ElementRef, renderer: Renderer2, changeDetectorRef: ChangeDetectorRef, editService: EditService, navigationService: NavigationService);
    ngAfterViewInit(): void;
    ngOnChanges(changes: SimpleChanges): void;
    ngOnDestroy(): void;
    /**
     * @hidden
     */
    templateContext(index: number): any;
    /**
     * @hidden
     */
    editTemplateContext(index: number): any;
    /**
     * Focuses the item at the specified index ([see example]({% slug keyboard_navigation_listview %}#toc-controlling-the-focus)):
     * - When you specify no index, the current active index receives focus.
     * - When the passed value is below `0`, the first item receives focus.
     * - When the passed value is above the last available index, the last item receives focus.
     *
     * > The `index` parameter is based on the logical structure of the ListView and does not correspond to the data item index&mdash
     * > the index `0` corresponds to the first rendered list item. Paging is not taken into account.
     * > Also, the `navigable` property must first be set to `true` for the method to work as expected.
     */
    focus(index?: number): void;
    /**
     * Creates a new item editor ([see example]({% slug editing_template_forms_listview %}#toc-adding-records)).
     *
     * @param {FormGroup} group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi']) that describes
     * the edit form. When called with a data item, it builds the `FormGroup` from the data item fields.
     */
    addItem(group: any): void;
    /**
     * Switches the specified item to edit mode ([see example]({% slug editing_template_forms_listview %}#toc-editing-records)).
     *
     * @param index - The item index that switches to edit mode.
     * @param group - The [`FormGroup`](link:site.data.urls.angular['formgroupapi'])
     * that describes the edit form.
     */
    editItem(index: number, group?: any): void;
    /**
     * Closes the editor for a given item ([see example]({% slug editing_template_forms_listview %}#toc-cancelling-editing)).
     *
     * @param {number} index - The item index that switches out of the edit mode. When you provide no index, the editor of the new item will close.
     */
    closeItem(index?: number): void;
    /**
     * @hidden
     */
    isEdited(index: number): boolean;
    /**
     * @hidden
     */
    handlePageChange(event: PageChangeEvent): void;
    /**
     * @hidden
     */
    handleContentScroll: () => void;
    /**
     * @hidden
     */
    itemPosInSet(index: number): number;
    private scrollToContainerTop;
    private addNavigationListeners;
    private attachEditHandlers;
    private emitCRUDEvent;
    static ɵfac: i0.ɵɵFactoryDeclaration<ListViewComponent, never>;
    static ɵcmp: i0.ɵɵComponentDeclaration<ListViewComponent, "kendo-listview", ["kendoListView"], { "bordered": { "alias": "bordered"; "required": false; }; "data": { "alias": "data"; "required": false; }; "loading": { "alias": "loading"; "required": false; }; "containerStyle": { "alias": "containerStyle"; "required": false; }; "itemStyle": { "alias": "itemStyle"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "itemClass": { "alias": "itemClass"; "required": false; }; "containerLabel": { "alias": "containerLabel"; "required": false; }; "containerRole": { "alias": "containerRole"; "required": false; }; "listItemRole": { "alias": "listItemRole"; "required": false; }; "navigable": { "alias": "navigable"; "required": false; }; "pageSize": { "alias": "pageSize"; "required": false; }; "skip": { "alias": "skip"; "required": false; }; "pageable": { "alias": "pageable"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, { "scrollBottom": "scrollBottom"; "pageChange": "pageChange"; "pageSizeChange": "pageSizeChange"; "edit": "edit"; "cancel": "cancel"; "save": "save"; "remove": "remove"; "add": "add"; }, ["itemTemplate", "headerTemplate", "footerTemplate", "loaderTemplate", "editTemplate"], never, true, never>;
}