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!

I used this page https://www.telerik.com/kendo-angular-ui/components/filter/expression-value-template as a reference to get a filter working on my application.  We have a list of objects that have a name and id, used as the the text and value of the drop down.  Selecting an option sets the filter option correctly and filters the list, but the drop down list does not show that any options have been selected.  Is this just an issue with object dropdownlists on filters?

I couldn't get stackblitz to work, but here's an example that produces the issue.

I currently convert all my Kendo themes (linked to my custom theme in my application) to use the new Design system.

I got 2 scss files by theme. ex: pink theme in dark and in light. Then a service switches the generated css file at runtime to reflex the theme user selected. 

So I try to change one of them with the new way to compile Kendo themes like:

@use 'sass:map';
@use '@progress/kendo-theme-default/scss/index.scss' as *;

$kendo-colors: map.merge(
  $kendo-colors,
  (
    app-surface: #1e293b,
    on-app-surface: #ffffff,
  )
);
// Use the 'k-generate-color-variations' function to generate
// all shades of the 'primary', 'secondary' and the 'base' color.
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('primary', #818cf8, 'default'));
$kendo-colors: map.merge($kendo-colors, k-generate-color-variations('secondary', #475569, 'default'));

@include kendo-theme--styles();

That works great, but all background (grid, textbox... ) are for light themes (background white). With the old system, we can add:
$theme-type: dark

But tha do not work anymore.

So how to create a theme with the same primary and seconfady color, but in a light and dark theme.

Thanks,