Questions on Kendo UI for Angular Forum

1 answer

714 views

Angular 9, strict templates, incompatible types build errors

After enabling the strictTemplates compiler option in Angular 9 I am seeing a number of build errors with the TreeView. The all amount to the same issue of incompatible types, for instance relating to the children property:

error TS2322: Type '(node: MyType) => Observable<MyType[]>' is not assignable to type '<T>(item: T) => Observable<any[]>'

Not sure what the correct resolution is here.

TreeView

answered on 26 Feb 2020

1 answer

294 views

Timepicker min time

Hi,

Is there a way to continuously listen to system's time and set the min time for the timepicker. I did try to create a function :

getMin () {

return new Date()

}

min = 'getMin()' -- property

In angular. But it just doesn't even render the timepicker. Infact it slows down my application

DateTimePicker

answered on 26 Feb 2020

6 answers

533 views

JS error when using inside multiple material tabs

When I use multiple instances of the kendo editor in different material tabs, I get the JS error:

TypeError: Cannot read property 'createElement' of null

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

The problem occurs in Chrome and Edge but not in Fireox and also with the latest v8 angular packages.

Editor

answered on 26 Feb 2020

2 answers

256 views

Remove multiple spaces after period

We have a requirement for there to be two spaces after a period. If the user enters two spaces after the period, the editor seems to not respect those spaces and collapse the white space.

Is there a way to have the editor respect spacing through entering text in a wysiwyg format?

Editor

answered on 25 Feb 2020

4 answers

106 views

Add item (SignalR) to filtered/grouped GridDataResult

Hi!

I have a grid where data are loaded with a service from a web api.

<kendo-grid [data]="logs"

[pageSize]="state.take"

[skip]="state.skip"

[sort]="state.sort"

[sortable]="{

allowUnsort: true,

mode: 'multiple'

}"

[pageable]="true"

[groupable]="true"

[group]="state.group"

[columnMenu]="false"

[filterable]="'menu'"

[filter]="state.filter"

(filterChange)="filterChange($event)"

[resizable]="true"

(dataStateChange)="dataStateChange($event)"></kendo-grid>

This is the fetch method to query the data (logs):

public fetchLogs(state: DataSourceRequestState): Observable<any>

{

const queryStr = `${toDataSourceRequestString(state)}`;

const hasGroups = state.group && state.group.length;

return this.http

// Send the state to the server

.get(`${this.apiUrl}/log?${queryStr}`)

.pipe(

// Process the response

map(({ data, total }: GridDataResult): GridDataResult =>

{

const newData = hasGroups ? translateDataSourceResultGroups(data) : data;

return {

data: newData,

total: total

};

}),

map(res =>

{

res.data.map(item =>

{

item.logZeit = new Date(item.logZeit);

return item;

})

return res;

})

);

}

At the same time, the data are updated via signalR - like this:

logHubService.logCreated.subscribe(log =>

{

log.logZeit = new Date(log.logZeit);

this.logs.data = [log, ...this.logs.data];

this.logs.total += 1;

});

logHubService.logUpdated.subscribe(log =>

{

const logData = this.logs.data as ILog[];

let updateableLog = logData.filter(x => x.id === log.id);

if (updateableLog.length == 1)

{

updateableLog[0].logLevel = log.logLevel;

updateableLog[0].logLevelId = log.logLevelId;

updateableLog[0].logTyp = log.logTyp;

updateableLog[0].logTypId = log.logTypId;

updateableLog[0].logZeit = new Date(log.logZeit);

updateableLog[0].text = log.text;

}

});

logHubService.logDeleted.subscribe(log =>

{

this.logs.data = this.logs.data.filter(x => x.id !== log.id);

this.logs.total -= 1;

});

But i have troubles when grid is filtered/grouped because the structure of this.logs.data has changed.

Can you give me a hint to solve this problem?

Grid

answered on 25 Feb 2020

1 answer

812 views

Kendo Window In child Components

Hello Team,

As i am using the kendo window in following structure.

Master -> Parent -> Child (Within child component i am using kendo window).

That is why my window popup is not getting center position of Master, It is considering child component center position.

Due to flow limitation , I wont be able to keep my window at master level component.

Need Help keep my window popup in center at child level component..

PFA

Window

answered on 24 Feb 2020

1 answer

1.0K+ views

Accessing input in the upload template

I've used the kendo-upload control with the custom template to add a comment input for each file uploaded.

This was based on sample Kendo-upload in

stackblitz https://stackblitz.com/edit/angular-gmuolt?file=app/upload.component.ts

---

<label [for]="myUpload">Some upload label text</label>
    <kendo-upload
      #myUpload="kendoUpload"
      [autoUpload]="false"
      [saveUrl]="uploadSaveUrl"
      [removeUrl]="uploadRemoveUrl">
      <ng-template kendoUploadFileTemplate let-files let-state="state">

          <div>Name: {{files[0].name}} Size: {{files[0].size}} bytes</div>
          <input />
          <button *ngIf="showButton(state)"
              (click)="remove(myUpload, files[0].uid)"
              class="k-button" style="position: absolute; right: .2em;">
              Remove
          </button>
      </ng-template>
    </kendo-upload>

-------

What would be the best way to access the value of the input controls for each file item?

I've tried using a dynamically generated ID for the input, but for my case this control is inside a tabstrip and if the user clicks on the submit when the focus is on another tab, the values cannot be retrieved.

Upload

answered on 24 Feb 2020

2 answers

81 views

Calendar fast navigation

Hello Telerik team,

is there any way to make the fast navigation bar visible in the Calendar of the DateTimePicker? (I would even be happy with an ugly way)

This really keeps me from using the DateTimePicker.

It makes no sense to me that this isn't configurable...

DateTimePicker

answered on 20 Feb 2020

1 answer

1.0K+ views

Angular 9 grid, columns within ng-container

Using ngFor with an ng-container to iterate over column definitions seems to no longer work since moving to Angular 9. Is this a bug or is there any reason why the below grid would not display as expected?

<kendo-grid [data]="data">

<ng-container *ngFor="let column of columns">

<kendo-grid-column *ngIf="column.visible" [field]="column.field" [title]="column.title">

</kendo-grid-column>

</ng-container>

</kendo-grid>

Grid

answered on 19 Feb 2020

1 answer

372 views

kendoGridDetailTemplate WCAG

I'm having trouble setting an aria-label on my kendo grid detail template. The tools I'm using for testing are saying that 'links must have discernible text (see screenshot).

Our grid template contains another grid, which works fine, and looks something like this:

<kendo-grid>

/// Other columns

<div *kendoGridDetailTemplate="let dataItem"

<other-grid-component></other-grid-component>

</div>

</kendo-grid>

I've tried setting the aria-label and title attribute on the div but it's not working, I couldn't find any specific documentation on this. Can anyone advise?

Cheers,

Joe

Grid

answered on 19 Feb 2020