Questions on Kendo UI for Angular Forum

1 answer

1.2K+ views

take this data

{
"Firstname": "Jim",
"Lastname": "Smith",
"Birthday": "08/29/1979",
"Likes": [
{ Likes: [ { id: 1, description: "Baseball", rank: 1 }, {id: 2, description: "music", rank: 3 }, { id: 3, description: "Surfing the web", rank: 2}]

} }]
}

First 3 fields bind directly to the grid in 3 columns.

I would like to concatenate the collection of Likes, and display in the final column.

Something like this

<td>Jim</td><td>Smith</td><td>08/29/1979</td><td>Baseball; music; Surfing the web;</td>

I've been unable to find anything like this.

General Discussions

answered on 08 Feb 2019

1 answer

1.5K+ views

Column data attributes

Is there any way to add some data-attribute to "td" tag. something like this

<kendo-grid-column [width]="100" title="ID" field="prouct_id" [attr.base]="'dataItem.prouct_id'">

</kendo-grid-column>

Grid

answered on 07 Feb 2019

4 answers

2.3K+ views

Clear button click callback on kendo Angular grid filter menu template

I have implemented kendoGridFilterMenuTemplate on Kendo Angular Grid.

<kendo-grid-column

field="orderStage"

title="Order Stage"

width="110px">

<ng-template

kendoGridFilterMenuTemplate

let-filter="filter"

let-column="column"

let-filterService="filterService"

>

<kendo-multiselect

[data]="orderStageData"

[(ngModel)]="orderStagesSelected"

(valueChange)="multiSelectChange($event,filterService,'orderStage')"

>

</kendo-multiselect>

</ng-template>

</kendo-grid-column>

I need to do some operation on click of clear button in my filter. please have a look at the image attached.

General Discussions

answered on 06 Feb 2019

1 answer

240 views

Kendo UI Grid Paging at both top and bottom

Hi Telerik Team,

We have requirement to have paging at both top and bottom of the grid. When i search couple of threads all solutions are written in javascript, Is there a way to do the same in Angular 6/7 (Typescript)?

Thanks,
Balaram.

Grid

answered on 04 Feb 2019

1 answer

498 views

Exporting Master-Detail Grid to Excel

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.

Grid

answered on 04 Feb 2019

4 answers

767 views

Aynchronous Excel Export

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-grid

02. [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 Excel

10. </button>

11. </ng-template>

12.

13. 

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-excel

20. fileName="Users.xlsx"

21. [fetchData]="allData"

22. ></kendo-grid-excel>

23.</kendo-grid>

Thanks in advance.

General Discussions

answered on 04 Feb 2019

2 answers

400 views

Template tooltip off screen

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

Tooltip

answered on 01 Feb 2019

2 answers

694 views

Grid using local data and aggregates

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-template

kendoGridGroupFooterTemplate

let-group="group"

let-aggregates>Total: {{aggregates["AccountValue"]?.sum | number: '1.2-2' }}</ng-template>

<ng-template

kendoGridFooterTemplate

let-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

Grid

answered on 01 Feb 2019

4 answers

131 views

Live demos in documentation no longer work

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.

General Discussions

answered on 31 Jan 2019

1 answer

549 views

Invoke rowCallback/rowClassFn of grid only during databound

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

General Discussions

answered on 30 Jan 2019