In Angular Grid Grouping, Do we have the ability to display a row with multiple columns instead of a specific field?
For Ex: 
https://www.telerik.com/kendo-angular-ui/components/grid/grouping/basics/
Instead of adding a specific field that we group by, Could we add a row with multiple columns?

Additionally, is there a way to achieve a hierarchical view within the grid itself? Similar to the Master Detail functionality, we'd like to have sub-rows that share the same columns as the main row, but without treating them as separate components with distinct headers.
https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/#:~:text=To%20apply%20a%20hierarchical%20order%20to%20the%20desired,are%20filtered%20by%20the%20parent%20key%20field%20value.

<activity-overlay [activity]="portfolioDataLoader$" class="fade-out">
    <kendo-grid [data]="buildings" [height]="500" [filterable]="true" >
        <kendo-grid-column field="name" [title]="'GROUP_DETAILS.NAME' | translate" width="200" [filterable]="true" ></kendo-grid-column>
        <kendo-grid-column field="description" [title]="'GROUP_DETAILS.DESCRIPTION' | translate" width="300" [filterable]="true"></kendo-grid-column>
        <kendo-grid-column [title]="'PORTFOLIO.DETAILED_VIEW'| translate" [style.text-align]="'center'">
            <ng-template kendoGridCellTemplate let-dataItem>
                <i class="tk tk-arrow-r-o tk-3x font-weight-bold w-100 text-center" (click)="detailView(dataItem)"></i>
            </ng-template>
        </kendo-grid-column>
        <kendo-grid-column [title]="'PORTFOLIO.ACTIONS' | translate">
            <ng-template kendoGridCellTemplate let-dataItem>
                <div class="d-flex gap-2 w-100 justify-content-center">
                    <i class="tk tk-pencil-o tk-3x font-weight-bold  text-center edit" [hidden]="dataItem.isUpdating"
                        (click)="editGroup(dataItem)"></i>
                    <i class="tk tk-check-o tk-3x font-weight-bold  text-center save"
                        [class]="isSavingInProgress ? 'k-icon k-i-loading' : ''" [hidden]="!dataItem.isUpdating"
                        (click)="saveChanges(dataItem)"></i>
                    <i class="tk tk-reset-o tk-3x font-weight-bold  text-center reset" [hidden]="!dataItem.isUpdating"
                        (click)="resetGroup(dataItem)"></i>
                </div>
            </ng-template>
        </kendo-grid-column>
        <ng-template kendoGridDetailTemplate="" let-dataItem>
            <kendo-grid class="inline-grid" [data]="buildingsGroupByNames[dataItem.name] ? buildingsGroupByNames[dataItem.name]  : []" [scrollable]="'none'">
                <kendo-grid-column field="groupName" [title]="'PORTFOLIO.GROUP_NAME' | translate"></kendo-grid-column>
                <kendo-grid-column field="rearDoors" [title]="'PORTFOLIO.FLOORS' | translate">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <kendo-multiselect [clearButton]="false" [disabled]="true" [data]="groupStopsInfo[dataItem.groupDeviceId]"
                            textField="groupFloorLabel"
                            valueField="groupStopId" valuePrimitive="true"
                            [(ngModel)]="dataItem.groupFloorAccess">
                            <ng-template kendoMultiSelectHeaderTemplate let-dataItem>
                                <div class="content-box">
                                    <p class="lead m-0">
                                        {{'PORTFOLIO.SELECT_ALL' | translate}}
                                    </p>
                                </div>
                            </ng-template>
                        </kendo-multiselect>
                    </ng-template>
                </kendo-grid-column>
                <kendo-grid-column field="isVipCallsAllowed" [title]="'PORTFOLIO.PERMISSIONS' | translate">
                    <ng-template kendoGridCellTemplate let-dataItem>
                        <kendo-multiselect [data]="elevatorFunctionalityLOV" [clearButton]="false"
                            [disabled]="!dataItem.isUpdating" [(ngModel)]="dataItem.permissions">
                            <ng-template kendoMultiSelectItemTemplate="" let-dataItem>
                                <ng-container [ngSwitch]="dataItem">
                                    <ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
                                        translate}}</ng-container>
                                    <ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
                                        translate}}</ng-container>
                                </ng-container>
                            </ng-template>
                            <ng-template kendoMultiSelectTagTemplate let-dataItem>
                                <ng-container [ngSwitch]="dataItem">
                                    <ng-container *ngSwitchCase="'isVipCallsAllowed'">{{'PORTFOLIO.ALLOW_VIP_CALLS' |
                                        translate}}</ng-container>
                                    <ng-container *ngSwitchCase="'isHandicapCallsAllowed'">{{'PORTFOLIO.ALLOW_HANDICAP_CALLS' |
                                        translate}}</ng-container>
                                </ng-container>
                            </ng-template>
                        </kendo-multiselect>
                    </ng-template>
                </kendo-grid-column>
              </kendo-grid>
        </ng-template>
      </kendo-grid>
      <ng-template #floorsTemplate let-floors>
        <span>{{ floors.value === 'all' ? 'All floors' : floors.value.join(', ') }}</span>
      </ng-template>
    <button type="button" class="btn btn-primary d-flex gap-2 align-items-center mt-4" (click)="addGroup()">
        <i class="tk tk-plus-o tk-2x"></i>
        <span>{{'PORTFOLIO.CREATE_USER_GROUP' | translate}}</span>
    </button>
</activity-overlay>


 I added [filterable]-true property for Name and Description property filters are coming. But they are not working when I try to search

Below is the output :-

Hello,

the Timeline component displays a collection of events grouped by the year of the event.

Is there a way to group the events in a more granular way? E.g. by month?

Best regards,
Thomas

Hi,

My Code is below , I am using dropdown list in kendoGridEditTemplate it has a value and text field. Also i am using [columnMenu]="{ filter: true }" in the grid to get column menu filter. When i filter through the filter

of this column it filters on the value field of the rather than the text field of the dropdown list.

I want the filter to filter on text field of the dropdown. Please help

If I upgrade to version 16.6, any component that has a normal html table in the same page with a kendo-grid component throws an error.  Reverting to version 16.5 fixes the issue.

NullInjectorError: NullInjectorError: No provider for ColumnResizingService!

I am using <kendo-tabstrip> and i have 10 tabs <kendo-tabstrip-tab> that should be loaded all of them when I enter the page. If i have only 3-5 tabs are loaded okay, but with 10, it loads only 5 and does not display the content of them at all and when i click on them it displays for each click the remaing tab and after 5 clicks I have all of the tabs with content loaded. I tried everything, ChanceDectorRef, but it still does not work. 

I let the code bellow:

<kendo-tabstrip #tabstrip class="tabs-outside-section" (tabSelect)="onTabSelect($event)">
  <kendo-tabstrip-tab
    *ngFor="let tab of tabs; let i = index"
    [title]="tab.title | translate"
    [selected]="selectedIndex === i">
    <ng-template kendoTabContent>
      <ng-container *ngComponentOutlet="tab.component"></ng-container>
    </ng-template>
  </kendo-tabstrip-tab>
</kendo-tabstrip>

  tabs = [
    { title: this.resourceCodes.common.generalDetails, component: Tab1Component },
    { title: this.resourceCodes.booking.common.reservations, component: Tab2Component },
    { title: this.resourceCodes.menu.vouchers, component: Tab3Component },
    { title: this.resourceCodes.menu.campaigns, component: Tab4Component },
    { title: this.resourceCodes.menu.messages, component: Tab5Component },
    { title: this.resourceCodes.menu.interactions, component: Tab6Component },
    { title: this.resourceCodes.document.documents, component: Tab7Component },
    { title: this.resourceCodes.menu.offers, component: Tab8Component },
    { title: this.resourceCodes.menu.surveys, component: Tab9Component },
    { title: this.resourceCodes.menu.reviews, component: Tab10Component },
  ];

  constructor(
    private router: Router,
    userService: UserService,
    private route: ActivatedRoute,
    private cdr: ChangeDetectorRef
  ) {
    this.authUserModel = userService.authUser;
    this.currentUrl = this.router.url;
    this.checkAndSetSelectedIndex(this.currentUrl);
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        if (this.currentUrl === event.urlAfterRedirects) {
          // URL has not changed, read from localStorage
          const savedIndex = localStorage.getItem('selectedCustomerTabIndex');
          if (savedIndex !== null) {
            this.selectedIndex = parseInt(savedIndex, 10);
          }
        } else {
          this.selectedIndex = 0;
          localStorage.removeItem('selectedCustomerTabIndex');
        }
        this.currentUrl = event.urlAfterRedirects;
      }
    });
  }
  ngOnInit() {
    this.route.params.subscribe(params => {
      this.customerId = +params['id'];
      this.cdr.detectChanges(); // Manually trigger change detection
    });
    setTimeout(() => {
      this.cdr.detectChanges();
    }, 20);
  }

Thank you!

Hello

we use <kendo-datepicker> to select "from" and "to" dates. But these fields are not mandatory and the user should be able to clear the date fields manually. Does Kendo DatePicker component provide an easy way to clear a selected date? Something like an X icon inside the input area or a CLEAR button inside the popup, e.g. beside the TODAY link?

Best regards

Sebastian

I would like to know if anyone has attempted to use sparkline to show progress/ processing stat in a table column.

As shown below - Green = Success, Red = Error, Orange = Processing, Yellow = Waiting.