Questions on Kendo UI for Angular Forum

2 answers

294 views

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

117 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

841 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.1K+ views

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

96 views

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

391 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

2 answers

2.5K+ views

Multiple column sorting

Is multiple column sorting supported..? Such as with combination of shift+mouse click to sort on multiple columns without losing sorting for previously sorted columns...

Grid

answered on 18 Feb 2020

1 answer

346 views

validation of fileselect in reactive forms

Please get your forum sorted out, no code here because your "formatting options" button still doesn't work.

When using kendo-fileselect in a reactive form and setting restrictions to a given file type the fileselect widget will display that the file is incorrect but the form control in the form is not invalidated. This means extra code is needed to control validation.

FileSelect