@progress/kendo-angular-grid 21.1.1-develop.1 → 21.2.0-develop.1

package/esm2022/adaptiveness/adaptive-renderer.component.mjs

@@ -8,7 +8,7 @@ import { ActionSheetComponent, ActionSheetContentTemplateDirective, ActionSheetF
 import { FilterMenuContainerComponent } from '../filtering/menu/filter-menu-container.component';
 import { FilterToolbarToolComponent } from '../rendering/toolbar/tools/filter-toolbar-tool.component';
 import { ButtonDirective } from '@progress/kendo-angular-buttons';
-import { NgFor, NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { arrowRotateCcwIcon, cancelIcon, checkIcon, chevronLeftIcon, filterClearIcon, filterIcon, saveIcon, xIcon } from '@progress/kendo-svg-icons';
 import { FilterService } from '../filtering/filter.service';
 import { ColumnMenuContainerComponent } from '../column-menu/column-menu-container.component';
@@ -287,7 +287,7 @@ export class AdaptiveRendererComponent {
         this.actionSheet.toggle(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, deps: [{ token: i1.ColumnMenuService }, { token: i2.AdaptiveGridService }, { token: i3.FilterService }, { token: i4.ContextService }, { token: i5.AdaptiveService }, { token: i6.SortService }, { token: i7.ColumnInfoService }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.14", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnChooserContent", first: true, predicate: ["columnChooserContent"], descendants: true }, { propertyName: "filterToolbarToolTemplate", first: true, predicate: ["filterToolbarToolTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filterMenuContainer", first: true, predicate: ["filterMenuContainer"], descendants: true }, { propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "groupToolbarTool", first: true, predicate: GroupToolbarToolComponent, descendants: true }], ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: AdaptiveRendererComponent, isStandalone: true, selector: "kendo-grid-adaptive-renderer", viewQueries: [{ propertyName: "columnChooserContent", first: true, predicate: ["columnChooserContent"], descendants: true }, { propertyName: "filterToolbarToolTemplate", first: true, predicate: ["filterToolbarToolTemplate"], descendants: true, read: ViewContainerRef }, { propertyName: "filterMenuContainer", first: true, predicate: ["filterMenuContainer"], descendants: true }, { propertyName: "actionSheet", first: true, predicate: ActionSheetComponent, descendants: true }, { propertyName: "groupToolbarTool", first: true, predicate: GroupToolbarToolComponent, descendants: true }], ngImport: i0, template: `
         <kendo-actionsheet
             [cssClass]="{
                 'k-adaptive-actionsheet': true,
@@ -297,413 +297,461 @@ export class AdaptiveRendererComponent {
             [cssStyle]="{
                 height: adaptiveService.size === 'small' ? '100vh' : '60vh'
             }"
-            [overlayClickClose]="true"
-            (collapse)="adaptiveGridService.reset()">
-
-            <!-- sortToolbarTool view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'sortToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <div class="k-column-menu k-column-menu-lg">
-                        <div class="k-columnmenu-item-wrapper">
-                            <kendo-grid-columnmenu-item *ngFor="let column of columns"
-                                            [column]="getColumnComponent(column)"
-                                            [text]="column.title || getColumnComponent(column).field"
-                                            (itemClick)="sortBy(column)">
-                            </kendo-grid-columnmenu-item>
-                        </div>
-                    </div>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="x"
-                        [svgIcon]="xIcon"
-                        (click)="clearSorting()">
-                        {{messageFor('sortClearButton')}}
-                    </button>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="check"
-                        [svgIcon]="checkIcon"
-                        themeColor="primary"
-                        (click)="actionSheet.toggle(false)">
-                        {{messageFor('sortDoneButton')}}
-                    </button>
-                </ng-template>
+          [overlayClickClose]="true"
+          (collapse)="adaptiveGridService.reset()">
+        
+          <!-- sortToolbarTool view -->
+          @if (adaptiveGridService.viewType === 'sortToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <div class="k-column-menu k-column-menu-lg">
+                  <div class="k-columnmenu-item-wrapper">
+                    @for (column of columns; track column) {
+                      <kendo-grid-columnmenu-item
+                        [column]="getColumnComponent(column)"
+                        [text]="column.title || getColumnComponent(column).field"
+                        (itemClick)="sortBy(column)">
+                      </kendo-grid-columnmenu-item>
+                    }
+                  </div>
+                </div>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="x"
+                  [svgIcon]="xIcon"
+                  (click)="clearSorting()">
+                  {{messageFor('sortClearButton')}}
+                </button>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="check"
+                  [svgIcon]="checkIcon"
+                  themeColor="primary"
+                  (click)="actionSheet.toggle(false)">
+                  {{messageFor('sortDoneButton')}}
+                </button>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- columnChooserToolbarTool view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnChooserToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-column-chooser-content
-                        #columnChooserContent
-                        [columns]="columns"
-                        [isLast]="true"
-                        [autoSync]="false"
-                        [allowHideAll]="false"
-                        >
-                    </kendo-grid-column-chooser-content>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                    </ng-container>
-                </ng-template>
+          }
+        
+          <!-- columnChooserToolbarTool view -->
+          @if (adaptiveGridService.viewType === 'columnChooserToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-grid-column-chooser-content
+                  #columnChooserContent
+                  [columns]="columns"
+                  [isLast]="true"
+                  [autoSync]="false"
+                  [allowHideAll]="false"
+                  >
+                </kendo-grid-column-chooser-content>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                </ng-container>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- filterToolbarTool first view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'"
-                                    [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-                                    [scope]="this">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <div class="k-column-menu k-column-menu-lg">
-                        <kendo-filter-toolbar-tool></kendo-filter-toolbar-tool>
-                    </div>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <button kendoButton
-                            icon="filter-clear"
-                            [svgIcon]="filterClearIcon"
-                            size="large"
-                            (click)="clearFilters()">
-                            {{messageFor('filterClearAllButton')}}
-                    </button>
-                </ng-template>
-            </kendo-actionsheet-view>
-
-            <!-- filterToolbarTool second view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <ng-container #filterToolbarToolTemplate></ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                    </ng-container>
-                </ng-template>
+          }
+        
+          <!-- filterToolbarTool first view -->
+          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
+            <kendo-actionsheet-view
+              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
+              [scope]="this">
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <div class="k-column-menu k-column-menu-lg">
+                  <kendo-filter-toolbar-tool></kendo-filter-toolbar-tool>
+                </div>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button kendoButton
+                  icon="filter-clear"
+                  [svgIcon]="filterClearIcon"
+                  size="large"
+                  (click)="clearFilters()">
+                  {{messageFor('filterClearAllButton')}}
+                </button>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- filterMenu view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterMenu'">
-                <ng-template kendoActionSheetHeaderTemplate >
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-filter-menu-container
-                        #filterMenuContainer
-                        [column]="adaptiveGridService.column"
-                        [filter]="ctx.grid.filter"
-                        (close)="close()"
-                        (keydown.enter)="$event.stopImmediatePropagation()">
-                    </kendo-grid-filter-menu-container>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                    </ng-container>
-                </ng-template>
+          }
+        
+          <!-- filterToolbarTool second view -->
+          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <ng-container #filterToolbarToolTemplate></ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                </ng-container>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- columnMenu first view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'"
-                [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-                [scope]="this">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>    
-                <ng-template kendoActionSheetContentTemplate>
-                    <div class="k-column-menu k-column-menu-lg">
-                        <kendo-grid-columnmenu-container>
-                            <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="adaptiveGridService.columnMenuService">
-                            </kendo-grid-columnmenu-sort>
-                            <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
-                            </kendo-grid-columnmenu-lock>
-                            <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
-                            </kendo-grid-columnmenu-stick>
-                            <kendo-grid-columnmenu-position
-                                #positionItem
-                                *ngIf="hasPosition"
-                                [showLock]="hasLock"
-                                [showStick]="hasStick"
-                                [kendoGridColumnMenuItem]="positionItem"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [expanded]="false"
-                                (collapse)="navigateToPositionView()">
-                            </kendo-grid-columnmenu-position>
-                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasLock || hasStick || adaptiveGridService.column.sortable" class="k-separator"></span>
-                            <kendo-grid-columnmenu-chooser
-                                #chooserItem
-                                *ngIf="hasColumnChooser"
-                                [kendoGridColumnMenuItem]="chooserItem"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [expanded]="false"
-                                (collapse)="navigateToColumnsView()">
-                            </kendo-grid-columnmenu-chooser>
-                            <kendo-grid-columnmenu-autosize-column
-                                #autoSizeColumnItem
-                                *ngIf="hasAutoSizeColumn"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [kendoGridColumnMenuItem]="autoSizeColumnItem"
-                                [column]="adaptiveGridService.column"
-                            >
-                            </kendo-grid-columnmenu-autosize-column>
-
-                            <kendo-grid-columnmenu-autosize-all-columns
-                                #autoSizeAllColumnsItem
-                                *ngIf="hasAutoSizeAllColumns"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
-                            >
-                            </kendo-grid-columnmenu-autosize-all-columns>
-                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="adaptiveGridService.column.filterable" class="k-separator"></span>
-                            <kendo-grid-columnmenu-filter
-                                #filterItem
-                                *ngIf="hasFilter"
-                                [kendoGridColumnMenuItem]="filterItem"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [expanded]="false"
-                                (collapse)="navigateToFilterView()">
-                            </kendo-grid-columnmenu-filter>
-                        </kendo-grid-columnmenu-container>
-                    </div>
-                </ng-template>
+          }
+        
+          <!-- filterMenu view -->
+          @if (adaptiveGridService.viewType === 'filterMenu') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate >
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-grid-filter-menu-container
+                  #filterMenuContainer
+                  [column]="adaptiveGridService.column"
+                  [filter]="ctx.grid.filter"
+                  (close)="close()"
+                  (keydown.enter)="$event.stopImmediatePropagation()">
+                </kendo-grid-filter-menu-container>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                </ng-container>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- columnMenu second view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-column-chooser-content
-                        *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
-                        #columnChooserContent
-                        [columns]="adaptiveGridService.columns"
-                        [isLast]="true"
-                        [autoSync]="false"
-                        [allowHideAll]="false"
-                        >
-                    </kendo-grid-column-chooser-content>
-                    <kendo-grid-filter-menu-container
-                        *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
+          }
+        
+          <!-- columnMenu first view -->
+          @if (adaptiveGridService.viewType === 'columnMenu') {
+            <kendo-actionsheet-view
+              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
+              [scope]="this">
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <div class="k-column-menu k-column-menu-lg">
+                  <kendo-grid-columnmenu-container>
+                    @if (hasSort) {
+                      <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="adaptiveGridService.columnMenuService">
+                      </kendo-grid-columnmenu-sort>
+                    }
+                    @if (hasLock && !hasPosition) {
+                      <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
+                      </kendo-grid-columnmenu-lock>
+                    }
+                    @if (hasStick && !hasPosition) {
+                      <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
+                      </kendo-grid-columnmenu-stick>
+                    }
+                    @if (hasPosition) {
+                      <kendo-grid-columnmenu-position
+                        #positionItem
+                        [showLock]="hasLock"
+                        [showStick]="hasStick"
+                        [kendoGridColumnMenuItem]="positionItem"
+                        [service]="adaptiveGridService.columnMenuService"
+                        [expanded]="false"
+                        (collapse)="navigateToPositionView()">
+                      </kendo-grid-columnmenu-position>
+                    }
+                    @if (hasLock || hasStick || adaptiveGridService.column.sortable) {
+                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
+                    }
+                    @if (hasColumnChooser) {
+                      <kendo-grid-columnmenu-chooser
+                        #chooserItem
+                        [kendoGridColumnMenuItem]="chooserItem"
+                        [service]="adaptiveGridService.columnMenuService"
+                        [expanded]="false"
+                        (collapse)="navigateToColumnsView()">
+                      </kendo-grid-columnmenu-chooser>
+                    }
+                    @if (hasAutoSizeColumn) {
+                      <kendo-grid-columnmenu-autosize-column
+                        #autoSizeColumnItem
+                        [service]="adaptiveGridService.columnMenuService"
+                        [kendoGridColumnMenuItem]="autoSizeColumnItem"
                         [column]="adaptiveGridService.column"
-                        [filter]="ctx.grid.filter"
-                        (close)="close()"
-                        [kendoEventsOutsideAngular]="{'keydown.escape': close}"
-                        [scope]="this">
-                    </kendo-grid-filter-menu-container>
-                    <kendo-grid-columnmenu-lock
-                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasLock"
-                        [service]="adaptiveGridService.columnMenuService">
-                    </kendo-grid-columnmenu-lock>
-                    <kendo-grid-columnmenu-stick
-                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasStick"
-                        [service]="adaptiveGridService.columnMenuService">
-                    </kendo-grid-columnmenu-stick>
-                </ng-template>
-                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnChooser'" kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                    </ng-container>
-                </ng-template>
-
-                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnFilter'" kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                    </ng-container>
-                </ng-template>
+                        >
+                      </kendo-grid-columnmenu-autosize-column>
+                    }
+                    @if (hasAutoSizeAllColumns) {
+                      <kendo-grid-columnmenu-autosize-all-columns
+                        #autoSizeAllColumnsItem
+                        [service]="adaptiveGridService.columnMenuService"
+                        [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                        >
+                      </kendo-grid-columnmenu-autosize-all-columns>
+                    }
+                    @if (adaptiveGridService.column.filterable) {
+                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
+                    }
+                    @if (hasFilter) {
+                      <kendo-grid-columnmenu-filter
+                        #filterItem
+                        [kendoGridColumnMenuItem]="filterItem"
+                        [service]="adaptiveGridService.columnMenuService"
+                        [expanded]="false"
+                        (collapse)="navigateToFilterView()">
+                      </kendo-grid-columnmenu-filter>
+                    }
+                  </kendo-grid-columnmenu-container>
+                </div>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- external editing view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'externalEditing'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-external-form
-                        [controls]="externalEditingSettings.formControls"
-                        [formGroup]="externalEditingSettings.formGroup"
-                        [formSettings]="externalEditingSettings.formSettings"
-                        [actionButtons]="false">
-                    </kendo-grid-external-form>
-                </ng-template>
-
+          }
+        
+          <!-- columnMenu second view -->
+          @if (adaptiveGridService.viewType === 'columnMenu') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                @if (adaptiveGridService.secondaryView === 'columnChooser') {
+                  <kendo-grid-column-chooser-content
+                    #columnChooserContent
+                    [columns]="adaptiveGridService.columns"
+                    [isLast]="true"
+                    [autoSync]="false"
+                    [allowHideAll]="false"
+                    >
+                  </kendo-grid-column-chooser-content>
+                }
+                @if (adaptiveGridService.secondaryView === 'columnFilter') {
+                  <kendo-grid-filter-menu-container
+                    [column]="adaptiveGridService.column"
+                    [filter]="ctx.grid.filter"
+                    (close)="close()"
+                    [kendoEventsOutsideAngular]="{'keydown.escape': close}"
+                    [scope]="this">
+                  </kendo-grid-filter-menu-container>
+                }
+                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasLock) {
+                  <kendo-grid-columnmenu-lock
+                    [service]="adaptiveGridService.columnMenuService">
+                  </kendo-grid-columnmenu-lock>
+                }
+                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasStick) {
+                  <kendo-grid-columnmenu-stick
+                    [service]="adaptiveGridService.columnMenuService">
+                  </kendo-grid-columnmenu-stick>
+                }
+              </ng-template>
+              @if (adaptiveGridService.secondaryView === 'columnChooser') {
                 <ng-template kendoActionSheetFooterTemplate>
-                    <button kendoButton
-                        size="large"
-                        icon="cancel"
-                        [svgIcon]="cancelIcon"
-                        (click)="actionSheet.toggle(false)">
-                        {{messageFor('externalEditingCancelText')}}
-                    </button>
-                    <button kendoButton
-                        themeColor="primary"
-                        size="large"
-                        icon="save"
-                        [svgIcon]="saveIcon"
-                        (click)="saveEditing()"
-                        [disabled]="!externalEditingSettings.formGroup.valid">
-                        {{messageFor('externalEditingSaveText')}}
-                    </button>
-                </ng-template>
-            </kendo-actionsheet-view>
-
-            <!-- groupToolbarTool view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'groupToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-group-toolbar-tool [adaptive]="true"></kendo-group-toolbar-tool>
+                  <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                  </ng-container>
                 </ng-template>
+              }
+              @if (adaptiveGridService.secondaryView === 'columnFilter') {
                 <ng-template kendoActionSheetFooterTemplate>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="x"
-                        [svgIcon]="xIcon"
-                        (click)="clearGrouping()">
-                        {{messageFor('groupClearButton')}}
-                    </button>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="check"
-                        [svgIcon]="checkIcon"
-                        themeColor="primary"
-                        (click)="actionSheet.toggle(false)">
-                        {{messageFor('groupDoneButton')}}
-                    </button>
+                  <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                  </ng-container>
                 </ng-template>
+              }
+            </kendo-actionsheet-view>
+          }
+        
+          <!-- external editing view -->
+          @if (adaptiveGridService.viewType === 'externalEditing') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-grid-external-form
+                  [controls]="externalEditingSettings.formControls"
+                  [formGroup]="externalEditingSettings.formGroup"
+                  [formSettings]="externalEditingSettings.formSettings"
+                  [actionButtons]="false">
+                </kendo-grid-external-form>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button kendoButton
+                  size="large"
+                  icon="cancel"
+                  [svgIcon]="cancelIcon"
+                  (click)="actionSheet.toggle(false)">
+                  {{messageFor('externalEditingCancelText')}}
+                </button>
+                <button kendoButton
+                  themeColor="primary"
+                  size="large"
+                  icon="save"
+                  [svgIcon]="saveIcon"
+                  (click)="saveEditing()"
+                  [disabled]="!externalEditingSettings.formGroup.valid">
+                  {{messageFor('externalEditingSaveText')}}
+                </button>
+              </ng-template>
             </kendo-actionsheet-view>
+          }
+        
+          <!-- groupToolbarTool view -->
+          @if (adaptiveGridService.viewType === 'groupToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-group-toolbar-tool [adaptive]="true"></kendo-group-toolbar-tool>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="x"
+                  [svgIcon]="xIcon"
+                  (click)="clearGrouping()">
+                  {{messageFor('groupClearButton')}}
+                </button>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="check"
+                  [svgIcon]="checkIcon"
+                  themeColor="primary"
+                  (click)="actionSheet.toggle(false)">
+                  {{messageFor('groupDoneButton')}}
+                </button>
+              </ng-template>
+            </kendo-actionsheet-view>
+          }
         </kendo-actionsheet>
-
+        
         <ng-template #actionSheetHeaderTemplate>
-            <div class="k-actionsheet-titlebar-group">
-                <div *ngIf="adaptiveGridService.secondaryView" class="k-actionsheet-actions">
-                    <button
-                    kendoButton
-                    icon="chevron-left"
-                    [svgIcon]="chevronLeft"
-                    fillMode="flat"
-                    size="large"
-                    [title]="messageFor('adaptiveBackButtonTitle')"
-                    (click)="prevView()">
-                    </button>
-                </div>
-                <div class="k-actionsheet-title">
-                    <div *ngIf="hasTitle" class="k-text-center">
-                       {{actionSheetTitle}}
-                    </div>
-                    <div *ngIf="hasSubtitle"
-                        class="k-actionsheet-subtitle k-text-center">
-                        {{messageFor('columnsSubtitle')}}
-                    </div>
-                </div>
-                <div *ngIf="hasXCloseIcon" class="k-actionsheet-actions">
-                    <button
-                    kendoButton
-                    icon="x"
-                    [svgIcon]="xIcon"
-                    fillMode="flat"
-                    size="large"
-                    [title]="messageFor('adaptiveCloseButtonTitle')"
-                    (click)="close()">
-                    </button>
+          <div class="k-actionsheet-titlebar-group">
+            @if (adaptiveGridService.secondaryView) {
+              <div class="k-actionsheet-actions">
+                <button
+                  kendoButton
+                  icon="chevron-left"
+                  [svgIcon]="chevronLeft"
+                  fillMode="flat"
+                  size="large"
+                  [title]="messageFor('adaptiveBackButtonTitle')"
+                  (click)="prevView()">
+                </button>
+              </div>
+            }
+            <div class="k-actionsheet-title">
+              @if (hasTitle) {
+                <div class="k-text-center">
+                  {{actionSheetTitle}}
                 </div>
-                <div *ngIf="hasCheckCloseIcon" class="k-actionsheet-actions">
-                    <button
-                    kendoButton
-                    icon="check"
-                    [svgIcon]="checkIcon"
-                    fillMode="flat"
-                    size="large"
-                    themeColor="primary"
-                    [title]="messageFor('adaptiveCloseButtonTitle')"
-                    (click)="actionSheet.toggle(false)">
-                    </button>
+              }
+              @if (hasSubtitle) {
+                <div
+                  class="k-actionsheet-subtitle k-text-center">
+                  {{messageFor('columnsSubtitle')}}
                 </div>
+              }
             </div>
+            @if (hasXCloseIcon) {
+              <div class="k-actionsheet-actions">
+                <button
+                  kendoButton
+                  icon="x"
+                  [svgIcon]="xIcon"
+                  fillMode="flat"
+                  size="large"
+                  [title]="messageFor('adaptiveCloseButtonTitle')"
+                  (click)="close()">
+                </button>
+              </div>
+            }
+            @if (hasCheckCloseIcon) {
+              <div class="k-actionsheet-actions">
+                <button
+                  kendoButton
+                  icon="check"
+                  [svgIcon]="checkIcon"
+                  fillMode="flat"
+                  size="large"
+                  themeColor="primary"
+                  [title]="messageFor('adaptiveCloseButtonTitle')"
+                  (click)="actionSheet.toggle(false)">
+                </button>
+              </div>
+            }
+          </div>
         </ng-template>
-
+        
         <ng-template #actionSheetFooterTemplate>
-            <button
-                #resetButton
-                kendoButton
-                size="large"
-                fillMode="solid"
-                [svgIcon]="arrowRotateCcwIcon"
-                icon="arrow-rotate-ccw"
-                type="button"
+          <button
+            #resetButton
+            kendoButton
+            size="large"
+            fillMode="solid"
+            [svgIcon]="arrowRotateCcwIcon"
+            icon="arrow-rotate-ccw"
+            type="button"
                 [kendoEventsOutsideAngular]="{click: cancelChanges, 
                                             'keydown.enter': cancelChanges,
                                             'keydown.space': cancelChanges,
                                             'keydown.tab': onTab
                                             }"
-                [scope]="this">
-                {{ messageFor('columnsReset') }}
-            </button>
-            <button
-                #applyButton
-                kendoButton
-                type="button"
-                [svgIcon]="checkIcon"
-                icon="check"
-                size="large"
-                fillMode="solid"
-                themeColor="primary"
+            [scope]="this">
+            {{ messageFor('columnsReset') }}
+          </button>
+          <button
+            #applyButton
+            kendoButton
+            type="button"
+            [svgIcon]="checkIcon"
+            icon="check"
+            size="large"
+            fillMode="solid"
+            themeColor="primary"
                 [kendoEventsOutsideAngular]="{click: applyChanges,
                                             'keydown.enter': applyChanges,
                                             'keydown.space': applyChanges
                                             }"
-                [scope]="this">
-                {{ messageFor('columnsApply') }}
-            </button>
+            [scope]="this">
+            {{ messageFor('columnsApply') }}
+          </button>
         </ng-template>
-
+        
         <ng-template #filterFooterButtons>
-            <button
-                kendoButton
-                size="large"
-                fillMode="solid"
-                (click)="adaptiveGridService.resetFilter()">
-                {{messageFor('filterClearButton')}}
-            </button>
-            <button
-                kendoButton
-                size="large"
-                fillMode="solid"
-                themeColor="primary"
-                [disabled]="adaptiveGridService.filterMenuContainer.disabled"
-                (click)="adaptiveGridService.submitFilter()">
-                {{messageFor('filterFilterButton')}}
-            </button>
+          <button
+            kendoButton
+            size="large"
+            fillMode="solid"
+            (click)="adaptiveGridService.resetFilter()">
+            {{messageFor('filterClearButton')}}
+          </button>
+          <button
+            kendoButton
+            size="large"
+            fillMode="solid"
+            themeColor="primary"
+            [disabled]="adaptiveGridService.filterMenuContainer.disabled"
+            (click)="adaptiveGridService.submitFilter()">
+            {{messageFor('filterFilterButton')}}
+          </button>
         </ng-template>
-    `, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: GroupToolbarToolComponent, selector: "kendo-group-toolbar-tool", inputs: ["adaptive"], outputs: ["close", "groupClear"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
+        `, isInline: true, dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: ActionSheetComponent, selector: "kendo-actionsheet", inputs: ["actions", "actionsLayout", "overlayClickClose", "title", "subtitle", "items", "cssClass", "cssStyle", "animation", "expanded", "titleId", "initialFocus"], outputs: ["expandedChange", "action", "expand", "collapse", "itemClick", "overlayClick"], exportAs: ["kendoActionSheet"] }, { kind: "component", type: ActionSheetViewComponent, selector: "kendo-actionsheet-view", inputs: ["title", "subtitle", "titleId"] }, { kind: "component", type: FilterToolbarToolComponent, selector: "kendo-filter-toolbar-tool", outputs: ["close"] }, { kind: "component", type: GroupToolbarToolComponent, selector: "kendo-group-toolbar-tool", inputs: ["adaptive"], outputs: ["close", "groupClear"] }, { kind: "component", type: ButtonDirective, selector: "button[kendoButton]", inputs: ["arrowIcon", "toggleable", "togglable", "selected", "tabIndex", "imageUrl", "iconClass", "icon", "disabled", "size", "rounded", "fillMode", "themeColor", "svgIcon", "primary", "look"], outputs: ["selectedChange", "click"], exportAs: ["kendoButton"] }, { kind: "directive", type: ActionSheetHeaderTemplateDirective, selector: "[kendoActionSheetHeaderTemplate]" }, { kind: "directive", type: ActionSheetContentTemplateDirective, selector: "[kendoActionSheetContentTemplate]" }, { kind: "directive", type: ActionSheetFooterTemplateDirective, selector: "[kendoActionSheetFooterTemplate]" }, { kind: "component", type: ColumnMenuContainerComponent, selector: "kendo-grid-columnmenu-container" }, { kind: "component", type: ColumnMenuFilterComponent, selector: "kendo-grid-columnmenu-filter", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuSortComponent, selector: "kendo-grid-columnmenu-sort" }, { kind: "component", type: ColumnMenuLockComponent, selector: "kendo-grid-columnmenu-lock" }, { kind: "component", type: ColumnMenuStickComponent, selector: "kendo-grid-columnmenu-stick" }, { kind: "component", type: ColumnMenuPositionComponent, selector: "kendo-grid-columnmenu-position", inputs: ["expanded", "showLock", "showStick", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuChooserComponent, selector: "kendo-grid-columnmenu-chooser", inputs: ["expanded", "isLast"], outputs: ["expand", "collapse"] }, { kind: "component", type: ColumnMenuAutoSizeColumnComponent, selector: "kendo-grid-columnmenu-autosize-column", inputs: ["column"] }, { kind: "component", type: ColumnMenuAutoSizeAllColumnsComponent, selector: "kendo-grid-columnmenu-autosize-all-columns" }, { kind: "component", type: ColumnMenuItemComponent, selector: "kendo-grid-columnmenu-item", inputs: ["icon", "svgIcon", "indicatorIcon", "text", "selected", "disabled", "expanded", "focused", "service", "column"], outputs: ["itemClick", "expand", "collapse"] }, { kind: "directive", type: ColumnMenuItemDirective, selector: "[kendoGridColumnMenuItem]", inputs: ["kendoGridColumnMenuItem"] }, { kind: "component", type: FilterMenuContainerComponent, selector: "kendo-grid-filter-menu-container", inputs: ["column", "isLast", "isExpanded", "menuTabbingService", "filter", "actionsClass"], outputs: ["close"] }, { kind: "directive", type: EventsOutsideAngularDirective, selector: "[kendoEventsOutsideAngular]", inputs: ["kendoEventsOutsideAngular", "scope"] }, { kind: "component", type: FormComponent, selector: "kendo-grid-external-form", inputs: ["controls", "formSettings", "formGroup", "actionButtons"], outputs: ["formSubmit"] }, { kind: "component", type: ColumnChooserContentComponent, selector: "kendo-grid-column-chooser-content", inputs: ["filterable", "showSelectAll", "showCheckedCount", "allowHideAll", "autoSync", "actionsClass", "closeOnReset", "columns", "isLast", "isExpanded", "service"], outputs: ["close"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: AdaptiveRendererComponent, decorators: [{
             type: Component,
@@ -719,417 +767,463 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
             [cssStyle]="{
                 height: adaptiveService.size === 'small' ? '100vh' : '60vh'
             }"
-            [overlayClickClose]="true"
-            (collapse)="adaptiveGridService.reset()">
-
-            <!-- sortToolbarTool view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'sortToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <div class="k-column-menu k-column-menu-lg">
-                        <div class="k-columnmenu-item-wrapper">
-                            <kendo-grid-columnmenu-item *ngFor="let column of columns"
-                                            [column]="getColumnComponent(column)"
-                                            [text]="column.title || getColumnComponent(column).field"
-                                            (itemClick)="sortBy(column)">
-                            </kendo-grid-columnmenu-item>
-                        </div>
-                    </div>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="x"
-                        [svgIcon]="xIcon"
-                        (click)="clearSorting()">
-                        {{messageFor('sortClearButton')}}
-                    </button>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="check"
-                        [svgIcon]="checkIcon"
-                        themeColor="primary"
-                        (click)="actionSheet.toggle(false)">
-                        {{messageFor('sortDoneButton')}}
-                    </button>
-                </ng-template>
+          [overlayClickClose]="true"
+          (collapse)="adaptiveGridService.reset()">
+        
+          <!-- sortToolbarTool view -->
+          @if (adaptiveGridService.viewType === 'sortToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <div class="k-column-menu k-column-menu-lg">
+                  <div class="k-columnmenu-item-wrapper">
+                    @for (column of columns; track column) {
+                      <kendo-grid-columnmenu-item
+                        [column]="getColumnComponent(column)"
+                        [text]="column.title || getColumnComponent(column).field"
+                        (itemClick)="sortBy(column)">
+                      </kendo-grid-columnmenu-item>
+                    }
+                  </div>
+                </div>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="x"
+                  [svgIcon]="xIcon"
+                  (click)="clearSorting()">
+                  {{messageFor('sortClearButton')}}
+                </button>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="check"
+                  [svgIcon]="checkIcon"
+                  themeColor="primary"
+                  (click)="actionSheet.toggle(false)">
+                  {{messageFor('sortDoneButton')}}
+                </button>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- columnChooserToolbarTool view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnChooserToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-column-chooser-content
-                        #columnChooserContent
-                        [columns]="columns"
-                        [isLast]="true"
-                        [autoSync]="false"
-                        [allowHideAll]="false"
-                        >
-                    </kendo-grid-column-chooser-content>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                    </ng-container>
-                </ng-template>
+          }
+        
+          <!-- columnChooserToolbarTool view -->
+          @if (adaptiveGridService.viewType === 'columnChooserToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-grid-column-chooser-content
+                  #columnChooserContent
+                  [columns]="columns"
+                  [isLast]="true"
+                  [autoSync]="false"
+                  [allowHideAll]="false"
+                  >
+                </kendo-grid-column-chooser-content>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                </ng-container>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- filterToolbarTool first view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'"
-                                    [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-                                    [scope]="this">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <div class="k-column-menu k-column-menu-lg">
-                        <kendo-filter-toolbar-tool></kendo-filter-toolbar-tool>
-                    </div>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <button kendoButton
-                            icon="filter-clear"
-                            [svgIcon]="filterClearIcon"
-                            size="large"
-                            (click)="clearFilters()">
-                            {{messageFor('filterClearAllButton')}}
-                    </button>
-                </ng-template>
-            </kendo-actionsheet-view>
-
-            <!-- filterToolbarTool second view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <ng-container #filterToolbarToolTemplate></ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                    </ng-container>
-                </ng-template>
+          }
+        
+          <!-- filterToolbarTool first view -->
+          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
+            <kendo-actionsheet-view
+              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
+              [scope]="this">
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <div class="k-column-menu k-column-menu-lg">
+                  <kendo-filter-toolbar-tool></kendo-filter-toolbar-tool>
+                </div>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button kendoButton
+                  icon="filter-clear"
+                  [svgIcon]="filterClearIcon"
+                  size="large"
+                  (click)="clearFilters()">
+                  {{messageFor('filterClearAllButton')}}
+                </button>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- filterMenu view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'filterMenu'">
-                <ng-template kendoActionSheetHeaderTemplate >
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-filter-menu-container
-                        #filterMenuContainer
-                        [column]="adaptiveGridService.column"
-                        [filter]="ctx.grid.filter"
-                        (close)="close()"
-                        (keydown.enter)="$event.stopImmediatePropagation()">
-                    </kendo-grid-filter-menu-container>
-                </ng-template>
-                <ng-template kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                    </ng-container>
-                </ng-template>
+          }
+        
+          <!-- filterToolbarTool second view -->
+          @if (adaptiveGridService.viewType === 'filterToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <ng-container #filterToolbarToolTemplate></ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                </ng-container>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- columnMenu first view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'"
-                [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
-                [scope]="this">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>    
-                <ng-template kendoActionSheetContentTemplate>
-                    <div class="k-column-menu k-column-menu-lg">
-                        <kendo-grid-columnmenu-container>
-                            <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" *ngIf="hasSort" [service]="adaptiveGridService.columnMenuService">
-                            </kendo-grid-columnmenu-sort>
-                            <kendo-grid-columnmenu-lock #lockItem *ngIf="hasLock && !hasPosition" [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
-                            </kendo-grid-columnmenu-lock>
-                            <kendo-grid-columnmenu-stick #stickItem *ngIf="hasStick && !hasPosition" [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
-                            </kendo-grid-columnmenu-stick>
-                            <kendo-grid-columnmenu-position
-                                #positionItem
-                                *ngIf="hasPosition"
-                                [showLock]="hasLock"
-                                [showStick]="hasStick"
-                                [kendoGridColumnMenuItem]="positionItem"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [expanded]="false"
-                                (collapse)="navigateToPositionView()">
-                            </kendo-grid-columnmenu-position>
-                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="hasLock || hasStick || adaptiveGridService.column.sortable" class="k-separator"></span>
-                            <kendo-grid-columnmenu-chooser
-                                #chooserItem
-                                *ngIf="hasColumnChooser"
-                                [kendoGridColumnMenuItem]="chooserItem"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [expanded]="false"
-                                (collapse)="navigateToColumnsView()">
-                            </kendo-grid-columnmenu-chooser>
-                            <kendo-grid-columnmenu-autosize-column
-                                #autoSizeColumnItem
-                                *ngIf="hasAutoSizeColumn"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [kendoGridColumnMenuItem]="autoSizeColumnItem"
-                                [column]="adaptiveGridService.column"
-                            >
-                            </kendo-grid-columnmenu-autosize-column>
-
-                            <kendo-grid-columnmenu-autosize-all-columns
-                                #autoSizeAllColumnsItem
-                                *ngIf="hasAutoSizeAllColumns"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
-                            >
-                            </kendo-grid-columnmenu-autosize-all-columns>
-                            <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" *ngIf="adaptiveGridService.column.filterable" class="k-separator"></span>
-                            <kendo-grid-columnmenu-filter
-                                #filterItem
-                                *ngIf="hasFilter"
-                                [kendoGridColumnMenuItem]="filterItem"
-                                [service]="adaptiveGridService.columnMenuService"
-                                [expanded]="false"
-                                (collapse)="navigateToFilterView()">
-                            </kendo-grid-columnmenu-filter>
-                        </kendo-grid-columnmenu-container>
-                    </div>
-                </ng-template>
+          }
+        
+          <!-- filterMenu view -->
+          @if (adaptiveGridService.viewType === 'filterMenu') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate >
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-grid-filter-menu-container
+                  #filterMenuContainer
+                  [column]="adaptiveGridService.column"
+                  [filter]="ctx.grid.filter"
+                  (close)="close()"
+                  (keydown.enter)="$event.stopImmediatePropagation()">
+                </kendo-grid-filter-menu-container>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                </ng-container>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- columnMenu second view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'columnMenu'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-column-chooser-content
-                        *ngIf="adaptiveGridService.secondaryView === 'columnChooser'"
-                        #columnChooserContent
-                        [columns]="adaptiveGridService.columns"
-                        [isLast]="true"
-                        [autoSync]="false"
-                        [allowHideAll]="false"
-                        >
-                    </kendo-grid-column-chooser-content>
-                    <kendo-grid-filter-menu-container
-                        *ngIf="adaptiveGridService.secondaryView === 'columnFilter'"
+          }
+        
+          <!-- columnMenu first view -->
+          @if (adaptiveGridService.viewType === 'columnMenu') {
+            <kendo-actionsheet-view
+              [kendoEventsOutsideAngular]="{transitionend: onAnimationEnd}"
+              [scope]="this">
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <div class="k-column-menu k-column-menu-lg">
+                  <kendo-grid-columnmenu-container>
+                    @if (hasSort) {
+                      <kendo-grid-columnmenu-sort #sortItem [kendoGridColumnMenuItem]="sortItem" [service]="adaptiveGridService.columnMenuService">
+                      </kendo-grid-columnmenu-sort>
+                    }
+                    @if (hasLock && !hasPosition) {
+                      <kendo-grid-columnmenu-lock #lockItem [kendoGridColumnMenuItem]="lockItem" [service]="adaptiveGridService.columnMenuService">
+                      </kendo-grid-columnmenu-lock>
+                    }
+                    @if (hasStick && !hasPosition) {
+                      <kendo-grid-columnmenu-stick #stickItem [kendoGridColumnMenuItem]="stickItem" [service]="adaptiveGridService.columnMenuService">
+                      </kendo-grid-columnmenu-stick>
+                    }
+                    @if (hasPosition) {
+                      <kendo-grid-columnmenu-position
+                        #positionItem
+                        [showLock]="hasLock"
+                        [showStick]="hasStick"
+                        [kendoGridColumnMenuItem]="positionItem"
+                        [service]="adaptiveGridService.columnMenuService"
+                        [expanded]="false"
+                        (collapse)="navigateToPositionView()">
+                      </kendo-grid-columnmenu-position>
+                    }
+                    @if (hasLock || hasStick || adaptiveGridService.column.sortable) {
+                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
+                    }
+                    @if (hasColumnChooser) {
+                      <kendo-grid-columnmenu-chooser
+                        #chooserItem
+                        [kendoGridColumnMenuItem]="chooserItem"
+                        [service]="adaptiveGridService.columnMenuService"
+                        [expanded]="false"
+                        (collapse)="navigateToColumnsView()">
+                      </kendo-grid-columnmenu-chooser>
+                    }
+                    @if (hasAutoSizeColumn) {
+                      <kendo-grid-columnmenu-autosize-column
+                        #autoSizeColumnItem
+                        [service]="adaptiveGridService.columnMenuService"
+                        [kendoGridColumnMenuItem]="autoSizeColumnItem"
                         [column]="adaptiveGridService.column"
-                        [filter]="ctx.grid.filter"
-                        (close)="close()"
-                        [kendoEventsOutsideAngular]="{'keydown.escape': close}"
-                        [scope]="this">
-                    </kendo-grid-filter-menu-container>
-                    <kendo-grid-columnmenu-lock
-                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasLock"
-                        [service]="adaptiveGridService.columnMenuService">
-                    </kendo-grid-columnmenu-lock>
-                    <kendo-grid-columnmenu-stick
-                        *ngIf="adaptiveGridService.secondaryView === 'columnPosition' && hasStick"
-                        [service]="adaptiveGridService.columnMenuService">
-                    </kendo-grid-columnmenu-stick>
-                </ng-template>
-                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnChooser'" kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
-                    </ng-container>
-                </ng-template>
-
-                <ng-template *ngIf="adaptiveGridService.secondaryView === 'columnFilter'" kendoActionSheetFooterTemplate>
-                    <ng-container [ngTemplateOutlet]="filterFooterButtons">
-                    </ng-container>
-                </ng-template>
+                        >
+                      </kendo-grid-columnmenu-autosize-column>
+                    }
+                    @if (hasAutoSizeAllColumns) {
+                      <kendo-grid-columnmenu-autosize-all-columns
+                        #autoSizeAllColumnsItem
+                        [service]="adaptiveGridService.columnMenuService"
+                        [kendoGridColumnMenuItem]="autoSizeAllColumnsItem"
+                        >
+                      </kendo-grid-columnmenu-autosize-all-columns>
+                    }
+                    @if (adaptiveGridService.column.filterable) {
+                      <span [style.borderColor]="'rgba(0, 0, 0, 0.08)'" class="k-separator"></span>
+                    }
+                    @if (hasFilter) {
+                      <kendo-grid-columnmenu-filter
+                        #filterItem
+                        [kendoGridColumnMenuItem]="filterItem"
+                        [service]="adaptiveGridService.columnMenuService"
+                        [expanded]="false"
+                        (collapse)="navigateToFilterView()">
+                      </kendo-grid-columnmenu-filter>
+                    }
+                  </kendo-grid-columnmenu-container>
+                </div>
+              </ng-template>
             </kendo-actionsheet-view>
-
-            <!-- external editing view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'externalEditing'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-grid-external-form
-                        [controls]="externalEditingSettings.formControls"
-                        [formGroup]="externalEditingSettings.formGroup"
-                        [formSettings]="externalEditingSettings.formSettings"
-                        [actionButtons]="false">
-                    </kendo-grid-external-form>
-                </ng-template>
-
+          }
+        
+          <!-- columnMenu second view -->
+          @if (adaptiveGridService.viewType === 'columnMenu') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                @if (adaptiveGridService.secondaryView === 'columnChooser') {
+                  <kendo-grid-column-chooser-content
+                    #columnChooserContent
+                    [columns]="adaptiveGridService.columns"
+                    [isLast]="true"
+                    [autoSync]="false"
+                    [allowHideAll]="false"
+                    >
+                  </kendo-grid-column-chooser-content>
+                }
+                @if (adaptiveGridService.secondaryView === 'columnFilter') {
+                  <kendo-grid-filter-menu-container
+                    [column]="adaptiveGridService.column"
+                    [filter]="ctx.grid.filter"
+                    (close)="close()"
+                    [kendoEventsOutsideAngular]="{'keydown.escape': close}"
+                    [scope]="this">
+                  </kendo-grid-filter-menu-container>
+                }
+                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasLock) {
+                  <kendo-grid-columnmenu-lock
+                    [service]="adaptiveGridService.columnMenuService">
+                  </kendo-grid-columnmenu-lock>
+                }
+                @if (adaptiveGridService.secondaryView === 'columnPosition' && hasStick) {
+                  <kendo-grid-columnmenu-stick
+                    [service]="adaptiveGridService.columnMenuService">
+                  </kendo-grid-columnmenu-stick>
+                }
+              </ng-template>
+              @if (adaptiveGridService.secondaryView === 'columnChooser') {
                 <ng-template kendoActionSheetFooterTemplate>
-                    <button kendoButton
-                        size="large"
-                        icon="cancel"
-                        [svgIcon]="cancelIcon"
-                        (click)="actionSheet.toggle(false)">
-                        {{messageFor('externalEditingCancelText')}}
-                    </button>
-                    <button kendoButton
-                        themeColor="primary"
-                        size="large"
-                        icon="save"
-                        [svgIcon]="saveIcon"
-                        (click)="saveEditing()"
-                        [disabled]="!externalEditingSettings.formGroup.valid">
-                        {{messageFor('externalEditingSaveText')}}
-                    </button>
-                </ng-template>
-            </kendo-actionsheet-view>
-
-            <!-- groupToolbarTool view -->
-            <kendo-actionsheet-view *ngIf="adaptiveGridService.viewType === 'groupToolbarTool'">
-                <ng-template kendoActionSheetHeaderTemplate>
-                    <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
-                    </ng-container>
-                </ng-template>
-                <ng-template kendoActionSheetContentTemplate>
-                    <kendo-group-toolbar-tool [adaptive]="true"></kendo-group-toolbar-tool>
+                  <ng-container [ngTemplateOutlet]="actionSheetFooterTemplate">
+                  </ng-container>
                 </ng-template>
+              }
+              @if (adaptiveGridService.secondaryView === 'columnFilter') {
                 <ng-template kendoActionSheetFooterTemplate>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="x"
-                        [svgIcon]="xIcon"
-                        (click)="clearGrouping()">
-                        {{messageFor('groupClearButton')}}
-                    </button>
-                    <button
-                        kendoButton
-                        size="large"
-                        fillMode="solid"
-                        icon="check"
-                        [svgIcon]="checkIcon"
-                        themeColor="primary"
-                        (click)="actionSheet.toggle(false)">
-                        {{messageFor('groupDoneButton')}}
-                    </button>
+                  <ng-container [ngTemplateOutlet]="filterFooterButtons">
+                  </ng-container>
                 </ng-template>
+              }
+            </kendo-actionsheet-view>
+          }
+        
+          <!-- external editing view -->
+          @if (adaptiveGridService.viewType === 'externalEditing') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-grid-external-form
+                  [controls]="externalEditingSettings.formControls"
+                  [formGroup]="externalEditingSettings.formGroup"
+                  [formSettings]="externalEditingSettings.formSettings"
+                  [actionButtons]="false">
+                </kendo-grid-external-form>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button kendoButton
+                  size="large"
+                  icon="cancel"
+                  [svgIcon]="cancelIcon"
+                  (click)="actionSheet.toggle(false)">
+                  {{messageFor('externalEditingCancelText')}}
+                </button>
+                <button kendoButton
+                  themeColor="primary"
+                  size="large"
+                  icon="save"
+                  [svgIcon]="saveIcon"
+                  (click)="saveEditing()"
+                  [disabled]="!externalEditingSettings.formGroup.valid">
+                  {{messageFor('externalEditingSaveText')}}
+                </button>
+              </ng-template>
             </kendo-actionsheet-view>
+          }
+        
+          <!-- groupToolbarTool view -->
+          @if (adaptiveGridService.viewType === 'groupToolbarTool') {
+            <kendo-actionsheet-view>
+              <ng-template kendoActionSheetHeaderTemplate>
+                <ng-container [ngTemplateOutlet]="actionSheetHeaderTemplate">
+                </ng-container>
+              </ng-template>
+              <ng-template kendoActionSheetContentTemplate>
+                <kendo-group-toolbar-tool [adaptive]="true"></kendo-group-toolbar-tool>
+              </ng-template>
+              <ng-template kendoActionSheetFooterTemplate>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="x"
+                  [svgIcon]="xIcon"
+                  (click)="clearGrouping()">
+                  {{messageFor('groupClearButton')}}
+                </button>
+                <button
+                  kendoButton
+                  size="large"
+                  fillMode="solid"
+                  icon="check"
+                  [svgIcon]="checkIcon"
+                  themeColor="primary"
+                  (click)="actionSheet.toggle(false)">
+                  {{messageFor('groupDoneButton')}}
+                </button>
+              </ng-template>
+            </kendo-actionsheet-view>
+          }
         </kendo-actionsheet>
-
+        
         <ng-template #actionSheetHeaderTemplate>
-            <div class="k-actionsheet-titlebar-group">
-                <div *ngIf="adaptiveGridService.secondaryView" class="k-actionsheet-actions">
-                    <button
-                    kendoButton
-                    icon="chevron-left"
-                    [svgIcon]="chevronLeft"
-                    fillMode="flat"
-                    size="large"
-                    [title]="messageFor('adaptiveBackButtonTitle')"
-                    (click)="prevView()">
-                    </button>
-                </div>
-                <div class="k-actionsheet-title">
-                    <div *ngIf="hasTitle" class="k-text-center">
-                       {{actionSheetTitle}}
-                    </div>
-                    <div *ngIf="hasSubtitle"
-                        class="k-actionsheet-subtitle k-text-center">
-                        {{messageFor('columnsSubtitle')}}
-                    </div>
-                </div>
-                <div *ngIf="hasXCloseIcon" class="k-actionsheet-actions">
-                    <button
-                    kendoButton
-                    icon="x"
-                    [svgIcon]="xIcon"
-                    fillMode="flat"
-                    size="large"
-                    [title]="messageFor('adaptiveCloseButtonTitle')"
-                    (click)="close()">
-                    </button>
+          <div class="k-actionsheet-titlebar-group">
+            @if (adaptiveGridService.secondaryView) {
+              <div class="k-actionsheet-actions">
+                <button
+                  kendoButton
+                  icon="chevron-left"
+                  [svgIcon]="chevronLeft"
+                  fillMode="flat"
+                  size="large"
+                  [title]="messageFor('adaptiveBackButtonTitle')"
+                  (click)="prevView()">
+                </button>
+              </div>
+            }
+            <div class="k-actionsheet-title">
+              @if (hasTitle) {
+                <div class="k-text-center">
+                  {{actionSheetTitle}}
                 </div>
-                <div *ngIf="hasCheckCloseIcon" class="k-actionsheet-actions">
-                    <button
-                    kendoButton
-                    icon="check"
-                    [svgIcon]="checkIcon"
-                    fillMode="flat"
-                    size="large"
-                    themeColor="primary"
-                    [title]="messageFor('adaptiveCloseButtonTitle')"
-                    (click)="actionSheet.toggle(false)">
-                    </button>
+              }
+              @if (hasSubtitle) {
+                <div
+                  class="k-actionsheet-subtitle k-text-center">
+                  {{messageFor('columnsSubtitle')}}
                 </div>
+              }
             </div>
+            @if (hasXCloseIcon) {
+              <div class="k-actionsheet-actions">
+                <button
+                  kendoButton
+                  icon="x"
+                  [svgIcon]="xIcon"
+                  fillMode="flat"
+                  size="large"
+                  [title]="messageFor('adaptiveCloseButtonTitle')"
+                  (click)="close()">
+                </button>
+              </div>
+            }
+            @if (hasCheckCloseIcon) {
+              <div class="k-actionsheet-actions">
+                <button
+                  kendoButton
+                  icon="check"
+                  [svgIcon]="checkIcon"
+                  fillMode="flat"
+                  size="large"
+                  themeColor="primary"
+                  [title]="messageFor('adaptiveCloseButtonTitle')"
+                  (click)="actionSheet.toggle(false)">
+                </button>
+              </div>
+            }
+          </div>
         </ng-template>
-
+        
         <ng-template #actionSheetFooterTemplate>
-            <button
-                #resetButton
-                kendoButton
-                size="large"
-                fillMode="solid"
-                [svgIcon]="arrowRotateCcwIcon"
-                icon="arrow-rotate-ccw"
-                type="button"
+          <button
+            #resetButton
+            kendoButton
+            size="large"
+            fillMode="solid"
+            [svgIcon]="arrowRotateCcwIcon"
+            icon="arrow-rotate-ccw"
+            type="button"
                 [kendoEventsOutsideAngular]="{click: cancelChanges, 
                                             'keydown.enter': cancelChanges,
                                             'keydown.space': cancelChanges,
                                             'keydown.tab': onTab
                                             }"
-                [scope]="this">
-                {{ messageFor('columnsReset') }}
-            </button>
-            <button
-                #applyButton
-                kendoButton
-                type="button"
-                [svgIcon]="checkIcon"
-                icon="check"
-                size="large"
-                fillMode="solid"
-                themeColor="primary"
+            [scope]="this">
+            {{ messageFor('columnsReset') }}
+          </button>
+          <button
+            #applyButton
+            kendoButton
+            type="button"
+            [svgIcon]="checkIcon"
+            icon="check"
+            size="large"
+            fillMode="solid"
+            themeColor="primary"
                 [kendoEventsOutsideAngular]="{click: applyChanges,
                                             'keydown.enter': applyChanges,
                                             'keydown.space': applyChanges
                                             }"
-                [scope]="this">
-                {{ messageFor('columnsApply') }}
-            </button>
+            [scope]="this">
+            {{ messageFor('columnsApply') }}
+          </button>
         </ng-template>
-
+        
         <ng-template #filterFooterButtons>
-            <button
-                kendoButton
-                size="large"
-                fillMode="solid"
-                (click)="adaptiveGridService.resetFilter()">
-                {{messageFor('filterClearButton')}}
-            </button>
-            <button
-                kendoButton
-                size="large"
-                fillMode="solid"
-                themeColor="primary"
-                [disabled]="adaptiveGridService.filterMenuContainer.disabled"
-                (click)="adaptiveGridService.submitFilter()">
-                {{messageFor('filterFilterButton')}}
-            </button>
+          <button
+            kendoButton
+            size="large"
+            fillMode="solid"
+            (click)="adaptiveGridService.resetFilter()">
+            {{messageFor('filterClearButton')}}
+          </button>
+          <button
+            kendoButton
+            size="large"
+            fillMode="solid"
+            themeColor="primary"
+            [disabled]="adaptiveGridService.filterMenuContainer.disabled"
+            (click)="adaptiveGridService.submitFilter()">
+            {{messageFor('filterFilterButton')}}
+          </button>
         </ng-template>
-    `,
+        `,
                     standalone: true,
                     imports: [
-                        NgIf,
-                        NgFor,
                         NgTemplateOutlet,
                         ActionSheetComponent,
                         ActionSheetViewComponent,