I am using below piece of code inside <kendo-grid>. Here, I am using a dropdown and kendo excel export button inside toolbar. dropdown is in left and button is right aligned. Earlier, it was working till Kendo 18. When I upgraded to kendo 19, it stopped working.
Root Cause is kendo-dropdownlist contains an array button. When we click on button to expand dropdown, excel export button gets the focus and dropdown loses focus. When we click on dropdown button, 'k-focus' class is applied on 'excel-export'. Because of this, dropdown is not working.
Code:
<ng-template kendoGridToolbarTemplate>
<div class="toolbar-container" style="display: flex; align-items: center; gap: 16px; width: 100%;">
<!-- Dropdown Wrapper -->
<div style="flex-shrink: 0;">
<kendo-dropdownlist [data]="data"
[(ngModel)]="someField" [valuePrimitive]="true" (valueChange)="perform()"
[popupSettings]="{ appendTo: 'component' }" style="width: 175px;">
</kendo-dropdownlist>
</div>
<!-- Spacer to push button to right -->
<div style="flex-grow: 1;"></div>
<!-- Excel Export Button -->
<div style="flex-shrink: 0;">
<button type="button" kendoGridExcelCommand>Export</button>
</div>
</div>
</ng-template>
First of all, thank you for providing the state management feature. For me it's one of the most important features of a grid component.
But unfortunately it fails to restore the columns state. This is because each time a grid component and it's columns are instantiated, new IDs are created for the columns. When loading state the columns are identified by their IDs.
When a column is persisted with e.g. id 'k-grid-column-1' and the grid will be destroyed and re-created, then the new column ID is not identical with the old one. Thus restoring the column's state will fail.
Please have a look to this StackBlitz example: https://stackblitz.com/edit/angular-vauqyshn?file=src%2Fapp%2Fapp.component.ts
A possible workaround is to save also the column's field property and later use it to re-map the saved id to the new id.
A better solution may be to extend the GridColumnComponent with something like a "PersistenceKey" property, which will be used for identifying a column. A directive may also work. Otherwise generating non transient unique ids for the grid columns will also work.
Best regards,
Holger
Based on the feature set of the current jQuery widget - http://demos.telerik.com/kendo-ui/diagram/index
Hi team,
I am working on a simple UI where kendo combo-box is a "column" of a kendo tree-list. The problem is, the opening and closing of kendo combo-box also expands and collapses the kendo tree-list's row.
I think the event of kendo-combo-box is bubbled to treelist. Is this a bug or am I missing something?
Here's my Stackblitz example for reproducing the issue (Link: https://stackblitz.com/edit/angular-18guak?file=src/app/app.component.ts)
I upgraded today from 4.3.7 to v11 and the dates are 1 day off in the scheduler month view, meaning the date variable from let-date (I think).
<kendo-scheduler
<ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
...
<div>{{ date | kendoDate : 'dd' }}</div>
<kendo-scheduler
<ng-template kendoSchedulerMonthDaySlotTemplate let-date="date">
... <div>{{ date | kendoDate : 'dd' }}</div>
The date is just flat out wrong. What's weird is the mouseover shows the correct date.
Again, if I use the old version everything works as expected but the v11 update I'm off by one.
./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:19:0-75 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-progressbar' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'
./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:22:0-56 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-intl' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'
this is the error is coming
when we add kendo thing into module.ts file
If the pane is scrolled, the dark highlight shown when grabbing the splitter is misaligned like this:
Stackblitz repro can be found here
Hi,
https://stackblitz.com/edit/angular-dadm5ywe?file=src%2Fapp%2Fapp.component.ts
Please select the top-most button, then press TAB until the focus is on the button in the last grid cell.
Then press tab again => the focus moves to the last cell itself.
Press tab again => the focus moves back to the last button.
=> here we got into an endless loop, you cannot navigate to the button below the grid.
Interestingly, you can leave the grid if you navigate backwards with shift+tab.
best regards,
Michael
When virtual is true for a multiselect and checkboxes are set to true, there is a bug which results in multiple items being selected.
To reproduce, one needs to scroll down a long list of items. The amount to scroll seems random but might have something to do with the itemHeight setting. When clicking directly inside the checkbox, two items are selected at once - the item selected, and one other seemingly random item. This does not happen if the click selection event happens inside the item, but not the checkbox.
I have reproduced this inside this code sandbox: https://codesandbox.io/p/sandbox/mystifying-shirley-2qxn32
It would be great if we could add footnotes in the Kendo editor, similar to how TinyMCE handles them, or a simpler version like the example found here: https://prosemirror.net/examples/footnote/
Hi,
It will be a good addition to your standalone examples if a Java backend implementation is also added to the list:
https://github.com/telerik/kendo-angular/tree/master/examples-standalone
The Grid provides column spanning by default, but the change is applied to all rows:
https://www.telerik.com/kendo-angular-ui/components/grid/columns/spanned
A good addition to the Grid would be to provide conditional columns spanning where some rows are normal while others - have spanned columns such as:
Kendo's Angular components that have optional inputs are not built correctly.
For example on the `kendo-avatar`component the input `imageSrc` is defined like this:
@Input() imageSrc: string;
however, since it is an optional input it should be defined like this:
@Input() imageSrc?: string;
// or
@Input() imageSrc: string | undefined;
When dateinput format is "d/M/y" and "allowCaretMode" is enabled, users are unable to enter valid dates. Tested with dateinput and datepicker components.
https://angular-x4rvxqyp-qfq5b7mj.stackblitz.io
The user should be able to enter a full year after typing a valid single-digit day and month.
After entering a single-digit day and month, the input locks up, preventing the user from typing more than one character for the year. This prevents users from entering valid dates, making the input unusable in this scenario.
I couldn’t find an existing bug report related to this issue. Could you confirm whether this has already been reported or provide guidance on a potential fix or workaround?
Thanks
https://stackblitz.com/edit/angular-niog8n-eldomz?file=app%2Fapp.component.ts