@progress/kendo-angular-grid 13.0.0-develop.2 → 13.0.0-develop.21

package/esm2020/grid.component.mjs

@@ -75,6 +75,7 @@ import { SizingOptionsService } from './layout/sizing-options.service';
 import { guid } from '@progress/kendo-angular-common';
 import { DragTargetContainerDirective, DropTargetContainerDirective } from '@progress/kendo-angular-utils';
 import { RowReorderService } from './row-reordering/row-reorder.service';
+import { StatusBarTemplateDirective } from './aggregates/status-bar-template.directive';
 import * as i0 from "@angular/core";
 import * as i1 from "./layout/browser-support.service";
 import * as i2 from "./selection/selection.service";
@@ -109,15 +110,16 @@ import * as i30 from "./rendering/list.component";
 import * as i31 from "./rendering/footer/footer.component";
 import * as i32 from "./rendering/table-body.component";
 import * as i33 from "./rendering/common/loading.component";
-import * as i34 from "@progress/kendo-angular-icons";
-import * as i35 from "./localization/localized-messages.directive";
-import * as i36 from "@angular/common";
-import * as i37 from "./column-resizing/table.directive";
-import * as i38 from "./rendering/grid-table.directive";
-import * as i39 from "./layout/resizable.directive";
-import * as i40 from "@progress/kendo-angular-utils";
-import * as i41 from "@progress/kendo-angular-common";
-import * as i42 from "./selection/marquee.directive";
+import * as i34 from "./aggregates/status-bar.component";
+import * as i35 from "@progress/kendo-angular-icons";
+import * as i36 from "./localization/localized-messages.directive";
+import * as i37 from "@angular/common";
+import * as i38 from "./column-resizing/table.directive";
+import * as i39 from "./rendering/grid-table.directive";
+import * as i40 from "./layout/resizable.directive";
+import * as i41 from "@progress/kendo-angular-utils";
+import * as i42 from "@progress/kendo-angular-common";
+import * as i43 from "./selection/marquee.directive";
 const createControl = (source) => (acc, key) => {
     acc[key] = new FormControl(source[key]);
     return acc;
@@ -509,6 +511,12 @@ export class GridComponent {
     get group() {
         return this._group;
     }
+    /**
+     * @hidden
+     */
+    get showStatusBar() {
+        return !!(this.selectable);
+    }
     /**
      * @hidden
      */
@@ -742,6 +750,15 @@ export class GridComponent {
     set loadingTemplate(loadingTemplate) {
         this._loadingTemplate = loadingTemplate;
     }
+    get statusBarTemplate() {
+        if (this._statusBarTemplate) {
+            return this._statusBarTemplate;
+        }
+        return this.statusBarTemplateChildren ? this.statusBarTemplateChildren.first : undefined;
+    }
+    set statusBarTemplate(statusBarTemplate) {
+        this._statusBarTemplate = statusBarTemplate;
+    }
     get noRecordsTemplate() {
         if (this._customNoRecordsTemplate) {
             return this._customNoRecordsTemplate;
@@ -791,7 +808,7 @@ export class GridComponent {
         return this.groupable && this.groupable.showFooter;
     }
     get ariaRowCount() {
-        return this.totalColumnLevels + 1 + this.view.total;
+        return this.totalColumnLevels + 1 + this.view.total + (hasFilterRow(this.filterable) ? 1 : 0);
     }
     get ariaColCount() {
         return this.columnsContainer.leafColumnsToRender.length;
@@ -2003,7 +2020,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
         ContextService,
         SizingOptionsService,
         RowReorderService
-    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
+    ], queries: [{ propertyName: "columns", predicate: ColumnBase }, { propertyName: "detailTemplateChildren", predicate: DetailTemplateDirective }, { propertyName: "cellLoadingTemplateChildren", predicate: CellLoadingTemplateDirective }, { propertyName: "loadingTemplateChildren", predicate: LoadingTemplateDirective }, { propertyName: "statusBarTemplateChildren", predicate: StatusBarTemplateDirective }, { propertyName: "noRecordsTemplateChildren", predicate: NoRecordsTemplateDirective }, { propertyName: "pagerTemplateChildren", predicate: PagerTemplateDirective }, { propertyName: "toolbarTemplateChildren", predicate: ToolbarTemplateDirective }, { propertyName: "columnMenuTemplates", predicate: ColumnMenuTemplateDirective }], viewQueries: [{ propertyName: "lockedHeader", first: true, predicate: ["lockedHeader"], descendants: true }, { propertyName: "header", first: true, predicate: ["header"], descendants: true }, { propertyName: "ariaRoot", first: true, predicate: ["ariaRoot"], descendants: true, static: true }, { propertyName: "dragTargetContainer", first: true, predicate: DragTargetContainerDirective, descendants: true }, { propertyName: "dropTargetContainer", first: true, predicate: DropTargetContainerDirective, descendants: true }, { propertyName: "footer", predicate: ["footer"], descendants: true }], exportAs: ["kendoGrid"], usesOnChanges: true, ngImport: i0, template: `
         <ng-container kendoGridLocalizedMessages
             i18n-groupPanelEmpty="kendo.grid.groupPanelEmpty|The label visible in the Grid group panel when it is empty"
             groupPanelEmpty="Drag a column header and drop it here to group by that column"
@@ -2052,6 +2069,12 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
 
             i18n-filterMenuOperatorsDropDownLabel="kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown"
             filterMenuOperatorsDropDownLabel="{{ '{columnName} Filter Operators' }}"
+            
+            i18n-filterCellOperatorLabel="kendo.grid.filterCellOperatorLabel|The label of the filter cell operators dropdown"
+            filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
+
+            i18n-booleanFilterCellLabel="kendo.grid.booleanFilterCellLabel|The label of the boolean filter cell dropdown"
+            booleanFilterCellLabel="{{ 'Boolean filter cell for {columnName}' }}"
 
             i18n-filterMenuLogicDropDownLabel="kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown"
             filterMenuLogicDropDownLabel="{{ '{columnName} Filter Logic' }}"
@@ -2251,285 +2274,286 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
-        <kendo-pager
-            *ngIf="showTopPager"
-            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top k-pager"
-            [template]="pagerTemplate"
-            [pageSize]="pageSize"
-            [total]="view.total"
-            [skip]="skip"
-            [size]="size"
-            [options]="pageable"
-            (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-pager>
-        <kendo-grid-group-panel
-            *ngIf="showGroupPanel"
-            [navigable]="navigation.toolbarEnabled"
-            [text]="groupableEmptyText"
-            [groups]="group"
-            role="toolbar"
-            [attr.aria-label]="messageFor('groupPanelLabel')"
-            [attr.aria-controls]="ariaRootId"
-            (change)="groupChange.emit($event)">
-        </kendo-grid-group-panel>
-        <div #ariaRoot
-            class="k-grid-aria-root"
-            role="grid"
-            [id]="ariaRootId"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-rowcount]="ariaRowCount"
-            [attr.aria-colcount]="ariaColCount">
-        <ng-container *ngIf="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table
-                        [locked]="true"
+            <kendo-pager
+                *ngIf="showTopPager"
+                [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+                [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
+                class="k-grid-pager-top k-pager"
+                [template]="pagerTemplate"
+                [pageSize]="pageSize"
+                [total]="view.total"
+                [skip]="skip"
+                [size]="size"
+                [options]="pageable"
+                (pageChange)="notifyPageChange('pager', $event)">
+            </kendo-pager>
+            <kendo-grid-group-panel
+                *ngIf="showGroupPanel"
+                [navigable]="navigation.toolbarEnabled"
+                [text]="groupableEmptyText"
+                [groups]="group"
+                role="toolbar"
+                [attr.aria-label]="messageFor('groupPanelLabel')"
+                [attr.aria-controls]="ariaRootId"
+                (change)="groupChange.emit($event)">
+            </kendo-grid-group-panel>
+            <div #ariaRoot
+                class="k-grid-aria-root"
+                role="grid"
+                [id]="ariaRootId"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-rowcount]="ariaRowCount"
+                [attr.aria-colcount]="ariaColCount">
+            <ng-container *ngIf="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                    [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                        #lockedHeader
                         role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                        class="k-grid-header-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            role="rowgroup"
-                            [resizable]="resizable"
-                            [scrollable]="true"
-                            [columns]="$any(lockedColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [groups]="group"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                </div>
-                <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table
-                        role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="nonLockedWidth"
-                        [virtualColumns]="virtualColumns"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                            class="k-grid-header-table"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                role="rowgroup"
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [groups]="group"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
                             role="presentation"
-                            [columns]="headerLeafColumns"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            [resizable]="resizable"
-                            role="rowgroup"
-                            [scrollable]="true"
-                            [columns]="headerColumns"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [groups]="isLocked ? [] : group"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            class="k-grid-header-table"
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="headerLeafColumns"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                [resizable]="resizable"
+                                role="rowgroup"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [groups]="isLocked ? [] : group"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <kendo-grid-list
-                kendoDragTargetContainer
-                kendoDropTargetContainer
-                mode="manual"
-                [dragDisabled]="!rowReorderable"
-                [dropDisabled]="!rowReorderable"
-                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-                [dragHandle]="getDefaultSelectors('handle')"
-                [hint]="{hintTemplate: defaultHint}"
-                (press)="handleReorderEvents($event, 'press')"
-                (dragStart)="handleReorderEvents($event, 'dragStart')"
-                (drag)="handleReorderEvents($event, 'drag')"
-                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (drop)="handleReorderEvents($event, 'drop')"
-                [dragData]="gridData"
-                [data]="$any(view)"
-                [rowHeight]="rowHeight"
-                [detailRowHeight]="detailRowHeight"
-                [total]="totalCount"
-                [take]="pageSize"
-                [groups]="group"
-                [groupable]="groupable"
-                [skip]="skip"
-                [trackBy]="trackBy"
-                [columns]="columnsContainer"
-                [selectable]="selectable"
-                [filterable]="filterable"
-                [detailTemplate]="detailTemplate"
-                [noRecordsTemplate]="noRecordsTemplate"
-                [size]="size"
-                (pageChange)="notifyPageChange('list', $event)"
-                [rowClass]="rowClass"
-                [rowSticky]="rowSticky"
-                [loading]="loading"
-                [isVirtual]="isVirtual"
-                [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
-                [loadingTemplate]="loadingTemplate?.templateRef"
-                [virtualColumns]="virtualColumns"
-                (scrollBottom)="notifyScrollBottom()"
-                (contentScroll)="contentScroll.emit($event)"
-                kendoDraggable
-                kendoGridSelectionMarquee
-                [enableDrag]="marqueeSelection"
-                [sort]="sort"
-                >
-            </kendo-grid-list>
-            <div
-                *ngIf="showFooter"
-                class="k-grid-footer"
-                [style.padding]="headerPadding">
-                <div
-                    *ngIf="lockedLeafColumns.length"
-                    class="k-grid-footer-locked"
-                    [style.width.px]="lockedWidth">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [locked]="true"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [scrollable]="true"
-                            [groups]="group"
-                            [columns]="$any(lockedLeafColumns)"
-                            [detailTemplate]="detailTemplate"
-                            [logicalRowIndex]="ariaRowCount">
-                        </tfoot>
-                    </table>
-                </div>
-                <div #footer
-                    class="k-grid-footer-wrap" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [style.width.px]="nonLockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [logicalRowIndex]="ariaRowCount"
-                            [scrollable]="true"
-                            [groups]="isLocked ? [] : group"
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [detailTemplate]="detailTemplate">
-                        </tfoot>
-                    </table>
-                </div>
-            </div>
-        </ng-container>
-        <ng-container *ngIf="!isScrollable">
-            <table
-                [style.table-layout]="resizable ? 'fixed' : null"
-                kendoGridTable
-                [size]="size">
-                <colgroup kendoGridColGroup
-                    [columns]="$any(leafColumns)"
-                    [groups]="group"
-                    [detailTemplate]="detailTemplate">
-                </colgroup>
-                <thead kendoGridHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [groups]="group"
-                    [groupable]="showGroupPanel"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate"
-                    [detailTemplate]="detailTemplate"
-                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                </thead>
-                <tbody kendoGridTableBody
-                    [isLoading]="loading"
-                    [groups]="group"
+                <kendo-grid-list
+                    kendoDragTargetContainer
+                    kendoDropTargetContainer
+                    mode="manual"
+                    [dragDisabled]="!rowReorderable"
+                    [dropDisabled]="!rowReorderable"
+                    [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+                    [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+                    [dragHandle]="getDefaultSelectors('handle')"
+                    [hint]="{hintTemplate: defaultHint}"
+                    (onPress)="handleReorderEvents($event, 'press')"
+                    (onDragStart)="handleReorderEvents($event, 'dragStart')"
+                    (onDrag)="handleReorderEvents($event, 'drag')"
+                    (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+                    (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+                    (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+                    (onDrop)="handleReorderEvents($event, 'drop')"
+                    [dragData]="gridData"
                     [data]="$any(view)"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
+                    [groups]="group"
+                    [groupable]="groupable"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [selectable]="selectable"
                     [filterable]="filterable"
-                    [noRecordsTemplate]="noRecordsTemplate"
                     [detailTemplate]="detailTemplate"
-                    [showGroupFooters]="showGroupFooters"
-                    [trackBy]="trackBy"
+                    [noRecordsTemplate]="noRecordsTemplate"
+                    [size]="size"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [rowSticky]="rowSticky"
+                    [loading]="loading"
+                    [isVirtual]="isVirtual"
+                    [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
+                    [loadingTemplate]="loadingTemplate?.templateRef"
+                    [virtualColumns]="virtualColumns"
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"
                     kendoDraggable
                     kendoGridSelectionMarquee
-                    [enableDrag]="marqueeSelection">
-                </tbody>
-                <tfoot kendoGridFooter
+                    [enableDrag]="marqueeSelection"
+                    [sort]="sort">
+                </kendo-grid-list>
+                <div
                     *ngIf="showFooter"
-                    [scrollable]="false"
-                    [logicalRowIndex]="ariaRowCount"
-                    [groups]="group"
-                    [columns]="$any(leafColumns)"
-                    [detailTemplate]="detailTemplate">
-                </tfoot>
-            </table>
-        </ng-container>
-        <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
-        </div>
+                    class="k-grid-footer"
+                    [style.padding]="headerPadding">
+                    <div
+                        *ngIf="lockedLeafColumns.length"
+                        class="k-grid-footer-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [locked]="true"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [scrollable]="true"
+                                [groups]="group"
+                                [columns]="$any(lockedLeafColumns)"
+                                [detailTemplate]="detailTemplate"
+                                [logicalRowIndex]="ariaRowCount">
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div #footer
+                        class="k-grid-footer-wrap" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 3">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [logicalRowIndex]="ariaRowCount"
+                                [scrollable]="true"
+                                [groups]="isLocked ? [] : group"
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [detailTemplate]="detailTemplate">
+                            </tfoot>
+                        </table>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!isScrollable">
+                <table
+                    [style.table-layout]="resizable ? 'fixed' : null"
+                    kendoGridTable
+                    [size]="size">
+                    <colgroup kendoGridColGroup
+                        [columns]="$any(leafColumns)"
+                        [groups]="group"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <thead kendoGridHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [groups]="group"
+                        [groupable]="showGroupPanel"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                    </thead>
+                    <tbody kendoGridTableBody
+                        [isLoading]="loading"
+                        [groups]="group"
+                        [data]="$any(view)"
+                        [skip]="skip"
+                        [columns]="$any(leafColumns)"
+                        [selectable]="selectable"
+                        [filterable]="filterable"
+                        [noRecordsTemplate]="noRecordsTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [showGroupFooters]="showGroupFooters"
+                        [trackBy]="trackBy"
+                        [rowClass]="rowClass"
+                        kendoDraggable
+                        kendoGridSelectionMarquee
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                    <tfoot kendoGridFooter
+                        *ngIf="showFooter"
+                        [scrollable]="false"
+                        [logicalRowIndex]="ariaRowCount"
+                        [groups]="group"
+                        [columns]="$any(leafColumns)"
+                        [detailTemplate]="detailTemplate">
+                    </tfoot>
+                </table>
+            </ng-container>
+            <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
         </div>
+        <kendo-grid-status-bar
+            *ngIf="showStatusBar"
+            [selectableSettings]="selectable"
+            [statusBarTemplate]="statusBarTemplate">
+        </kendo-grid-status-bar>
         <kendo-pager
             *ngIf="showBottomPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
@@ -2561,7 +2585,7 @@ GridComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version:
             </kendo-icon-wrapper>
             {{hintText}}
         </ng-template>
-    `, isInline: true, components: [{ type: i25.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: i26.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i27.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: i28.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i29.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i30.ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i31.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i32.TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i33.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i34.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i35.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i36.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i37.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i38.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i39.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i40.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["dragReady", "press", "dragStart", "drag", "release", "dragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i40.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["dragEnter", "dragOver", "dragLeave", "drop"], exportAs: ["kendoDropTargetContainer"] }, { type: i41.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i42.GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
+    `, isInline: true, components: [{ type: i25.ToolbarComponent, selector: "kendo-grid-toolbar", inputs: ["position", "size", "navigable"] }, { type: i26.PagerComponent, selector: "kendo-pager", inputs: ["total", "skip", "pageSize", "options", "size", "template"], outputs: ["pageChange"] }, { type: i27.GroupPanelComponent, selector: "kendo-grid-group-panel", inputs: ["text", "navigable", "groups"], outputs: ["change"] }, { type: i28.ColGroupComponent, selector: "[kendoGridColGroup]", inputs: ["columns", "groups", "detailTemplate", "sort"] }, { type: i29.HeaderComponent, selector: "[kendoGridHeader]", inputs: ["totalColumnLevels", "columns", "groups", "detailTemplate", "scrollable", "filterable", "sort", "filter", "sortable", "groupable", "lockedColumnsCount", "resizable", "reorderable", "columnMenu", "columnMenuTemplate", "totalColumnsCount", "tabIndex", "size"] }, { type: i30.ListComponent, selector: "kendo-grid-list", inputs: ["data", "groups", "total", "rowHeight", "stickyRowHeight", "detailRowHeight", "take", "skip", "columns", "detailTemplate", "noRecordsTemplate", "selectable", "groupable", "filterable", "rowClass", "rowSticky", "loading", "trackBy", "virtualColumns", "isVirtual", "cellLoadingTemplate", "loadingTemplate", "sort", "size"], outputs: ["contentScroll", "pageChange", "scrollBottom"] }, { type: i31.FooterComponent, selector: "[kendoGridFooter]", inputs: ["columns", "groups", "detailTemplate", "scrollable", "lockedColumnsCount", "logicalRowIndex"] }, { type: i32.TableBodyComponent, selector: "[kendoGridTableBody]", inputs: ["columns", "allColumns", "groups", "detailTemplate", "noRecordsTemplate", "data", "skip", "selectable", "filterable", "noRecordsText", "isLocked", "isLoading", "isVirtual", "cellLoadingTemplate", "skipGroupDecoration", "showGroupFooters", "lockedColumnsCount", "totalColumnsCount", "virtualColumns", "trackBy", "rowSticky", "rowClass"] }, { type: i33.LoadingComponent, selector: "[kendoGridLoading]", inputs: ["loadingTemplate"] }, { type: i34.StatusBarComponent, selector: "kendo-grid-status-bar", inputs: ["selectableSettings", "statusBarTemplate"] }, { type: i35.IconWrapperComponent, selector: "kendo-icon-wrapper", inputs: ["name", "svgIcon", "innerCssClass", "customFontClass", "size"], exportAs: ["kendoIconWrapper"] }], directives: [{ type: i36.LocalizedMessagesDirective, selector: "[kendoGridLocalizedMessages]" }, { type: i37.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { type: i38.TableDirective, selector: "table", inputs: ["locked", "virtualColumns"] }, { type: i39.GridTableDirective, selector: "[kendoGridTable]", inputs: ["size"] }, { type: i40.ResizableContainerDirective, selector: "[kendoGridResizableContainer]", inputs: ["lockedWidth", "kendoGridResizableContainer"] }, { type: i41.DragTargetContainerDirective, selector: "[kendoDragTargetContainer]", inputs: ["hint", "dragTargetFilter", "dragHandle", "dragDelay", "threshold", "dragTargetId", "dragData", "dragDisabled", "mode"], outputs: ["onDragReady", "onPress", "onDragStart", "onDrag", "onRelease", "onDragEnd"], exportAs: ["kendoDragTargetContainer"] }, { type: i41.DropTargetContainerDirective, selector: "[kendoDropTargetContainer]", inputs: ["dropTargetFilter", "dropDisabled"], outputs: ["onDragEnter", "onDragOver", "onDragLeave", "onDrop"], exportAs: ["kendoDropTargetContainer"] }, { type: i42.DraggableDirective, selector: "[kendoDraggable]", inputs: ["enableDrag"], outputs: ["kendoPress", "kendoDrag", "kendoRelease"] }, { type: i43.GridMarqueeDirective, selector: "[kendoGridSelectionMarquee]" }], encapsulation: i0.ViewEncapsulation.None });
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImport: i0, type: GridComponent, decorators: [{
             type: Component,
             args: [{
@@ -2661,6 +2685,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
 
             i18n-filterMenuOperatorsDropDownLabel="kendo.grid.filterMenuOperatorsDropDownLabel|The label of the filter menu operators dropdown"
             filterMenuOperatorsDropDownLabel="{{ '{columnName} Filter Operators' }}"
+            
+            i18n-filterCellOperatorLabel="kendo.grid.filterCellOperatorLabel|The label of the filter cell operators dropdown"
+            filterCellOperatorLabel="{{ 'Filter cell operators for {columnName}' }}"
+
+            i18n-booleanFilterCellLabel="kendo.grid.booleanFilterCellLabel|The label of the boolean filter cell dropdown"
+            booleanFilterCellLabel="{{ 'Boolean filter cell for {columnName}' }}"
 
             i18n-filterMenuLogicDropDownLabel="kendo.grid.filterMenuLogicDropDownLabel|The label of the filter menu logic dropdown"
             filterMenuLogicDropDownLabel="{{ '{columnName} Filter Logic' }}"
@@ -2860,285 +2890,286 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             [navigable]="navigation.toolbarEnabled"
             [attr.aria-controls]="ariaRootId"
             position="top"></kendo-grid-toolbar>
-        <kendo-pager
-            *ngIf="showTopPager"
-            [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
-            [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
-            class="k-grid-pager-top k-pager"
-            [template]="pagerTemplate"
-            [pageSize]="pageSize"
-            [total]="view.total"
-            [skip]="skip"
-            [size]="size"
-            [options]="pageable"
-            (pageChange)="notifyPageChange('pager', $event)">
-        </kendo-pager>
-        <kendo-grid-group-panel
-            *ngIf="showGroupPanel"
-            [navigable]="navigation.toolbarEnabled"
-            [text]="groupableEmptyText"
-            [groups]="group"
-            role="toolbar"
-            [attr.aria-label]="messageFor('groupPanelLabel')"
-            [attr.aria-controls]="ariaRootId"
-            (change)="groupChange.emit($event)">
-        </kendo-grid-group-panel>
-        <div #ariaRoot
-            class="k-grid-aria-root"
-            role="grid"
-            [id]="ariaRootId"
-            [attr.aria-label]="ariaLabel"
-            [attr.aria-rowcount]="ariaRowCount"
-            [attr.aria-colcount]="ariaColCount">
-        <ng-container *ngIf="isScrollable">
-            <div *ngIf="!hideHeader"
-                class="k-grid-header"
-                role="presentation"
-                [style.padding]="headerPadding">
-                <div *ngIf="isLocked"
-                     #lockedHeader
-                     role="presentation"
-                     class="k-grid-header-locked"
-                     [style.width.px]="lockedWidth">
-                    <table
-                        [locked]="true"
+            <kendo-pager
+                *ngIf="showTopPager"
+                [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
+                [attr.role]="navigation.pagerEnabled ? 'application' : undefined"
+                class="k-grid-pager-top k-pager"
+                [template]="pagerTemplate"
+                [pageSize]="pageSize"
+                [total]="view.total"
+                [skip]="skip"
+                [size]="size"
+                [options]="pageable"
+                (pageChange)="notifyPageChange('pager', $event)">
+            </kendo-pager>
+            <kendo-grid-group-panel
+                *ngIf="showGroupPanel"
+                [navigable]="navigation.toolbarEnabled"
+                [text]="groupableEmptyText"
+                [groups]="group"
+                role="toolbar"
+                [attr.aria-label]="messageFor('groupPanelLabel')"
+                [attr.aria-controls]="ariaRootId"
+                (change)="groupChange.emit($event)">
+            </kendo-grid-group-panel>
+            <div #ariaRoot
+                class="k-grid-aria-root"
+                role="grid"
+                [id]="ariaRootId"
+                [attr.aria-label]="ariaLabel"
+                [attr.aria-rowcount]="ariaRowCount"
+                [attr.aria-colcount]="ariaColCount">
+            <ng-container *ngIf="isScrollable">
+                <div *ngIf="!hideHeader"
+                    class="k-grid-header"
+                    role="presentation"
+                    [style.padding]="headerPadding">
+                    <div *ngIf="isLocked"
+                        #lockedHeader
                         role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                        class="k-grid-header-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            [locked]="true"
                             role="presentation"
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            role="rowgroup"
-                            [resizable]="resizable"
-                            [scrollable]="true"
-                            [columns]="$any(lockedColumns)"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [groups]="group"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                </div>
-                <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 2">
-                    <table
-                        role="presentation"
-                        class="k-grid-header-table"
-                        [style.width.px]="nonLockedWidth"
-                        [virtualColumns]="virtualColumns"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
+                            class="k-grid-header-table"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                role="rowgroup"
+                                [resizable]="resizable"
+                                [scrollable]="true"
+                                [columns]="$any(lockedColumns)"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [groups]="group"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                    </div>
+                    <div #header class="k-grid-header-wrap" role="presentation" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 2">
+                        <table
                             role="presentation"
-                            [columns]="headerLeafColumns"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <thead kendoGridHeader
-                            [resizable]="resizable"
-                            role="rowgroup"
-                            [scrollable]="true"
-                            [columns]="headerColumns"
-                            [totalColumnLevels]="totalColumnLevels"
-                            [sort]="sort"
-                            [filter]="filter"
-                            [filterable]="filterable"
-                            [groupable]="showGroupPanel"
-                            [reorderable]="reorderable"
-                            [groups]="isLocked ? [] : group"
-                            [sortable]="sortable"
-                            [columnMenu]="columnMenuOptions"
-                            [columnMenuTemplate]="columnMenuTemplate"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [totalColumnsCount]="leafColumns.length"
-                            [detailTemplate]="detailTemplate"
-                            [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                        </thead>
-                    </table>
-                    <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
-                        <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                            class="k-grid-header-table"
+                            [style.width.px]="nonLockedWidth"
+                            [virtualColumns]="virtualColumns"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="headerLeafColumns"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <thead kendoGridHeader
+                                [resizable]="resizable"
+                                role="rowgroup"
+                                [scrollable]="true"
+                                [columns]="headerColumns"
+                                [totalColumnLevels]="totalColumnLevels"
+                                [sort]="sort"
+                                [filter]="filter"
+                                [filterable]="filterable"
+                                [groupable]="showGroupPanel"
+                                [reorderable]="reorderable"
+                                [groups]="isLocked ? [] : group"
+                                [sortable]="sortable"
+                                [columnMenu]="columnMenuOptions"
+                                [columnMenuTemplate]="columnMenuTemplate"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [totalColumnsCount]="leafColumns.length"
+                                [detailTemplate]="detailTemplate"
+                                [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                            </thead>
+                        </table>
+                        <div *ngIf="virtualColumns" class="k-width-container" role="presentation">
+                            <div [style.width.px]="columnsContainer.unlockedWidth"></div>
+                        </div>
                     </div>
                 </div>
-            </div>
-            <kendo-grid-list
-                kendoDragTargetContainer
-                kendoDropTargetContainer
-                mode="manual"
-                [dragDisabled]="!rowReorderable"
-                [dropDisabled]="!rowReorderable"
-                [dragTargetFilter]="getDefaultSelectors('dragTarget')"
-                [dropTargetFilter]="getDefaultSelectors('dropTarget')"
-                [dragHandle]="getDefaultSelectors('handle')"
-                [hint]="{hintTemplate: defaultHint}"
-                (press)="handleReorderEvents($event, 'press')"
-                (dragStart)="handleReorderEvents($event, 'dragStart')"
-                (drag)="handleReorderEvents($event, 'drag')"
-                (dragEnter)="handleReorderEvents($event, 'dragEnter')"
-                (dragLeave)="handleReorderEvents($event, 'dragLeave')"
-                (dragEnd)="handleReorderEvents($event, 'dragEnd')"
-                (drop)="handleReorderEvents($event, 'drop')"
-                [dragData]="gridData"
-                [data]="$any(view)"
-                [rowHeight]="rowHeight"
-                [detailRowHeight]="detailRowHeight"
-                [total]="totalCount"
-                [take]="pageSize"
-                [groups]="group"
-                [groupable]="groupable"
-                [skip]="skip"
-                [trackBy]="trackBy"
-                [columns]="columnsContainer"
-                [selectable]="selectable"
-                [filterable]="filterable"
-                [detailTemplate]="detailTemplate"
-                [noRecordsTemplate]="noRecordsTemplate"
-                [size]="size"
-                (pageChange)="notifyPageChange('list', $event)"
-                [rowClass]="rowClass"
-                [rowSticky]="rowSticky"
-                [loading]="loading"
-                [isVirtual]="isVirtual"
-                [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
-                [loadingTemplate]="loadingTemplate?.templateRef"
-                [virtualColumns]="virtualColumns"
-                (scrollBottom)="notifyScrollBottom()"
-                (contentScroll)="contentScroll.emit($event)"
-                kendoDraggable
-                kendoGridSelectionMarquee
-                [enableDrag]="marqueeSelection"
-                [sort]="sort"
-                >
-            </kendo-grid-list>
-            <div
-                *ngIf="showFooter"
-                class="k-grid-footer"
-                [style.padding]="headerPadding">
-                <div
-                    *ngIf="lockedLeafColumns.length"
-                    class="k-grid-footer-locked"
-                    [style.width.px]="lockedWidth">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [locked]="true"
-                        [style.width.px]="lockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(lockedLeafColumns)"
-                            [groups]="group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [scrollable]="true"
-                            [groups]="group"
-                            [columns]="$any(lockedLeafColumns)"
-                            [detailTemplate]="detailTemplate"
-                            [logicalRowIndex]="ariaRowCount">
-                        </tfoot>
-                    </table>
-                </div>
-                <div #footer
-                    class="k-grid-footer-wrap" data-scrollable
-                    [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
-                    [lockedWidth]="lockedWidth + scrollbarWidth + 3">
-                    <table
-                        role="presentation"
-                        class="k-grid-footer-table"
-                        [style.width.px]="nonLockedWidth"
-                        kendoGridTable
-                        [size]="size">
-                        <colgroup kendoGridColGroup
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [groups]="isLocked ? [] : group"
-                            [detailTemplate]="detailTemplate">
-                        </colgroup>
-                        <tfoot kendoGridFooter
-                            [logicalRowIndex]="ariaRowCount"
-                            [scrollable]="true"
-                            [groups]="isLocked ? [] : group"
-                            [columns]="$any(nonLockedLeafColumns)"
-                            [lockedColumnsCount]="lockedLeafColumns.length"
-                            [detailTemplate]="detailTemplate">
-                        </tfoot>
-                    </table>
-                </div>
-            </div>
-        </ng-container>
-        <ng-container *ngIf="!isScrollable">
-            <table
-                [style.table-layout]="resizable ? 'fixed' : null"
-                kendoGridTable
-                [size]="size">
-                <colgroup kendoGridColGroup
-                    [columns]="$any(leafColumns)"
-                    [groups]="group"
-                    [detailTemplate]="detailTemplate">
-                </colgroup>
-                <thead kendoGridHeader
-                    *ngIf="!hideHeader"
-                    [resizable]="resizable"
-                    [scrollable]="false"
-                    [columns]="$any(visibleColumns)"
-                    [totalColumnLevels]="totalColumnLevels"
-                    [groups]="group"
-                    [groupable]="showGroupPanel"
-                    [reorderable]="reorderable"
-                    [sort]="sort"
-                    [sortable]="sortable"
-                    [filter]="filter"
-                    [filterable]="filterable"
-                    [columnMenu]="columnMenuOptions"
-                    [columnMenuTemplate]="columnMenuTemplate"
-                    [detailTemplate]="detailTemplate"
-                    [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
-                </thead>
-                <tbody kendoGridTableBody
-                    [isLoading]="loading"
-                    [groups]="group"
+                <kendo-grid-list
+                    kendoDragTargetContainer
+                    kendoDropTargetContainer
+                    mode="manual"
+                    [dragDisabled]="!rowReorderable"
+                    [dropDisabled]="!rowReorderable"
+                    [dragTargetFilter]="getDefaultSelectors('dragTarget')"
+                    [dropTargetFilter]="getDefaultSelectors('dropTarget')"
+                    [dragHandle]="getDefaultSelectors('handle')"
+                    [hint]="{hintTemplate: defaultHint}"
+                    (onPress)="handleReorderEvents($event, 'press')"
+                    (onDragStart)="handleReorderEvents($event, 'dragStart')"
+                    (onDrag)="handleReorderEvents($event, 'drag')"
+                    (onDragEnter)="handleReorderEvents($event, 'dragEnter')"
+                    (onDragLeave)="handleReorderEvents($event, 'dragLeave')"
+                    (onDragEnd)="handleReorderEvents($event, 'dragEnd')"
+                    (onDrop)="handleReorderEvents($event, 'drop')"
+                    [dragData]="gridData"
                     [data]="$any(view)"
+                    [rowHeight]="rowHeight"
+                    [detailRowHeight]="detailRowHeight"
+                    [total]="totalCount"
+                    [take]="pageSize"
+                    [groups]="group"
+                    [groupable]="groupable"
                     [skip]="skip"
-                    [columns]="$any(leafColumns)"
+                    [trackBy]="trackBy"
+                    [columns]="columnsContainer"
                     [selectable]="selectable"
                     [filterable]="filterable"
-                    [noRecordsTemplate]="noRecordsTemplate"
                     [detailTemplate]="detailTemplate"
-                    [showGroupFooters]="showGroupFooters"
-                    [trackBy]="trackBy"
+                    [noRecordsTemplate]="noRecordsTemplate"
+                    [size]="size"
+                    (pageChange)="notifyPageChange('list', $event)"
                     [rowClass]="rowClass"
+                    [rowSticky]="rowSticky"
+                    [loading]="loading"
+                    [isVirtual]="isVirtual"
+                    [cellLoadingTemplate]="cellLoadingTemplate?.templateRef"
+                    [loadingTemplate]="loadingTemplate?.templateRef"
+                    [virtualColumns]="virtualColumns"
+                    (scrollBottom)="notifyScrollBottom()"
+                    (contentScroll)="contentScroll.emit($event)"
                     kendoDraggable
                     kendoGridSelectionMarquee
-                    [enableDrag]="marqueeSelection">
-                </tbody>
-                <tfoot kendoGridFooter
+                    [enableDrag]="marqueeSelection"
+                    [sort]="sort">
+                </kendo-grid-list>
+                <div
                     *ngIf="showFooter"
-                    [scrollable]="false"
-                    [logicalRowIndex]="ariaRowCount"
-                    [groups]="group"
-                    [columns]="$any(leafColumns)"
-                    [detailTemplate]="detailTemplate">
-                </tfoot>
-            </table>
-        </ng-container>
-        <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading>
-        </div>
+                    class="k-grid-footer"
+                    [style.padding]="headerPadding">
+                    <div
+                        *ngIf="lockedLeafColumns.length"
+                        class="k-grid-footer-locked"
+                        [style.width.px]="lockedWidth">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [locked]="true"
+                            [style.width.px]="lockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(lockedLeafColumns)"
+                                [groups]="group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [scrollable]="true"
+                                [groups]="group"
+                                [columns]="$any(lockedLeafColumns)"
+                                [detailTemplate]="detailTemplate"
+                                [logicalRowIndex]="ariaRowCount">
+                            </tfoot>
+                        </table>
+                    </div>
+                    <div #footer
+                        class="k-grid-footer-wrap" data-scrollable
+                        [kendoGridResizableContainer]="lockedLeafColumns.length > 0"
+                        [lockedWidth]="lockedWidth + scrollbarWidth + 3">
+                        <table
+                            role="presentation"
+                            class="k-grid-footer-table"
+                            [style.width.px]="nonLockedWidth"
+                            kendoGridTable
+                            [size]="size">
+                            <colgroup kendoGridColGroup
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [groups]="isLocked ? [] : group"
+                                [detailTemplate]="detailTemplate">
+                            </colgroup>
+                            <tfoot kendoGridFooter
+                                [logicalRowIndex]="ariaRowCount"
+                                [scrollable]="true"
+                                [groups]="isLocked ? [] : group"
+                                [columns]="$any(nonLockedLeafColumns)"
+                                [lockedColumnsCount]="lockedLeafColumns.length"
+                                [detailTemplate]="detailTemplate">
+                            </tfoot>
+                        </table>
+                    </div>
+                </div>
+            </ng-container>
+            <ng-container *ngIf="!isScrollable">
+                <table
+                    [style.table-layout]="resizable ? 'fixed' : null"
+                    kendoGridTable
+                    [size]="size">
+                    <colgroup kendoGridColGroup
+                        [columns]="$any(leafColumns)"
+                        [groups]="group"
+                        [detailTemplate]="detailTemplate">
+                    </colgroup>
+                    <thead kendoGridHeader
+                        *ngIf="!hideHeader"
+                        [resizable]="resizable"
+                        [scrollable]="false"
+                        [columns]="$any(visibleColumns)"
+                        [totalColumnLevels]="totalColumnLevels"
+                        [groups]="group"
+                        [groupable]="showGroupPanel"
+                        [reorderable]="reorderable"
+                        [sort]="sort"
+                        [sortable]="sortable"
+                        [filter]="filter"
+                        [filterable]="filterable"
+                        [columnMenu]="columnMenuOptions"
+                        [columnMenuTemplate]="columnMenuTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [tabIndex]="navigation.tableEnabled ? '-1' : '0'">
+                    </thead>
+                    <tbody kendoGridTableBody
+                        [isLoading]="loading"
+                        [groups]="group"
+                        [data]="$any(view)"
+                        [skip]="skip"
+                        [columns]="$any(leafColumns)"
+                        [selectable]="selectable"
+                        [filterable]="filterable"
+                        [noRecordsTemplate]="noRecordsTemplate"
+                        [detailTemplate]="detailTemplate"
+                        [showGroupFooters]="showGroupFooters"
+                        [trackBy]="trackBy"
+                        [rowClass]="rowClass"
+                        kendoDraggable
+                        kendoGridSelectionMarquee
+                        [enableDrag]="marqueeSelection">
+                    </tbody>
+                    <tfoot kendoGridFooter
+                        *ngIf="showFooter"
+                        [scrollable]="false"
+                        [logicalRowIndex]="ariaRowCount"
+                        [groups]="group"
+                        [columns]="$any(leafColumns)"
+                        [detailTemplate]="detailTemplate">
+                    </tfoot>
+                </table>
+            </ng-container>
+            <div [loadingTemplate]="loadingTemplate" *ngIf="loading" kendoGridLoading></div>
         </div>
+        <kendo-grid-status-bar
+            *ngIf="showStatusBar"
+            [selectableSettings]="selectable"
+            [statusBarTemplate]="statusBarTemplate">
+        </kendo-grid-status-bar>
         <kendo-pager
             *ngIf="showBottomPager"
             [tabindex]="navigation.pagerEnabled ? '0' : '-1'"
@@ -3321,6 +3352,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.12", ngImpo
             }], loadingTemplateChildren: [{
                 type: ContentChildren,
                 args: [LoadingTemplateDirective]
+            }], statusBarTemplateChildren: [{
+                type: ContentChildren,
+                args: [StatusBarTemplateDirective]
             }], noRecordsTemplateChildren: [{
                 type: ContentChildren,
                 args: [NoRecordsTemplateDirective]