Our use case is a "search filter" grid:
This "search filter" has the following characteristics:
1) It can potentially result in 1000's of rows being "found" by the search criteria, the actual search is done by the server using various HTTP(S) REST API's.
2) Obviously we only load a small initial number of rows from the server and then as the user scrolls down we load additional rows from the server as required.
3) The initial load of rows and the incremental subsequent load of rows are all done asynchronous using various HTTP(S) REST API's, so the new rows arrive asynchronous. While loading rows, the user is allowed to scroll freely in the already loaded rows. For the rows being loaded we show skeleton rows if the user scrolls into the area of the "search filter" currently being loaded.
We would request a update to the Kendo Grid libs. to support concurrent scrolling, loading of data (trough the pageChangeEven) and virtual rows & columns, all at the same time.
Hello,
I tried to implement this new feature : https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual#controlling-the-expanded-state-of-all-root-level-groups
You can see in the demo that if you remove all grouping, the content is now limited to 50 lines instead of displaying the whole 1000.
I found a workaround by expanding all before removing the grouping but it is not very user friendly.
If you can patch it ASAP that would be great.
And thank you to finally have pushed this long awaited feature !
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>
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;