Hello,

I'm creating a Numeric Textbox that should be able to accept Empty.  How do I add a ClearValue button in a Numeric Textbox?

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>

5:45 PM found this SO post: Selenium with Kendo UI

Is the 'hard way' of writing xpath in C# the way to do this, using Se Web Driver? The post is 6 years old ... there's not a better way?

Crossing my fingers, there's an easier way than running the test, letting it fail, mapping out x-path, rinse-lather-repeat, eventually get there? :)

==================== Above New info as of 5:45 20 Nov =====================

Looking over the docs, I find nothing helpful with learning how to make the kendo textbox interactive with Se Tests.

Here is what I'm facing, I'm inserting from some emails and a Stack O post.

It appears our .scss file is a major player here.  There isn’t a clear input for the Se tests to see where to put what.  I don’t know enough about SCSS SASS to be sure but finally tracked down the id being tacked on to the k-input-inner class.  From this I sort of catch on to what’s zapping us with using the Se Web Driver and Se IDE tests.

 Here is the Id noted: k-d6dd8b3b-9d55-45cb-927c-634d4f11473c.  Note how it is prepended to the k-input-inner to render the text.  This appears really super nested.  I think the test can’t find where to put the text and just puts it an input at the first point in the hierarchy it finds. 

 See Screenshot_1.png 

The green shows where I typed the text in the intended text location.  Yellow shows where the test put it – in the validator indicator span, forgive any terminology error there.  I’m not seeing the same inner text area as in the top screen shot.

My conclusion is the _inputs.scss file might be the issue.  We’re having rendering given 2 different ways depending on whether we run the test or spin the page up in dotnet watch run.

I’m trying to find where in the _inputs.scss file is the starting point, to drill further into the issue. The closest I can find is on line 332:

.k-maskedtextbox {

  height: 1.3rem;

  input.k-input-inner {

    font-size: 12px;

    padding: 1px 3px 0px;

  }

}

If this is right, in order to use Se IDE, Web Driver or Grid, we may have to rethink our SCSS strategy.  I’d say that’s above my pay grade.

Still, can we take a look at this?

See Screenshot_2.png

My lead got back with me to clarify that while CSS can be used in design in our case it is not, and to look instead into the Kendo docs for how ids are generated and so on.

Well, looking in the docs I see how to set up a basic project and get basic code working.  Can't find anything on how to do what I need -- how to make Se tests drive Kendo elements for doing tests.

Once Kendo loader is shown and hidden, it resets the textbox type from password to text.
Can I get a solution to it. 

As I need the kendoTextBoxPrefixTemplate and cant use the kendoTextBox API inside <input/> to use a [type] variable and 
control the textBox type 

Here is the sample code: 

import { Component, AfterViewInit, OnInit, ViewChild } from'@angular/core';

import {
  LoaderType,
  LoaderThemeColor,
  LoaderSize,
} from '@progress/kendo-angular-indicators';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
@Component({
  selector: 'my-app',
  template: `
<div class="login-page--main-container">
  <kendo-card class="login-page--kendo-card" *ngIf="!showLoader">
    <div class="login-page--form-container">
      <form [formGroup]="loginForm" class="login-page--login-form" (ngSubmit)="onSubmit()">
        <div class="login-page--formfield">
          <div class="login-page--formfield-user">
            <kendo-formfield>
              <kendo-textbox
                class="login-page--textbox"
                formControlName="username"
                #username
                required
                placeholder="Username">
                <ng-template kendoTextBoxPrefixTemplate>
                  <img src="assets/content/images/login-images/profile.svg" alt="new" class="login-page--user-img" />
                </ng-template>
              </kendo-textbox>
              <kendo-formerror class="login-page-kendo-form-error">
                Username is required
              </kendo-formerror>
            </kendo-formfield>
          </div>
          <kendo-formfield>
            <kendo-textbox
              #textbox
              placeholder="Password"
              [clearButton]="true"
              class="login-page--textbox"
              formControlName="password">
              <ng-template kendoTextBoxSuffixTemplate>
                <button kendoButton look="clear" (click)="togglePasswordVisibility()"> Eye </button>
              </ng-template>
              <ng-template kendoTextBoxPrefixTemplate>
                <img src="assets/content/images/login-images/password.svg" alt="new" class="login-page--profile-img" />
              </ng-template>
            </kendo-textbox>
            <kendo-formerror class="login-page-kendo-form-error">
              Password is required
            </kendo-formerror>
          </kendo-formfield>
          <div class="login-page--forgot-div">
            <!-- Optional forgot password link -->
          </div>
        </div>
        <div>
          <button kendoButton class="login-page--signin-button" [disabled]="loginForm.invalid">
            Sign In
          </button>
        </div>
      </form>
    </div>
  </kendo-card>
  <div class="app-screen--loader" *ngIf="showLoader">
  <div class="example-item" *ngFor="let loader of loaders">
          <div class="example-item-title">{{ loader.type | titlecase }}</div>
          <div class="k-block">
            <kendo-loader
              [type]="loader.type"
              [themeColor]="loader.themeColor"
              [size]="loader.size"
            >
            </kendo-loader>
          </div>
        </div>
    <div>Signing in....</div>
  </div>
</div>
  `,
})
export class AppComponent implements AfterViewInit {
  public loginForm: FormGroup;
  public showLoader = false;
  public loaders = [
    {
      type: <LoaderType>'pulsing',
      themeColor: <LoaderThemeColor>'primary',
      size: <LoaderSize>'medium',
    },
    {
      type: <LoaderType>'infinite-spinner',
      themeColor: <LoaderThemeColor>'secondary',
      size: <LoaderSize>'medium',
    },
    {
      type: <LoaderType>'converging-spinner',
      themeColor: <LoaderThemeColor>'info',
      size: <LoaderSize>'medium',
    },
  ];
  @ViewChild('textbox') public textbox!: TextBoxComponent;
  constructor() {
    this.loginForm = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required),
    });
  }
  public ngAfterViewInit(): void {
    this.textbox.input.nativeElement.type = 'password';
  }
  public togglePasswordVisibility(): void {
    const inputEl = this.textbox.input.nativeElement;
    inputEl.type = inputEl.type === 'password' ? 'text' : 'password';
  }
  public async onSubmit() {
    if (this.loginForm.valid) {
      this.showLoader = true;
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.showLoader = false;
    }
  }
}

Hi.

The default behavior of pressing ctrl + z is to undo the last character entered. But if you enter several letters in kendo-textbox and kendo-textarea and press ctrl + z, all the entered letters are undo.

However, kendo-autocomplete or kendo-combobox only undo the last character when pressing ctrl + z.
How can I return the default undo behavior for kendo-textbox and kendo-textarea (undo only the last character entered)?

Thanks.

angular 17.3.7

kendo 16.4.0

I've been tasked to automate testin, Selenium looks for id fields to be able to push key presses, in the following example I set the id fiels of the maskedtextbox, but I need to set the input of the k-input-inner class.

<kendo-maskedtextbox _ngcontent-umi-c628="" size="large" formcontrolname="zip" mask="00000" id="ado-enter-zip" class="form-control k-input k-maskedtextbox ng-untouched ng-pristine ng-invalid k-input-lg k-rounded-md k-input-solid" ng-reflect-size="large" ng-reflect-mask="00000" ng-reflect-name="zip" dir="ltr"><input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="k-input-inner" id="k-b18d4bf0-e10d-4b7f-a91f-23949992563d" tabindex="0" ng-reflect-events="[object Object]" aria-placeholder="00000" aria-invalid="false" aria-labelledby="k-fdc7408b-77b2-4dbb-b0ef-cc949b00b7cb"></kendo-maskedtextbox>

<input type="text" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" class="k-input-inner" id="k-b18d4bf0-e10d-4b7f-a91f-23949992563d" tabindex="0" ng-reflect-events="[object Object]" aria-placeholder="00000" aria-invalid="false" aria-labelledby="k-fdc7408b-77b2-4dbb-b0ef-cc949b00b7cb">

is there a way to do this?

Thanks

i am implementing a kendo-texbox in reactive form in angular every time user click in a input -textbox it shows a list of autocompletes .

i want to turn it off as we did in html forms "autocomplete = off" how it works with kendo-textbox ???

thanks

I have a custom control type in a toolbar container (a simple input text box); inside the input box the arrow keys do not work.
Upon investigation I discovered that the problem is related to toolbar navigation (it adds a listener to the keydown event and overrides the arrow keys), so is there a method to avoid this? I though there was a property like navigable to enable or disable this feature.

I found a workaround, but it's almost a hack because it accesses private variables:
inside aferviewInit of toolbar's the parent i call 😱

toolbar["toolbarKeydownListener"]()

to remove the  listener, it works until you change the listener name.
i did an example 
https://stackblitz.com/edit/angular-ubjvvg?file=src%2Fapp%2Fcustom-tool.component.ts,src%2Fapp%2Fapp.component.ts

Greetings