Questions on Kendo UI for Angular Forum

2 answers

188 views

When I try to set the slot duration to 15 the time slots are not correct.

I would expect: 7:00, 7:15, 730: etc..

I get 7:00, 7:14, 7:28 (multiples of 14)

https://stackblitz.com/edit/angular-rhk7uu

I am able to band-aid fix the issue by adding the slotDivisions="1" which seems to solve the time slots issue, but then I lose the divider line that separates the times. If you add that attribute to the demo, you can see there is a separator between 7:00 and 7:15 but then all the other times have no separator between them.

Now for my needs, I only want 1 slot per time, so I want to use the slotDivisions="1" but when I lose the separator it makes the scheduler less readable. Is this intentional or a bug?

Scheduler

answered on 11 Feb 2019

5 answers

155 views

[Solved] allDaySlot option is missing?

There doesn't seem to be a way to remove the All Day time slot from Day/Week view? In other versions of the scheduler module such as jQuery and Vue there is an option called allDaySlot. I understand this is still Beta but is there an ETA on when this will be available? Is there currently a workaround that can be used until this option is available?

Scheduler

answered on 08 Feb 2019

1 answer

1.3K+ views

concat collection into column

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.6K+ 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.5K+ 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

279 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

566 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

814 views

[Solved] 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

500 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

760 views

[Solved] 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