or
1 answer
17 views
Hi Kendo,
We have a requirement where we need to lock a couple of starting columns and one ending column in a Kendo Angular Grid.
We have implemented the lock feature for starting columns, but it doesn’t work as expected for the last (ending) column in the grid.
We are aware that this can be achieved by applying the ‘Sticky’ feature. But the problem with ‘Sticky’ feature is the horizontal scroll runs to the end of the grid. Ideally, the scrollbar should stop at the start of the last column. (Sticky column)
Is there any workaround to make the last(right) column locked? Or stop the scrollbar at the start of the last column in a ‘Sticky’ behavior?
Appreciate your support on this.
We have a requirement where we need to lock a couple of starting columns and one ending column in a Kendo Angular Grid.
We have implemented the lock feature for starting columns, but it doesn’t work as expected for the last (ending) column in the grid.
We are aware that this can be achieved by applying the ‘Sticky’ feature. But the problem with ‘Sticky’ feature is the horizontal scroll runs to the end of the grid. Ideally, the scrollbar should stop at the start of the last column. (Sticky column)
Is there any workaround to make the last(right) column locked? Or stop the scrollbar at the start of the last column in a ‘Sticky’ behavior?
Appreciate your support on this.
Zornitsa
Telerik team
answered
on
29 Mar 2024
1 answer
24 views
Hi there,
Recently we started working on accessibility issues on angular 15 app Currently we are using the below version for kendo grid.
"@progress/kendo-angular-grid": "^4.7.0",
And we are facing some issues from kendo grid and wanted to check if these get sorted out if the kendo grid version is updated to higher versions. And if so, please suggest the version no..
Please find the attached issues.
---------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
----------------------------------------------------------------------------------------
Please check the issues and let us know how I can sort out my issues.
Martin
Telerik team
answered
on
29 Mar 2024
0 answers
17 views
I'm encountering an unexpected behavior with the Kendo Grid's sorting functionality in my application.
Here's the scenario:
I perform inline row editing for a record in the Kendo Grid with pagination.
Sorting the data by clicking a column header works as expected.
However, if I sort the data again after editing a row, the current index seems accurate, but the data object retrieved appears to be incorrect.
Here's the scenario:
I perform inline row editing for a record in the Kendo Grid with pagination.
Sorting the data by clicking a column header works as expected.
However, if I sort the data again after editing a row, the current index seems accurate, but the data object retrieved appears to be incorrect.
1 answer
26 views
Hi there,
We are using Angular and TailwindCss in our product and we want to use the Kendo Grid like below. Do you have any examples to style the grid like this? If not supported for tailwind, plain css is fine.,
Zornitsa
Telerik team
answered
on
25 Mar 2024
1 answer
22 views
Hello,
I'm working on adding functionality to save the grid column size settings when they resized using the columnResize event.
The issue I'm having right now is that I can't access the unique identifier I need (column field) in the ColumnResizeArgs / ColumnBase interfaces.
https://www.telerik.com/kendo-angular-ui/components/grid/api/ColumnResizeArgs/
I see that other libraries like React and jQuery are providing the column field property in their resize events - so I'm curious where the alternative is for Angular (if any). I see the property is there while debugging the args but I can't see it exposed in the Kendo interface anywhere.
I do see the 'title' property, but this will not work in our application due to translation and other issues.
Any ideas or help would be appreciated.
Thank you!
Zornitsa
Telerik team
answered
on
22 Mar 2024
0 answers
15 views
Hi,
I'm using kendo grid in angular. I'm trying to hide/remove the total cell from the kendo grid using *ngIf, but only content inside the cell is hiding, empty cell is showing.
How to hide the total cell from the grid,
This is the code , I have used
<kendo-grid id="antibiotic-result-view" [data]="uniqAntibioticList" [resizable]="false">
<kendo-grid-column field="Expansion" [width]="150">
<ng-template kendoGridHeaderTemplate let-column let-columnIndex="columnIndex">
<div class="antibiotic-heading">{{"Antibiotic" | translate}}
<mat-checkbox type="checkbox" [ngModel]="allCompleted" disabled="true"></mat-checkbox>
</div>
</ng-template>
<ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
<div *ngIf="dataItem.IsSuppressed">
<span>{{ dataItem.Expansion }}</span>
<mat-checkbox type="checkbox" [ngModel]="dataItem.IsSuppressed" disabled="true"></mat-checkbox>
</div>
</ng-template>
</kendo-grid-column>
</kendo-grid>I have been trying for past 2 days, could someone help me on this ?
Kathiravan
Top achievements
Rank 1
Rank 1
asked
on
22 Mar 2024
1 answer
70 views
VM4083:1 ERROR DOMException: Failed to execute 'setAttribute' on 'Element': 'aria-disabled]' is not a valid attribute name.
at NoneEncapsulationDomRenderer.setAttribute , i have this error when i try to open tabstrip component whit dialog on angular 17.3.0
at NoneEncapsulationDomRenderer.setAttribute , i have this error when i try to open tabstrip component whit dialog on angular 17.3.0
<kendo-tabstrip>
<kendo-tabstrip-tab title="Tab 1">
<ng-template kendoTabContent>
<p>Tab 1 Content</p>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab title="Tab 2" [selected]="true">
<ng-template kendoTabContent>
<p>Tab 2 Content</p>
</ng-template>
</kendo-tabstrip-tab>
<kendo-tabstrip-tab title="Tab 3">
<ng-template kendoTabContent>
<p>Tab 3 Content</p>
</ng-template>
</kendo-tabstrip-tab>
</kendo-tabstrip>
Yanmario
Telerik team
answered
on
21 Mar 2024
0 answers
28 views
Hi All,
We recently have undertaken an effort to upgrade our project to Angular 16 and as part of that we also updated all of our Kendo libraries to 14.2.0. Since the update, many of our datepicker inputs are behaving extremely strangely, namely, you open the datepicker and it starts frantically scrolling into the past without stopping. I'll attach a gif showing the issue.
Strangely I can't seem to reproduce it consistently, it happens on our test server every single time but not on my local machine. Here is an example of how the datepicker looks in code, though it happens across many of them in the application:
<kendo-datepicker
class="w-100"
[value]="getDateTimeValue()"
[format]="'MM/dd/yyyy'"
[disabled]="valueCanBeEmpty()"
(valueChange)="handleDatePickerValueChanged($event)"
[popupSettings]="{appendTo: 'component'}"
[attr.data-qa-id]="'datepicker-value-'+field.SourceName">
</kendo-datepicker>Any help would be appreciated
Timothy
Top achievements
Rank 1
Rank 1
asked
on
20 Mar 2024
0 answers
27 views
When I use the "locked" property on one of my grid columns, the half of the table is half blank.
I noticed that if my grid doesn't have this property, the "width" of each column behaves like "min-width", but when using "locked" in some of the columns, the "width" stays exactly with the exact value of the column instead of still function as "min-width" which causes half of the table to be blank.
To remove the blank half of my "grid" I need to pass a "width" value to the grid, but I believe this is not ideal, as I want my table to have 100% "width", in the example of "locked" documentation the grid is very small (https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/) so that it works without this problem of half being blank.
Is there a way to use the "locked" property so that half of my grid is not white? And that my grid has 100% "width"?
This problem with "locked" makes it unfeasible to use it in our project.
I left it on stackblitz as an example (To see the problem, use a large screen):
1 - the first Grid does not use "locked" so my columns adapt according to the space
2 - in the second Grid with a locked column, there is a blank space on the right side, and the columns become smaller (now respecting the width, instead of using it as "min-width")
link: stackblitz
I noticed that if my grid doesn't have this property, the "width" of each column behaves like "min-width", but when using "locked" in some of the columns, the "width" stays exactly with the exact value of the column instead of still function as "min-width" which causes half of the table to be blank.
To remove the blank half of my "grid" I need to pass a "width" value to the grid, but I believe this is not ideal, as I want my table to have 100% "width", in the example of "locked" documentation the grid is very small (https://www.telerik.com/kendo-angular-ui/components/grid/columns/locked/) so that it works without this problem of half being blank.
Is there a way to use the "locked" property so that half of my grid is not white? And that my grid has 100% "width"?
This problem with "locked" makes it unfeasible to use it in our project.
I left it on stackblitz as an example (To see the problem, use a large screen):
1 - the first Grid does not use "locked" so my columns adapt according to the space
2 - in the second Grid with a locked column, there is a blank space on the right side, and the columns become smaller (now respecting the width, instead of using it as "min-width")
link: stackblitz
0 answers
21 views
I had a customer who would like us to make 'Enter' work similar to Tab for moving across consecutive fields. For that I built a directive to tag onto various open fields where it was applicable (ie. inputs, textareas, kendo-dropdownlist, kendo-dateinput, just avoiding multicolumncombobox because that requires Enter as part of it's functioning).
What I've noticed is this will work for inputs, textareas, even kendo-dropdownlists, but it seems like for kendo-dateinput it will never 'tab' onto or out of those. Here's an example of both the directive and the fields I'm talking about living in the wild:
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[tab13]'
})
export class Tab13Directive {
constructor(private el: ElementRef) { }
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (event.key === 'Enter') {
event.preventDefault();
const nextElement = this.findNextFocusableElement();
if (nextElement) {
nextElement.focus();
}
}
}
private findNextFocusableElement(): HTMLElement | null {
const tab13Elements = document.querySelectorAll('[tab13]');
const currentIndex = Array.from(tab13Elements).indexOf(this.el.nativeElement);
for (let i = currentIndex + 1; i < tab13Elements.length; i++) {
if (this.isFocusable(tab13Elements[i] as HTMLElement)) {
return tab13Elements[i] as HTMLElement;
}
}
return null;
}
private isFocusable(element: HTMLElement): boolean {
return (
element.hasAttribute('tab13')
);
}
}
HTML example:
<div style="width: 100%; display: flex; flex-wrap: wrap; white-space: nowrap;">
<input tab13 id="{{ '0-qs-code' }}" tabindex="{{'120007'}}" />
<input tab13 id="{{ '0-qs-email' }}" tabindex="{{'120008'}}" />
<kendo-dateinput tab13 id="{{ '0-qs-rfqsent' }}" tabindex="{{'120009'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
<kendo-dateinput tab13 id="{{ '0-qs-rfqrec' }}" tabindex="{{'120010'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
<input tab13 id="{{ '0-qs-quoteno' }}" tabindex="{{'120011'}}" />
</div>
The tab works across all of these but for reasons I'm unfamiliar with the tab13 selector fails at 0-qs-email when the next input is a kendo-dateinput and it fails in 0-qs-rfqsent but it will work from 0-qs-rfqrec because the next selector is an input rather than a kendo-dateinput.
I'm hoping to up my product knowledge a bit and get a better grasp of what the kendo-dateinput is doing under the hood that might explain this behavior and what workarounds might be available for improving the directive.
What I've noticed is this will work for inputs, textareas, even kendo-dropdownlists, but it seems like for kendo-dateinput it will never 'tab' onto or out of those. Here's an example of both the directive and the fields I'm talking about living in the wild:
import { Directive, HostListener, ElementRef } from '@angular/core';
@Directive({
selector: '[tab13]'
})
export class Tab13Directive {
constructor(private el: ElementRef) { }
@HostListener('keydown', ['$event'])
onKeyDown(event: KeyboardEvent) {
if (event.key === 'Enter') {
event.preventDefault();
const nextElement = this.findNextFocusableElement();
if (nextElement) {
nextElement.focus();
}
}
}
private findNextFocusableElement(): HTMLElement | null {
const tab13Elements = document.querySelectorAll('[tab13]');
const currentIndex = Array.from(tab13Elements).indexOf(this.el.nativeElement);
for (let i = currentIndex + 1; i < tab13Elements.length; i++) {
if (this.isFocusable(tab13Elements[i] as HTMLElement)) {
return tab13Elements[i] as HTMLElement;
}
}
return null;
}
private isFocusable(element: HTMLElement): boolean {
return (
element.hasAttribute('tab13')
);
}
}
HTML example:
<div style="width: 100%; display: flex; flex-wrap: wrap; white-space: nowrap;">
<input tab13 id="{{ '0-qs-code' }}" tabindex="{{'120007'}}" />
<input tab13 id="{{ '0-qs-email' }}" tabindex="{{'120008'}}" />
<kendo-dateinput tab13 id="{{ '0-qs-rfqsent' }}" tabindex="{{'120009'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
<kendo-dateinput tab13 id="{{ '0-qs-rfqrec' }}" tabindex="{{'120010'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
<input tab13 id="{{ '0-qs-quoteno' }}" tabindex="{{'120011'}}" />
</div>
The tab works across all of these but for reasons I'm unfamiliar with the tab13 selector fails at 0-qs-email when the next input is a kendo-dateinput and it fails in 0-qs-rfqsent but it will work from 0-qs-rfqrec because the next selector is an input rather than a kendo-dateinput.
I'm hoping to up my product knowledge a bit and get a better grasp of what the kendo-dateinput is doing under the hood that might explain this behavior and what workarounds might be available for improving the directive.
