Questions on Kendo UI for Angular Forum

1 answer

594 views

Hello,
I am trying to incorporate the Tooltip into a project and I can't seem to get it to work. I copied the exact same code from your demo.

https://www.telerik.com/kendo-angular-ui/components/tooltip/default-conf/

I have this in my app Module

import { PopupModule } from '@progress/kendo-angular-popup';
import { TooltipModule } from '@progress/kendo-angular-tooltip';

Imports I have the following

imports: [
    CommonModule,
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    SharedModule,
    PopupModule ,
    TooltipModule
  ],
This is the tooltip - just like your demo

<div kendoTooltip style="text-align: center; padding-top: 10px;"><button class="k-button k-primary" title="Saves the current document">Save</button><button class="k-button" title="Discards all changes">Cancel</button></div>

I get no errors, none. I installed the tooltip using ng add @progress/kendo-angular-tooltip

Thanks for your help
Joe

Tooltip

answered on 03 Mar 2020

1 answer

167 views

Multiple custom controls for toolbar

Hi,

I'm trying to have a reponsive toolbar with the ability to contain multiple custom controls (Angular components).
1. I'd like to avoid cusomization for each control. how can do that as generic as possible?
2. I'd like to have the same control when overflow (in the popup) or not (in the toolbar). Can I use the same contro for template and toolbar?
<ng-template #toolbarTemplate #popupTemplate>

Thanks in advanced,
Michal.

ToolBar

answered on 28 Feb 2020

4 answers

1.1K+ views

[Solved] Filter on Composite column?

I have a grid with a custom column:

<kendo-grid-column field="Category" title="Category" width="200">
      <ng-template kendoGridCellTemplate let-dataItem>
        {{ dataItem.Category.CategoryName }}
      </ng-template>
</kendo-grid-column>

When using the default filtering, I get a type error ((a || "").indexOf is not a function). I am assuming it is due to trying to filter on the Category object and not the Category.CategoryName string value.

How can I setup a kendoGridFilterMenuTemplate template so that it will just filter on the string value that ends up in the column? Do I have to have a custom filter?

Thanks,

Tim

Grid

answered on 26 Feb 2020

1 answer

805 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

333 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

603 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

335 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

143 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

873 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