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,

Hi,

We are writing some end to end tests for our application and we wanted to use our custom testing library which utilizes basic HTML & Javascript functionality. We use this library for all our web applications, regardless of the framework it was written in.

We are currently having issues on how to get the value of a Angular UI Kendo Textbox. We can get the element by doing document.querySelector('#myField') and returns the element...

<input _ngcontent-ng-c1188706083="" kendotextbox="" formcontrolname="my_field" type="text" id="myField" 
qa-target="user-my-field-input" ng-reflect-name="my_field" 
class="ng-untouched ng-pristine ng-valid k-textbox k-input k-input-md k-rounded-md k-input-solid">

Doing document.querySelector('#myField').innerHTML or document.querySelector('#myField').innerText just gives a value of "".

How do I get the value that was entered in the textbox?

Thanks!

PS. This textbox is part of a form and looks like this in the template

<form [formGroup]="theForm" class="k-form">
        <fieldset class="k-form-fieldset">
            <h4 class="k-pb-4">Some Information</h4>

            <div class="name-wrapper k-pb-3">
                <kendo-formfield>
                    <kendo-label for="myField" text="My Field*"></kendo-label>
                    <input
                        kendoTextBox
                        formControlName="my_field"
                        type="text"
                        id="myField"
                        qa-target="user-my-field-input" />
                    <kendo-formerror>My field is required</kendo-formerror>
                </kendo-formfield>

I'm trying to install the Scheduler in an Angular project but I'm getting the following error:

Could not resolve dependency:
@angular/localize@"^19.0.0" from the root project

Conflicting peer dependency: @angular/compiler@19.0.6
node_modules/@angular/compiler
  peer @angular/compiler@"19.0.6" from @angular/localize@19.0.6
  node_modules/@angular/localize
    @angular/localize@"^19.0.0" from the root project

Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.

I did tried with the --legacy-peer-deps flag but no luck. 

Here is the version of what I'm running on my project

Angular CLI: 19.0.6
Node: 22.13.0
Package Manager: npm 11.0.0
OS: win32 x64

I have a project with a Kendo angular grid.  The grid is searchable, which is how it will likely be used 99% of the time.  However, when you return all of the raw results, the number of rows goes over 10000.  I noticed that when that happens, the paging controls only display the first four numbers of the starting item number.  So "10401" is appearing as "1040".  Is there a way to fix this? 

I currently just have [pagable] = "true" set on my <kendo-grid> tag--I'm not bringing in those newer paging tags, though I suppose I could if I had to.  My project is Angular 18 and the package of grid I'm using is 17.1.0.

Setting the initial TreeList selection, or clearing it programmatically, does not seem to update the Select All checkbox.  Is there a way to programmatically do it?
I am using row selection as described in these pages:

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/row-selection#select-all-checkbox

https://www.telerik.com/kendo-angular-ui/components/treelist/selection/persisting#persisting-row-selection-based-on-a-specific-field

Thanks.