<ng-container *ngIf="gridLayout">
    <div #container style="width: 100%">
        <kendo-grid #grid (edit)="handleEdit($event)" 
            [selectable]="(gridLayout.selectable || true)"
            [height]="gridLayout.height || height || 0" 
            [scrollable]="virtualScrolling ? 'virtual' : (gridLayout.scrollable || 'none')" 
            (cancel)="handleCancel($event)" 
            (save)="handleSave($event)" 
            [group]="dataGroups" 
            [groupable]="gridLayout.groupable || false" 
            style="width: 100%;" 
            [sortable]="gridLayout.sortable" 
            [sort]="smartDataSource.sort || []"  
            [data]="smartDataSource | async" 
            [pageSize]="gridLayout.pageable?.pageSize"
            [pageable]="gridLayout.pageable"
            [loading]="loading"
            [rowHeight]="gridLayout.rowHeight"
            [detailRowHeight]="gridLayout.detailRowHeight"
            [filter]="filter"
            [filterable]="(gridLayout.filterable && filterable !== false) || (filterable === true && gridLayout.filterable !== false)"
            [skip]="skip"
            [resizable]="gridLayout.resizable"
            kendoGridSelectBy="_id"
            [selectedKeys]="selectedKeys">
                    <kendo-grid-checkbox-column [width]="35" [autoSize]="true" *ngIf="gridLayout?.selectable?.showCheckboxes">
                        <ng-template kendoGridHeaderTemplate>
                            <input class="k-checkbox" id="selectAllCheckbox" kendoGridSelectAllCheckbox>
                            <label class="k-checkbox-label" for="selectAllCheckbox"></label>
                        </ng-template>
                    </kendo-grid-checkbox-column>
                    <ng-template ngFor [ngForOf]="gridLayout.columns || []" let-column>
                        <kendo-grid-column [filterable]="column.filterable !== false && !column.template && isFilterable(column.field)" [width]="column.width" *ngIf="!column.windowSizes || column.windowSizes.indexOf(gridSize) >= 0" [editor]="getColumnEditor(column)" [field]="!!column.template ? undefined : column.field" [title]="column.title">
                            <ng-template kendoGridFilterCellTemplate *ngIf="!column.template && isFilterable(column.field) && column.type !== 'image'" let-filter>
                                <ng-container [ngSwitch]="getColumnEditor(column)">
                                    <smart-grid-combo-filter
                                        *ngSwitchCase="'combo'"
                                        [valueList]="column.valueList"
                                        [filter]="filter"
                                        [field]="column.field">
                                    </smart-grid-combo-filter>
                                    <kendo-grid-string-filter-cell [filter]="filter" [operator]="getDefaultOperator(column)" *ngSwitchCase="'text'" [column]="column" (valueChange)="grid.filterChange.next(filter)">
                                        <kendo-filter-eq-operator></kendo-filter-eq-operator>
                                        <kendo-filter-neq-operator></kendo-filter-neq-operator>
                                        <kendo-filter-startswith-operator></kendo-filter-startswith-operator>
                                        <kendo-filter-endswith-operator></kendo-filter-endswith-operator>
                                        <kendo-filter-isnull-operator></kendo-filter-isnull-operator>
                                        <kendo-filter-isnotnull-operator></kendo-filter-isnotnull-operator>
                                    </kendo-grid-string-filter-cell>
                                    <kendo-grid-date-filter-cell [filter]="filter" [operator]="getDefaultOperator(column)" *ngSwitchCase="'date'" [column]="column"></kendo-grid-date-filter-cell>
                                    <kendo-grid-numeric-filter-cell [filter]="filter" [operator]="getDefaultOperator(column)" *ngSwitchCase="'numeric'" [column]="column"></kendo-grid-numeric-filter-cell>
                                    <kendo-grid-boolean-filter-cell [filter]="filter" *ngSwitchCase="'boolean'" [column]="column"></kendo-grid-boolean-filter-cell>
                                </ng-container>
                            </ng-template>
                            <ng-template *ngIf="!!column.format && column.type !== 'number' && column.type !== 'integer' && column.type !== 'decimal' && column.type !== 'image' && column.type !== 'logical' && !column.valueList" kendoGridCellTemplate let-dataItem>
                                <span [title]="shouldTruncateText ? getDateString(dataItem, column.field, column.format) : ''" [ngClass]="{ 'smart-table-cell': true, truncated: shouldTruncateText, 'text-wrap': !shouldTruncateText }">
                                    {{getDateString(dataItem, column.field, column.format)}}
                                </span>
                            </ng-template>
                            <ng-template *ngIf="!!column.template && column.type !== 'image' && column.type !== 'logical' && !column.valueList" kendoGridCellTemplate let-dataItem>
                                <span [title]="shouldTruncateText ? getFieldValue(dataItem, column.template) : ''" [ngClass]="{ 'smart-table-cell': true, truncated: shouldTruncateText, 'text-wrap': !shouldTruncateText }">
                                    {{getFieldValue(dataItem, column.template)}}
                                </span>
                            </ng-template>
                            <ng-template *ngIf="!column.format && !column.template && column.type !== 'image' && column.type !== 'logical' && !column.valueList" kendoGridCellTemplate let-dataItem>
                                <span [title]="shouldTruncateText ? getFieldValue(dataItem, column.template || column.field) : ''" [ngClass]="{ 'smart-table-cell': true, truncated: shouldTruncateText, 'text-wrap': !shouldTruncateText }">
                                    {{getFieldValue(dataItem, column.template || column.field)}}
                                </span>
                            </ng-template>
                            <ng-template *ngIf="!!column.format && (column.type === 'number' || column.type === 'integer' || column.type === 'decimal') && !column.template && column.type !== 'logical' && column.type !== 'image' && !column.valueList" kendoGridCellTemplate let-dataItem>
                                <span [title]="shouldTruncateText ? getFieldValue(dataItem, column.template || column.field, column.format) : ''" [ngClass]="{ 'smart-table-cell': true, truncated: shouldTruncateText, 'text-wrap': !shouldTruncateText }">
                                    {{getFieldValue(dataItem, column.field, column.format)}}
                                </span>
                            </ng-template>
                            <ng-template *ngIf="column.type === 'image'" kendoGridCellTemplate let-dataItem>
                                <div *ngIf="column.valueList || column.valueListKey" [title]="shouldTruncateText ? getFieldValue(dataItem, column.template || column.field) : ''" [ngClass]="{ 'smart-table-cell': true, truncated: shouldTruncateText, 'text-wrap': !shouldTruncateText }">
                                    <img *ngIf="!column.displaySettings || column.displaySettings === 'Image' || column.displaySettings === 'ImageDescription'" [src]="getCellImage(dataItem, column.field) && getCellImage(dataItem, column.field).imageUrl" width="25"/>
                                    <span *ngIf="!column.displaySettings || column.displaySettings === 'Description' || column.displaySettings === 'ImageDescription'" class="image-description">{{ getCellImage(dataItem, column.field) && getCellImage(dataItem, column.field).description }}</span>
                                </div>
                                <div *ngIf="!column.valueList && !column.valueListKey" [ngClass]="{ 'smart-table-cell': true }">
                                    <img [src]="'data:image/jpeg;base64,' + getFieldValue(dataItem, column.template || column.field)" width="25" />
                                </div>
                            </ng-template>
                            <ng-template *ngIf="column.type === 'logical'" kendoGridCellTemplate let-dataItem>
                                <span [ngClass]="{ 'smart-table-cell': true }">
                                    <input type="checkbox" [checked]="getFieldValue(dataItem, column.field)" [disabled]="true">
                                </span>
                            </ng-template>

                            <ng-template *ngIf="column.valueList && column.type !== 'image' && column.type !== 'logical'"  kendoGridCellTemplate let-dataItem>
                                <div [title]="shouldTruncateText ? column.valueList[dataItem[column.field]]?.text : ''" [ngClass]="{ 'smart-table-cell': true, truncated: shouldTruncateText, 'text-wrap': !shouldTruncateText }">
                                    <img *ngIf="column.valueList[dataItem[column.field]]?.image" [src]="computeCellImageUrl(column.valueList[dataItem[column.field]].image)" class="cell-image">
                                    <span>{{ column.valueList[dataItem[column.field]]?.text || ''}}</span>
                                </div>
                            </ng-template>
                        </kendo-grid-column>
                    </ng-template>
                    <kendo-grid-command-column [title]="gridLayout.editButtonTitle || ''" *ngIf="gridLayout.editable && gridLayout.editable.mode === 'inline'">
                        <ng-template kendoGridHeaderTemplate>
                            {{gridLayout.editButtonTitle || ''}}
                        </ng-template>
                        <ng-template kendoGridCellTemplate let-isNew="isNew">
                            <button kendoGridEditCommand>Edit</button>
                            <button kendoGridSaveCommand>Save</button>
                            <button kendoGridCancelCommand>Cancel</button>
                        </ng-template>
                    </kendo-grid-command-column>
                    <ng-container *ngIf="gridLayout.customCommandColumns">
                        <kendo-grid-command-column [width]="cmd.width" [title]="cmd.title || ''" *ngFor="let cmd of gridLayout.customCommandColumns">
                            <ng-template kendoGridHeaderTemplate>
                                {{cmd.title || ''}}
                            </ng-template>
                            <ng-template kendoGridCellTemplate let-dataItem>
                                <button kendoButton *ngIf="!!cmd.form" [imageUrl]="cmd.imageUrl" [title]="!!cmd.imageUrl ? cmd.text : ''" (click)="navigateToCommandForm(cmd, dataItem)">{{!!cmd.imageUrl ? '' : cmd.text}}</button>
                                <button kendoButton *ngIf="!!cmd.action && !cmd.form" [imageUrl]="cmd.imageUrl" [title]="!!cmd.imageUrl ? cmd.text : ''" (click)="commandButtonClicked(cmd, dataItem)">{{!!cmd.imageUrl ? '' : cmd.text}}</button>
                            </ng-template>
                        </kendo-grid-command-column>
                    </ng-container>
                    <ng-container *ngIf="gridLayout.detailTemplate">
                        <div *kendoGridDetailTemplate="let dataItem">
                            <smart-grid-detail-template [dataItem]="dataItem" [formConfiguration]="gridLayout.detailTemplate"></smart-grid-detail-template>
                        </div>
                    </ng-container>
                    <kendo-grid-messages
                        [noRecords]="(showNoRecords && messages.noRecords) || ''">
                    </kendo-grid-messages>
        </kendo-grid>
        <kendo-resize-sensor (resize)="resize()"></kendo-resize-sensor>
    </div>
    </ng-container>

./smart-grid.component.css

@keyframes spin {
	to { transform: rotate(1turn); }
}

::ng-deep .progress {
	position: relative;
	display: inline-block;
	width: 5em;
	height: 5em;
	margin: 0 .5em;
	font-size: 12px;
	text-indent: 999em;
	overflow: hidden;
	animation: spin 1s infinite steps(8);
    background: transparent;
    box-shadow: none !important;
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    margin: auto;
}

::ng-deep .small.progress {
	font-size: 6px;
}

::ng-deep .large.progress {
	font-size: 24px;
}

::ng-deep .progress:before,
::ng-deep .progress:after,
::ng-deep .progress > div:before,
::ng-deep .progress > div:after {
	content: '';
	position: absolute;
	top: 0;
	left: 2.25em; /* (container width - part width)/2  */
	width: .5em;
	height: 1.5em;
	border-radius: .2em;
	background: #eee;
	transform-origin: 50% 2.5em; /* container height / 2 */
}

::ng-deep .progress:before {
	background: #555;
}

::ng-deep .progress:after {
	transform: rotate(-45deg);
	background: #777;
}

::ng-deep .progress > div:before {
	transform: rotate(-90deg);
	background: #999;
}

::ng-deep .progress > div:after {
	transform: rotate(-135deg);
	background: #bbb;
}
::ng-deep .non-sortable {
	cursor: default !important;
}

::ng-deep .smart-table-cell {
	width: 100%;
}

::ng-deep .smart-table-cell.truncated {
	white-space: nowrap;
	text-overflow: ellipsis;
}

::ng-deep .smart-table-cell.text-wrap {
	word-break: break-word;
}

::ng-deep .k-grid.truncated table {
	table-layout: fixed;
}

.image-description {
	margin-left: 7px;
	margin-right: 7px;
}

.cell-image {
	margin-right: 0.3em;
}

::ng-deep .smart-grid-disabled-overlay {
	opacity: 0.6;
	background-color: lightgray;
	/* Minimum z-index that is higher than the Kendo UI Grid's pager z-index */
	z-index: 3;
}