Telerik Forums
Kendo UI for Angular Forum
0 answers
14 views

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

 

n/a
Top achievements
Rank 1
 asked on 14 Mar 2024
0 answers
27 views

Hi. i have some questions about focus on clear button

If click on kendo-textbox and input value, clear button will appear on the left side of the field. if you press the tab button, the focus will shift to this clear button.

<kendo-textbox
  [style.width.px]="200"
  [clearButton]="true"
></kendo-textbox>

 

If select value in kendo-combobox, clear button will appear on the left side of the field, before button show\hide list. But if press tab button, focus will shift to next DOM element

<kendo-combobox
  [data]="listItems"
>

Please, tell me why there is such a different behavior when pressing tab. Why doesn't the focus shift to the clear button in kendo-combobox.

Thanks.

Andrii
Top achievements
Rank 1
 asked on 15 Feb 2024
1 answer
48 views

I'm placing a component inside textbox and textarea suffixes:

<kendo-textarea #noteInput
    [(ngModel)]="newNote"
    [maxlength]="MAX_LENGTH_NOTE"
  >
    <kendo-textarea-suffix>      
      <ci-counter
        [value]="noteInput.value"
        [max]="noteInput.maxlength"
        [displayAtThreshold]="100"
      ></ci-counter>
    </kendo-textarea-suffix>
</kendo-textarea>

 

That works fine, but I'd like to remove them when the input isn't being edited.  Is there any property or other way to know this through the template?  Such as:

<kendo-textarea #noteInput
    [(ngModel)]="newNote"
    [maxlength]="MAX_LENGTH_NOTE"
  >
    <kendo-textarea-suffix>      
      <ci-counter *ngIf="noteInput.???"
        [value]="noteInput.value"
        [max]="noteInput.maxlength"
        [displayAtThreshold]="100"
      ></ci-counter>
    </kendo-textarea-suffix>
</kendo-textarea>

Hetali
Telerik team
 answered on 01 Dec 2023
0 answers
33 views
I don't know why i can't set kendo textbox disabled when i use it with formControlName, but when i test with kendo numericTextbox then it work. here is the example code below.
I just upgrade my Angular project from version 9 to 16 and i have this problem.
@Component({
    selector: 'my-app',
    template: `
        <form [formGroup]="test">
            <kendo-label class="k-form" text="Name">
            <kendo-textbox formControlName="value" [style.width.px]="200" 
            [disabled]="true" placeholder="Cardholder Name"></kendo-textbox>
            </kendo-label>
            <kendo-numerictextbox format="#" formControlName="value" placeholder="T.gian làm bài"
            [disabled]="true" [min]="0"
            [autoCorrect]="true"></kendo-numerictextbox>
        </form>
    `
})
export class AppComponent implements OnInit {
    public isDisabled = true;
    test = new FormGroup({
        value: new FormControl('test')
    })
    ngOnInit() {
        //I can set textbox disabled by this way
        this.test.controls['value'].disable();
    }
}
Huynh
Top achievements
Rank 1
 asked on 03 Jul 2023
0 answers
143 views

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

Mark
Top achievements
Rank 1
 asked on 23 May 2023
1 answer
45 views

I am facing issues in the majority of components in kendo angular while using a Japanese Keyboard on ios devices. 

After selecting keyboard auto suggestions, issues are like

1- while typing another character, it auto clearing the textbox completely or partially.

2- on entering backspace, it clears all text in the text field instead of clearing each text character one by one.

we have tried the latest version available in kendoUI, it also found the same issue. 

it is working fine in jquery widgets.

Attaching a video to understand the issue in more detail.

Stoyan
Telerik team
 answered on 06 Mar 2023
1 answer
52 views

Hi All,

Using the clear button on kendo-textbox


 <kendo-textbox
              #firstName
              [clearButton]="true"
              formControlName="firstName"
            ></kendo-textbox>

Anyone know if you can set tabindex of clear button to -1 (or achieve similar)?  Tabbing to it when you're trying to enter info is annoying!

 

Many Thanks,

Rich

Hetali
Telerik team
 answered on 15 Feb 2023
1 answer
112 views

Hi

I am using nrwl/nx in my angular application. My angular application contains 5 applications and 6 libraries. It is a big enterprise application.

I am using kendo libraries for angular.

The project can be served without any error

npx nx serve master

master is the starting point . it is angular application that responsible for routing and has main menu component.

As I Mentioned,  I can serve the application without any errors. So I can test it localy without any problem.

The problems comes when I decided to package the project in order to deply it to my web server.Here comes the problem

I used this command to build my project

nx run master:build:production

I got many errors like thises:

 'kendo-textbox' is not a known element,

 'kendo-formfield' is not a known element:
1. If 'kendo-formfield' is an Angular component, then verify that it is part of this module.
2. If 'kendo-formfield' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.

 

It seems that the compiler cannot identifies the kendo libriries when building the project for deployment.

Has any one have suggestions, what could be the reason for this error?

 

Thanks

 

Tarek
Top achievements
Rank 2
Iron
 answered on 01 Dec 2022
0 answers
74 views
We are facing performance issue for textbox control.
While typing the text if we load multiple controls like 5 grids in a single page, the entered text in a textbox taking too much time to appear. 
the above-mentioned performance issue is only with textbox and text area not with other controls like dropdown, checkbox, grid etc..
 
Thanks in Advance
Thimmappa
Top achievements
Rank 1
 asked on 29 Nov 2022
0 answers
2.1K+ views

Hi!

I searched the forum but found no answer. I have several controls in the form, each one inserted according to the scheme:

      <div fxFlex="30">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="Rodzaj przewozów">
            <kendo-dropdownlist #transportTypeDropdown class="transport-type" [data]="transportTypes"
              [textField]="'name'" [valueField]="'id'" [formControlName]="formNames.transportType"
              [(value)]="formModel.transportType" [disabled]="areControlsDisabled">
            </kendo-dropdownlist>
          </kendo-label>
          <app-form-error [controlName]="formNames.transportType" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>
      <div fxFlex="10">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="wyszukaj bez trasy">
            <input type="checkbox" #searchWithoutRouteCheckbox class="search-without-route-type"
              [formControlName]="formNames.searchWithoutRoute" [value]="formModel.searchWithoutRoute" kendoCheckBox
              [disabled]="areControlsDisabled" />
          </kendo-label>
          <app-form-error [controlName]="formNames.searchWithoutRoute" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>
      <div fxFlex="10">
        <kendo-formfield [orientation]="'horizontal'">
          <kendo-label text="Przes. kal. 2">
            <kendo-dropdownlist #calendarShiftDropdown class="calendar-shift" [data]="calendarShiftItems"
              [textField]="'text'" [valueField]="'value'" [formControlName]="formNames.calendarShift"
              [valuePrimitive]="true" [(value)]="formModel.calendarShift" [disabled]="areControlsDisabled">
            </kendo-dropdownlist>
          </kendo-label>
          <app-form-error [controlName]="formNames.calendarShift" [form]="form"></app-form-error>
        </kendo-formfield>
      </div>

 

and I get errors in the console:

The `kendo-formfield` component should contain only one control of type NgControl with a formControlName

AFAIS there's no doubled controls in formfield. In other form I have simmilar controls and getting no errors and I'm stuck on this issue. What I'm doing wrong?


Robert
Top achievements
Rank 2
 updated question on 07 Oct 2022
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?