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.

I have a flat list of objects that I am grouping for a dropdown list.  The issue is that no matter what, the order of the groups is always in descending order, even if I provide the "dir" sort descriptor.  Please see the following code

//Group departments by user departments and other for easier access on UI
this.departments.forEach(department => {
  department["subCategory"] = this.isMyDept(department.id) ? "My Departments": "Others";
});
this.departmentGrouping = groupBy(this.departments, [
  { field: "subCategory", dir: "asc" },
]) as GroupResult[];

<kendo-dropdownlist
            [(ngModel)]="deptID"
            [data]="departmentGrouping"
            [filterable]="true"
            [showStickyHeader]="false"
            textField="name"
            valueField="id"
            [valuePrimitive]="true"
          >
</kendo-dropdownlist>

When my dropdown is displayed, the "Others" group is always on top.  It doesn't matter if I change the "dir" descriptor to "asc" or "desc" in the groupBy function, nothing changes.  How do I sort the group order so I can have "My Departments" as the top group?

Hi,

  Can I continue using the Kendo subscription license that I had which is expired now if I don't want to renew it?

Thanks.

i want to customize kendo-grid by own component . 

and using like this other components

 but first thing is other than kendo-grid-column are not working. 

so getting columns like this

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/  However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>