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.
I am attempting to standardize a lot of my grids for my application. They all follow the same general set up for filtering, sorting, etc. But each grid might have some specific customizations. Usually this is just customizing the command column to have different command (edit button, actions menu, etc), but this can also take the form of additional toolbar buttons and the like.
To do this, I am trying to make a component that uses Kendo Grid, has it set up the way I want to, but uses <ng-content> to project additional requirements.
However, it seems this is completely ignored by the grid, and nothing is ever rendered.
Example stackblitz which shows the issue: https://stackblitz.com/edit/angular-zc4drs?file=src%2Fapp%2Fapp.component.ts
The actual kendo grids that I'm working on are much more complicated, which is a large motivation for having a common component that I can use and inject additional stuff into as needed. Any help would be appreciated.
Hi,
Can you please let me know the issue with my code using the css or theme? I have copied the code of building block of "Hero2" and I followed the below link to apply the theme
https://www.telerik.com/design-system/docs/themes/get-started/installation/#using-external-cdn-link
I have used the below code part in index.html.. the fonts and colors are not displaying the correct one and also there is no logo or image.
Please let me know the steps to proceed to use the building blocks in our portal
</html>
I am experiencing an issue with the Kendo DateRange functionality in my Angular project. I am dynamically assigning the kendodaterangestartinput
and kendodaterangeendinput
attributes using a directive. While the attributes are correctly applied to the <kendo-dateinput>
elements (verified in the DOM), the calendar is not showing when interacting with the input fields.
Here’s the directive I am using to dynamically assign the attributes
import { Directive, Input, Renderer2, ElementRef, OnInit } from '@angular/core'; @Directive({ selector: '[dynamicDateRange]', standalone: true }) export class DynamicDateRangeDirective implements OnInit { @Input() dynamicDateRange: 'start' | 'end' | null = null; constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit(): void { if (this.dynamicDateRange === 'start') { this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangestartinput', ''); this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput'); } else if (this.dynamicDateRange === 'end') { this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangeendinput', ''); this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput'); } else { this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput'); this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput'); } } }
<kendo-formfield [showHints]="showHints" [showErrors]="showErrors" [orientation]="orientation">
<kendo-label [text]="label" [for]="dateinput" [hidden]="!showLabel"></kendo-label>
<kendo-dateinput
#dateinput
[formControl]="control"
[allowCaretMode]="allowCaretMode!"
[autoCorrectParts]="autoCorrectParts"
[autoFill]="autoFill"
[autoSwitchKeys]="autoSwitchKeys"
[autoSwitchParts]="autoSwitchParts"
[clearButton]="clearButton"
[disabled]="disabled"
[enableMouseWheel]="enableMouseWheel"
[fillMode]="fillMode"
[format]="format"
[formatPlaceholder]="formatPlaceholder"
[incompleteDateValidation]="incompleteDateValidation"
[inputAttributes]="inputAttributes!"
[max]="max"
[min]="min"
[placeholder]="placeholder"
[rangeValidation]="rangeValidation"
[readonly]="readonly"
[rounded]="rounded"
[size]="size"
[steps]="steps"
[tabindex]="tabindex"
[dynamicDateRange]="dateRangeType"
[title]="title"
[twoDigitYearMax]="twoDigitYearMax"
[value]="value"
(blur)="blur.emit($event)"
(valueChange)="valueChange.emit($event)"
(focus)="focus.emit($event)">
</kendo-dateinput>
<kendo-formhint [align]="hintAlign">
<ng-content select="[hint]"></ng-content>
</kendo-formhint>
<kendo-formerror [align]="errorAlign">
<ng-content select="[error]"></ng-content>
</kendo-formerror>
</kendo-formfield>
Here’s how I use it in the template:
<kendo-daterange id="feed-filter-date-range" class="k-mt-4 k-justify-content-between">
<mnp-date-input
label="start"
[dynamicDateRange]="'start'"
[control]="fromDate">
</mnp-date-input>
<div>
<kendo-formfield>
<mnp-label text="End" class="k-d-flex k-flex-col"></mnp-label>
<kendo-dateinput
formControlName="toDate"
kendodaterangeendinput>
</kendo-dateinput>
</kendo-formfield>
</div>
</kendo-daterange>
kendodaterangestartinput
or kendodaterangeendinput
fields. However, when I used the <kendo-dateinput> directly the attributes directly in the template, the calendar works as expected.<kendo-daterange>
<kendo-dateinput
formControlName="fromDate"
kendodaterangestartinput>
</kendo-dateinput>
<kendo-dateinput
formControlName="toDate"
kendodaterangeendinput>
</kendo-dateinput>
</kendo-daterange>
Hello,
I am trying to implement a directive to prevent changing the values on the client side when an input is disabled. It works perfectly on a native HTML element, but not completely when used on a Kendo UI element such as datetime picker or numeric textbox.
@HostListener('keydown', ['$event'])
onKeydown(event: KeyboardEvent): void {
if (this.appCustomDisabled) {
// Prevent arrow keys (Up/Down) from changing the value
if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
event.preventDefault();
event.stopImmediatePropagation();
}
// Prevent any other key presses or changes
event.preventDefault();
event.stopImmediatePropagation();
}
}
@HostListener('input', ['$event'])
onInput(event: Event): void {
if (this.appCustomDisabled) {
event.preventDefault(); // Prevent any changes to the input
event.stopImmediatePropagation();
}
}
@HostListener('wheel', ['$event'])
onWheel(event: WheelEvent): void {
if (this.appCustomDisabled) {
event.preventDefault(); // Prevent the mouse wheel action
event.stopImmediatePropagation();
}
}
mouse wheel and key inputs are successfully prevented, but arrow up/down keys are still changing the value. How do I prevent them from changing the value?
My main goal is to prevent the user as much as possible from modifying the value of a disabled input because the disabled=true approach can be easily bypassed from the devtools.
I am experiencing an issue with the Kendo DateRange functionality in my Angular project. I am dynamically assigning the kendodaterangestartinput
and kendodaterangeendinput
attributes using a directive. While the attributes are correctly applied to the <kendo-dateinput>
elements (verified in the DOM), the calendar is not showing when interacting with the input fields.
Here’s the directive I am using to dynamically assign the attributes
import { Directive, Input, Renderer2, ElementRef, OnInit } from '@angular/core'; @Directive({ selector: '[dynamicDateRange]', standalone: true }) export class DynamicDateRangeDirective implements OnInit { @Input() dynamicDateRange: 'start' | 'end' | null = null; constructor(private renderer: Renderer2, private el: ElementRef) {} ngOnInit(): void { if (this.dynamicDateRange === 'start') { this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangestartinput', ''); this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput'); } else if (this.dynamicDateRange === 'end') { this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangeendinput', ''); this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput'); } else { this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput'); this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput'); } } }
<kendo-formfield [showHints]="showHints" [showErrors]="showErrors" [orientation]="orientation">
<kendo-label [text]="label" [for]="dateinput" [hidden]="!showLabel"></kendo-label>
<kendo-dateinput
#dateinput
[formControl]="control"
[allowCaretMode]="allowCaretMode!"
[autoCorrectParts]="autoCorrectParts"
[autoFill]="autoFill"
[autoSwitchKeys]="autoSwitchKeys"
[autoSwitchParts]="autoSwitchParts"
[clearButton]="clearButton"
[disabled]="disabled"
[enableMouseWheel]="enableMouseWheel"
[fillMode]="fillMode"
[format]="format"
[formatPlaceholder]="formatPlaceholder"
[incompleteDateValidation]="incompleteDateValidation"
[inputAttributes]="inputAttributes!"
[max]="max"
[min]="min"
[placeholder]="placeholder"
[rangeValidation]="rangeValidation"
[readonly]="readonly"
[rounded]="rounded"
[size]="size"
[steps]="steps"
[tabindex]="tabindex"
[dynamicDateRange]="dateRangeType"
[title]="title"
[twoDigitYearMax]="twoDigitYearMax"
[value]="value"
(blur)="blur.emit($event)"
(valueChange)="valueChange.emit($event)"
(focus)="focus.emit($event)">
</kendo-dateinput>
<kendo-formhint [align]="hintAlign">
<ng-content select="[hint]"></ng-content>
</kendo-formhint>
<kendo-formerror [align]="errorAlign">
<ng-content select="[error]"></ng-content>
</kendo-formerror>
</kendo-formfield>
Here’s how I use it in the template:
<kendo-daterange id="feed-filter-date-range" class="k-mt-4 k-justify-content-between">
<mnp-date-input
label="start"
[dynamicDateRange]="'start'"
[control]="fromDate">
</mnp-date-input>
<div>
<kendo-formfield>
<mnp-label text="End" class="k-d-flex k-flex-col"></mnp-label>
<kendo-dateinput
formControlName="toDate"
kendodaterangeendinput>
</kendo-dateinput>
</kendo-formfield>
</div>
</kendo-daterange>
kendodaterangestartinput
or kendodaterangeendinput
fields. However, when I used the <kendo-dateinput> directly the attributes directly in the template, the calendar works as expected.<kendo-daterange>
<kendo-dateinput
formControlName="fromDate"
kendodaterangestartinput>
</kendo-dateinput>
<kendo-dateinput
formControlName="toDate"
kendodaterangeendinput>
</kendo-dateinput>
</kendo-daterange>
I use a kendo-grid component that has a dynamic list,. When I press Add it adds a new row and each row can be removed from the list. My problem is when I remove an item, it always removes the last row from UI. I saw that the values are correct, only the UI is the problem because it removes the last element from the list and it keeps visible the one I selected to remove.
After some debugging, I saw that it is because of the filteredPermission list that updates at every changes but I do not know how to fix th problem.
Thank you!
</kendo-grid-column>
}
}
</kendo-grid>
hi,
can you please tell me how to apply bootstrap table style,i.e table-primary,table-secondary...,please see the below:
<table class="table-primary">...</table>
<table class="table-secondary">...</table> <table class="table-success">...</table> <table class="table-danger">...</table> <table class="table-warning">...</table> <table class="table-info">...</table> <table class="table-light">...</table> <table class="table-dark">...</table>
the grid i am using is descripted as below web page:
https://www.telerik.com/kendo-angular-ui/components/grid
thank you.
david
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;
}
}
}