Hello,

we are updating an angular application from angular 16 ant Kendo UI 14

All the update worked fine and actually we are in angular 18 and Kendo UI 16

Now if I try to update KendoUI to version 18.1.0 (the lastone) all telerik controller became "unknown".

I have tried clear the node_modules folder, clear angular cache, restarted visual studio code...but never.

Now we are back to Angular 18/Kendo UI 16.

Thanks for any helps or idea

Maurizio

Hello Kendo team, 

Can you please help me fix this export issue, where in if I export with a lot of data, the first page is not having all the columns of data.

Please have a look at the stackblitz

https://stackblitz.com/edit/angular-znla2i-f7gggwxy.

If I click on Export Big, the first page is having only first column, expected result is to have all the columns.

Hello!

I use Angular 18 and just updated from Kendo v. 17 to 18.2.0 and I get an error in the grid regarding the rowDragHintTemplateRef.
The issue seems to be in this block of code

because rowReorderColumn is undefined.

Apart from that, I get this error when I use the latest theme

Any guidance would be appreciated.

I have a kendo-grid with a (selectionChange) attribute where I get my selection using a custom selectionService.ts:

(selectionChange)="selectionService.onSelectionChange($event)"

My selectionService is custom as I have different functionality based on if one item [1] or exactly two [1,2] is selected. If a 3rd row is selected, the third row should shift out the first, so the row would be [2,3]. My code here:

public onSelectionChange(event: SelectionEvent): void {
  if (this.selectedItems!.length + event.selectedRows!.length > 2) {
    this.selectedItems.shift();
  }

  for (let row of event.selectedRows!) {
    this.selectedItems!.push(row.dataItem);
  }

  this.selectedItems = this.selectedItems!.filter(
    item => !event.deselectedRows!.some(row => row.dataItem === item)
  );
}

My problem is my selection works, but visually kendo still keeps the previously selected rows still selected as well. How do I make it so if a 3rd item is selected, the grid also deselects this item?

Stackblitz example:

https://stackblitz.com/edit/angular-pe3m9kdq-6wwuibrm

In Classic calendar, only for the very first time,  if we click on navigate button to go to a different month, a scroll happens to go to current date in the target month. Second time if we click navigation button, this scroll does not happen. Due to a business requirement all cells of our calendar have been made to a size of more than 100px in width and height. Due to this massive size of the entire calendar, the scroll does not give a good user experience. Is it possible to avoid this?

I have a grid using the state to  manage multiple data operations , including Sorting , but I need to enable Multisorting which I can do on code , but when the user try to sort by multiple columns it wont work, it only sort by one column at the time.

How can I multisort using State ?

    
publicstate: State = {
        sort: [
{ field: "disciplineName", dir: "asc" }, 
{ field: "parentTopicName", dir: "asc" }, 
{ field: "topicName", dir: "asc" }, 
{ field: "description", dir: "asc" }],
        group: [],
        skip: 0,
        take: 50,
        filter: {
            logic: "and",
            filters: [],
        },
    };
 

html 

<ng-template #grid style="background-color: white;">
    <kendo-grid [data]="gridData" style="height:750px;"
    (dataStateChange)="dataStateChange($event)" 
    (add)="addHandler($event)" 
    (cancel)="cancelHandler($event)" 
    [sortable]="true"
    [sort]="state.sort"
    filterable="menu" 
    [filter]="state.filter" 
    [pageable]="true" 
    [pageSize]="state.take" 
    [skip]="state.skip"
    [resizable]="true"
    [sortable]="{
      allowUnsort: true,
      mode: 'multiple'
    }"
    (cellClick)="cellClickHandler($event)"
    id="grid">

Hi all together,

I'm creating a TabStrip dynamically inside my component with *ngFor with a tabs array. But only some tabs are rendered inside my browser, even if there are more tabs inside my array. The other tabs will appear, if I just click into my browser page. Each click let appear another of the missing tabs, until all tabs are there.

I have a big application with many pages and content and I removed everything now except the tabstrip (even the tab content I removed) to find the problem. The simplified code is this (and here you also see the error):

This is my typescript code inside the component:

public tabs: Subject<Array<any>> = new Subject<Array<any>>();

public ngAfterViewInit(): void {

    let tabs: Array<any> = [];
    tabs.push({
      title: this.i18NextService.t("KONTAKTDATEN", { ns: "KontakteTexts" }) ?? "",
      titleId: "kontaktdaten",
    });
    tabs.push({
      title: this.i18NextService.t("MITARBEITER", { ns: "KontakteTexts" }) ?? "",
      titleId: "mitarbeiter",
    });
    tabs.push({
      title: this.i18NextService.t("PORTFOLIO", { ns: "KontakteTexts" }) ?? "",
      titleId: "portfolio",
    });
    tabs.push({
      title: this.i18NextService.t("STANDARDAUFTRAEGE", { ns: "KontakteTexts" }) ?? "",
      titleId: "standardauftraege",
    });
    tabs.push({
      title: this.i18NextService.t("INFRASTRUKTUR", { ns: "KontakteTexts" }) ?? "",
      titleId: "infrastruktur",
    });
    tabs.push({
      title: this.i18NextService.t("NOTES", { ns: "NewsTexts" }) ?? "",
      titleId: "notes",
    });
    tabs.push({
      title: this.i18NextService.t("EXTERNE_DOKUMENTE", { ns: "ExterneDokumenteTexts" }) ?? "",
      titleId: "dokumente",
    });

    this.tabs.next(tabs);
    this.changeDetection.detectChanges();
}

And here is the html:

To see, what is inside my tabs array, I've just added the first ngFor to write down the tab titles.

<div *ngFor="let tab of tabs | async">
      <div>{{ tab.title }}</div>
    </div>
    <div class="k-tabstrip-wrapper">
      <kendo-tabstrip>
        <kendo-tabstrip-tab *ngFor="let tab of tabs | async" cssClass="k-tab-on-top" [title]="tab.title">
          <ng-template kendoTabContent></ng-template>
        </kendo-tabstrip-tab>
      </kendo-tabstrip>
    </div>

When you run the application you see the following:

As you can see, the tabs array contains 7 entries, but Kendo only displays 2 tabs. They are there, but not displayed. It seems to be that Angulars Change Detection is not running or the interaction between Angular and Kendo is not correct. This is why I run the detectChanges. I've also tried it with and without a async tabs array, with ngZone and so on. But everytime it is the same result.

I also recognized, that some of my menu entries are not displayed (same here, after clicking inside the page they appear - it's another component), but only if this tabstrip is inside my page. So my main interest is to fix this tab issue...

Do you have any ideas what is going wrong here? Any ideas how to solve it? I cannot add the tabs in a static way to my html page, because the tabs array is not static, like here in the example...

Thanks for your ideas,

Regards,

Katharina

Hi there,

We're currently using Github Actions for our CI/CD process along with remote caching via Nx Cloud (Replay) in our Nx monorepo. I've noticed that when we get a cache hit for our build task we end up with the invalid license watermark after deployment. No cache hits (or disabling remote caching) results in a deployment without the watermark. We currently have everything set up in the right order (npm ci --> activate license [via a secret] --> build --> deploy). Is there any way that the Kendo license activation can be applied successfully when our build process uses the cache? Thanks!