Hi,
I'm interested in exporting Master-Detail Grid to Excel (https://www.telerik.com/kendo-angular-ui/components/grid/export/excel-export/#toc-exporting-master-detail-grids), however the given stackblitz example can't be run as there are some errors in the code (such as importing Workbook etc.). If I open the project in new window (https://4g4igw.run.stackblitz.io/), the example works just fine.
I've been wondering whether you could fix the given example, so that I could use it in my application?
Thanks in advance.
Hello,
I'm trying to get an asynchronous excel export working in one of our grids but I consistently get an empty xsls file with only the collection headers. Data is properly being rendered in the grid, with filtering and pagination.
I've tried following the docs over here without success, here's my implementation:
Relevant parts in my component.ts:
01.@Input() collection$: Observable<User[]>;02. 03.ngOnInit() {04. this.allData = this.allData.bind(this);05.}06. 07.allData(): Observable<GridDataResult> {08. return this.collection$.pipe(09. map(users => ({ data: users, total: users.length }))10. );11.}
First thing I tried was to directly return this.collection$; but the behavior was the same: empty collection inside the excel file thus I tried returning an Observable<GridDataResult> instead with no success either.
Relevant parts in my component.html:
01.<kendo-grid02. [kendoGridBinding]="users$ | async"03. pageSize="10"04. [pageable]="true"05. [filterable]="true"06.>07. <ng-template kendoGridToolbarTemplate>08. <button type="button" kendoGridExcelCommand icon="file-excel">09. Export to Excel10. </button>11. </ng-template>12. 13. <!-- columns -->14. 15. <kendo-pager-prev-buttons></kendo-pager-prev-buttons>16. <kendo-pager-info></kendo-pager-info>17. <kendo-pager-next-buttons></kendo-pager-next-buttons>18. <kendo-pager-page-sizes [pageSizes]="[5, 10, 40]"></kendo-pager-page-sizes>19. <kendo-grid-excel20. fileName="Users.xlsx"21. [fetchData]="allData"22. ></kendo-grid-excel>23.</kendo-grid>
Thanks in advance.
Hi
I've got a slight issue which only comes to light when running the production version of my application.
I have an anchor element which is near to the top of the screen, the tooltip is generated using a template and displays the content correctly when hovering over the anchor. If the content of the tooltip exceeds the available space to the top of the screen, in development it flips the tooltip to display under the anchor. Unfortunately this does not happen when released, the tooltip fails to flip correctly.
Here's my page content
<ng-template #templateMetricTooltip> <div class="metric-tooltip-content"> <div class="name">{{metric.name}}</div> <div class="description">{{ metric.description }}</div> <div class="section">Calculation</div> <div class="formula">{{metric.formula}}</div> </div></ng-template><div class="name" kendoTooltip [tooltipTemplate]="templateMetricTooltip" tooltipClass="metric-tooltip" style="cursor: pointer"> <span [title]="metric" class="dotted">{{ caption.trim() }}</span></div>
The variable metric being referenced in the template, is declared in my controller class. As I said,there is no problem with the content of the tooltip, it's the position when compiled to production. Is there any workaround to delay the positioning of the tooltip until after the content has been rendered?
Thanks
Keith
Hello,
I am using the demo here as a base https://www.telerik.com/kendo-angular-ui/components/grid/data-binding/automatic-operations/
I have bound my grid to local array and added an aggregate which is working. The only thing that doesn't update is the Grand Total aggregate at the bottom of the grid.
My Grid definition:
<kendo-grid [kendoGridGroupBinding]="data"[height]="700"[pageSize]="50"[sortable]="true"[filterable]="'menu'"scrollable="virtual"[selectable]="true"[resizable]="true"[loading]="this.loading"[pageable]="true"[groupable]="{ showFooter: true }"><kendo-grid-column field="ColumnA" title="ColumnA" width="250"></kendo-grid-column><kendo-grid-column field="ColumnB" title="ColumnB" width="180"></kendo-grid-column><kendo-grid-column field="AccountValue" title="AccountValue" width="180" [format]="'{0:N2}'"><ng-templatekendoGridGroupFooterTemplatelet-group="group"let-aggregates>Total: {{aggregates["AccountValue"]?.sum | number: '1.2-2' }}</ng-template><ng-templatekendoGridFooterTemplatelet-column="column">Grand Total: {{total["AccountValue"]?.sum | number: '1.2-2' }}</ng-template></kendo-grid-column></kendo-grid>
My component code:
public header: any; public importId: number; public loading = true; public data: any = []; public aggregates: any[] = [{field: 'AccountValue', aggregate: 'sum'}]; public total: any = aggregateBy(this.data, this.aggregates); constructor(private staticDataService: StaticDataService, private activateRoute: ActivatedRoute) { } ngOnInit() { this.importId = this.activateRoute.snapshot.params.id; this.loadData(); }public loadData() { this.staticDataService.getData(this.importId).subscribe(data => { this.data = data; this.loading = false; });}The grouping, sorting and filtering all work great and the Group Totals are updated correctly, the Grand Total amount always stays the same.
How can I update this based on changes to the grid?
Thanks
As of a week or so ago all the demos in the angular documentation have stopped working. It just displays a loading spinner icon but the demo never loads. This is on all of the pages in the angular docs. If I choose the option to view in stackblitz then it works fine. I show an error in my JS console that might be causing the issue.
GET https://unpkg.com/tslib@1.7.1/index.js 404
Those demos are very helpful so it would be great to get them working again.
Hi,
I am working on Kendo grid Angular where we have to set the background color of rows based on one of the column values (DateTime column)
Compare the difference between the current DateTime and the column DateTime. If the difference is less than 30 minutes then set the background color of row. Using the below example as reference.
https://stackblitz.com/edit/angular-yh8zyr?file=app/app.component.ts
This works fine when grid is loaded for the first time. But the rowCallback function is also invoked when we sort a column in the grid and when we click on any row in the grid and when page index changed etc. The rowCallback is also fired when any event of other controls are invoked (ex: checkbox checked changed event, button click event etc) and the time difference is re calculated and changes the rows background color.
But i want to invoke this rowCallback and update the background of the rows only when grid data is refreshed on demand(we have a button to refresh the results in the grid & we have a checkbox which will refresh the results in the grid for every one minute). How can we achieve this.
Is there any other event/method where we can set the style for the rows in the grid ?
Regards,
Rajesh

How do we append the Dialog to <body> by default?
Something equivalent of POPUP_CONTAINER but for Dialog?
PS: We are migrating a fairly large app from Kendo UI for AngularJs to Kendo UI for Angular, AngularJs App has a "PopupService" which wraps around $kWindow from angular-kendo-window, $kWindow appends to Body by default and would like to replicate the behaviour using DialogService
Thanks

Hello,
I recently have a project that it's necessary to have a filter menu with popup in grid.
I then found this very helpful example here et got it work with fields like string, number
But, I could not have a filter with date ! taking this example : https://cd7bdu.run.stackblitz.io/, I would like having something like these in the filter menu :
- [ ] check all
- [ ] 9/20/1996
- [ ] 8/12/1996
- ...
By the way, I also need to have a checkAll checkbox in order to select all the element (please see attachment).
Could you please have any suggestion for theses problems ?
Thanks in advance for your help,
Best regards,
Yen DO
I need to have the detail row details always expanded (for every row), and also remove the +/- button that allows a user to expand/collapse details. Anyway to do this with the Kendo grid?
Attached is an example of what we are trying to achieve. The image is from the Telerik Silverlight GridView control. We are rewriting the Silverlight app into Angular.

Hi,
I am reading about this feature request and it sounds interesting, but I can not find anywhere (probably because I don't know what I am looking for) any information:
Can someone share some links, information.
