Questions on Kendo UI for Angular Forum

1 answer

238 views

[Solved] Creating Custom ToolBarToolComponent not showing

I'm trying to use the following component in toolbar but it will now show up in the tool bar.

import {Component, ElementRef, forwardRef, Input, OnInit, TemplateRef, ViewChild} from '@angular/core';

import {ToolBarToolComponent} from "@progress/kendo-angular-toolbar";

export function outerWidth(element: any): number {

let width = element.offsetWidth;

const style = getComputedStyle(element);

width += (parseFloat(style.marginLeft) || 0 + parseFloat(style.marginRight) || 0);

return width;

}

@Component({

providers: [{provide: ToolBarToolComponent, useExisting: forwardRef(() => LogoComponent)}],

selector: 'app-logo',

template: `

<ng-template #d>

<p #toolbarElement>weeee</p>

</ng-template>

`,

styleUrls: ['./logo.component.css']

})

export class LogoComponent extends ToolBarToolComponent implements OnInit {

@ViewChild('d') public toolbarTemplate: TemplateRef<any>;

@ViewChild('toolbarElement') public toolbarElement: ElementRef;

constructor() {

super();

}

ngOnInit(): void {

}

public get outerWidth(): number {

if (this.toolbarElement) {

return outerWidth(this.toolbarElement.nativeElement);

}

in the component that is using kendo-toolbar loos like this

<kendo-toolbar>

<app-logo></app-logo>

</kendo-toolbar>

module looks like this

import {forwardRef, NgModule} from '@angular/core';

import { CommonModule } from '@angular/common';

import {NavBarComponent} from './nav-bar.component';

import {RouterModule} from '@angular/router';

import { FlexLayoutModule } from '@angular/flex-layout';

import {ToolBarModule, ToolBarToolComponent} from "@progress/kendo-angular-toolbar";

import { LogoComponent } from './logo/logo.component';

import {BrowserModule} from "@angular/platform-browser";

import {BrowserAnimationsModule} from "@angular/platform-browser/animations";

import {CustomToolComponent} from "./custom-tool.component";

@NgModule({

declarations: [

NavBarComponent,

LogoComponent,

CustomToolComponent

],

exports: [

NavBarComponent

],

imports: [

CommonModule,

RouterModule,

FlexLayoutModule,

ToolBarModule,

BrowserModule,

BrowserAnimationsModule,

]

})

export class NavbarModule { }

i did the ng add when i install toolbar stuff as instructed in the docs.

any ideas on what i'm missing?

ToolBar

answered on 13 Apr 2020

1 answer

758 views

Multi Select Alignment Problem

The multi-select is not aligning correctly in the material theme when it is inside a tab strip with floating labels.

See code at: https://stackblitz.com/edit/angular-4tq9po

import { Component } from '@angular/core';

@Component({

selector: 'my-app',

template: `

<kendo-tabstrip [tabPosition]="'left'">

<kendo-tabstrip-tab [title]="'Filters'" [selected]="true">

<ng-template kendoTabContent>

<div class="example-wrapper">

<p>T-shirt size:</p>

<kendo-floatinglabel style="margin-right:10px; width:275px; " text="Partner">

<kendo-multiselect kendoMultiSelectSummaryTag

[data]="listItems"

[(ngModel)]="value"

[textField]="'text'"

[valueField]="'value'"

[tagMapper]="tagMapper"

>

<ng-template kendoMultiSelectGroupTagTemplate let-dataItems>

<span *ngIf="dataItems.length > 1">

{{ dataItems[0].text }} + {{ dataItems.length - 1 }} others

</span>

<span *ngIf="dataItems.length == 1">

{{ dataItems[0].text }}

</span>

</ng-template>

<ng-template kendoMultiSelectItemTemplate let-dataItem>

<input type="checkbox" class="k-checkbox"

[checked]="isItemSelected(dataItem.text)">

<label class="k-checkbox-label">{{ dataItem.text }}</label>

</ng-template>

</kendo-multiselect>

</kendo-floatinglabel>

<kendo-daterange style="width:450px;">

<kendo-floatinglabel text="Received From" style="width:115px;margin-right:10px;">

<kendo-dateinput kendoDateRangeStartInput [(value)]="startDate"></kendo-dateinput>

</kendo-floatinglabel>

<kendo-floatinglabel text="From Time" style="width:110px;margin-right:10px;">

<kendo-timepicker [(value)]="startTime"></kendo-timepicker>

</kendo-floatinglabel>

<kendo-floatinglabel text="Received To" style="width:115px;margin-right:10px;">

<kendo-dateinput kendoDateRangeEndInput [(value)]="endDate"></kendo-dateinput>

</kendo-floatinglabel>

<kendo-floatinglabel text="To Time" style="width:110px;margin-right:10px;">

<kendo-timepicker [(value)]="endTime"></kendo-timepicker>

</kendo-floatinglabel>

<kendo-daterange-popup #popup>

<ng-template kendoDateRangePopupTemplate>

<div style="align-content:center;margin-top:-40px;width:100%">

<button (click)="popup.toggle()" style="width:100px;float:right;margin-right:40px;" class="btn btn-primary btn-round simple">close</button>

</div>

<kendo-multiviewcalendar kendoDateRangeSelection>

</kendo-multiviewcalendar>

</ng-template>

</kendo-daterange-popup>

</kendo-daterange>

</div>

</ng-template>

</kendo-tabstrip-tab>

</kendo-tabstrip>

`

})

export class AppComponent {

public listItems: Array<{ text: string, value: number }> = [

{ text: "Small", value: 1 },

{ text: "Medium", value: 2 },

{ text: "Large", value: 3 }

];

public value: any = [{ text: "Medium", value: 2 }];

public tagMapper(tags: any[]): any[] {

return tags.length < 3 ? tags : [ tags ];

}

public isItemSelected(itemText: string): boolean {

return this.value.some(item => item.text === itemText);

}

public onPartnerChange(value) {

this.value = value;

}

MultiSelect

answered on 13 Apr 2020

3 answers

2.3K+ views

[Solved] Grid - Custom filtering function for a particular column

Hi,

Currently we are using Angular 7. We have a standard kendo-grid with sorting, filtering and so on. We use "translate" pipe for the shown text of one of the columns.

<kendo-grid-column [field]="Type" [title]="{{'Document Type' | translate}}" [filterable]="true">
<ng-template kendoGridCellTemplate let-row="row">
{{row.Type | translate}}
</ng-template>
</kendo-grid-column>

The issue is that when "German" language is selected, the filter doesn't work properly.

Example: The original value (not translated) is "Contract" and the translated one is "Vertrag". I would like to filter that column by ""Vertrag"" and see all results which contains that value. The result is empty, because it filters by the original value (Contract). I know that I can create a custom filter component, but I want to use out-of-the-box functionalities for filtering (contains, does not contain, is equal to etc.) and just change the filter function. Is that possible?

Grid

answered on 13 Apr 2020

4 answers

704 views

Custom Summary Item Template

We have a requirement to show

- the item that is selected if only one items is selected

- the first item + a summary item count if multiple items are selected

How can this be accomplished. See examples below.

Example 1 item summary template:

State/Municipality
ARLN - AIMS PLATFORM

Example multiple item summary template:

State/Municipality

ARLN - AIMS PLATFORM (+1 others)

MultiSelect

answered on 12 Apr 2020

2 answers

198 views

Scheduler, rows misaligned in IE.

Hello,

I'm currently looking into an issue we are having with Kendo Scheduler for Angular in IE.

We are using it to track appointments in one of views and it seems the more you scroll down the more misaligned it gets.
Some screenshots that show the issue in attachments.

While this is mostly happening in IE I've notice it also sometimes happen in Chrome as well although it seems to snap back to correct alignment if ex. opening the dev tools.

Using version v1.1.4 Scheduler with Angular 8 which if I read the notes correctly should address this issue.

Any ideas how to solve this?

Scheduler

answered on 10 Apr 2020

1 answer

108 views

[Solved] changing grouping

I'm trying to change the grouping dynamically with a button (on/off or other resources).

But when I change the group via code, the scheduler isn't updated.

How can I make it dynamically?

Thanks

Scheduler

answered on 10 Apr 2020

1 answer

1.3K+ views

"read more" functionality for grid cells.

How to have 'read more' and 'read less' functionality if there is large content in a cell in Kendo grid for Angular 6 ?

So inside cell on the third line of text we could have a 'read more' and on clicking on 'read more' the row expands vertically and shows the rest of the content ending with 'read less'.

Grid

answered on 10 Apr 2020

1 answer

2.4K+ views

Wrap the content inside column cell with fixed width

How to wrap the content inside a cell so that full content is visible and it does not overflow and there should not be ellipsis (...) if the content is large.

Grid