Questions on Kendo UI for Angular Forum

1 answer

232 views

I'm switching over from material to this product, and in material if you want to separate components from left, and right side you could use flex. e.g. .fill-remaining-space { flex: 1 1 auto; } apply this class to a span and it will push any elements after this to the right. Is there something similar we can use in kendo toolbar?

ToolBar

answered on 15 Apr 2020

1 answer

259 views

Date Range and Time Picker Popup

We are using the date range popup and need to add the option pick a start and date time in the popup.

Is this possible?

See attached image.

DateRange

answered on 14 Apr 2020

1 answer

430 views

Grouping on a Composite field?

I have a grid that I am displaying a column that is a composite field/object. The 'createdUser' field is an object with lastName and firstName properties (among others). The column is displaying properly, combining the lastName and firstName into a single column.

I would also like to group by that column. How would I group by the composite column (using both lastName and firstName)? Here is the column definition:

        <kendo-grid-column field="createdUser" title="Created By"
                           [style]="{'font-weight': 'bold', 'line-height': '1em'}"
                           [headerStyle]="{'line-height': '1em'}">
          <ng-template kendoGridGroupHeaderTemplate let-group let-field="field" let-value="value">
            {{value.lastName}}, {{value.firstName}}
          </ng-template>
          <ng-template kendoGridCellTemplate let-dataItem>
            <span style="font-weight: bold;">{{ dataItem.createdUser.lastName }}, {{ dataItem.createdUser.firstName}}</span>
          </ng-template>
        </kendo-grid-column>

This displays properly, but everything is in a single group (when grouping). Probably due to the field='createdUser' being an object.

Any ideas on how to accomplish?

Thanks,

Tim

Grid

answered on 14 Apr 2020

3 answers

381 views

Error with DropdownButton after update to Angular 9

After updating to Angular 9, none of the dropdown buttons are working.

I have the simple example:

<kendo-dropdownbutton [data]="data">
User Settings
</kendo-dropdownbutton>

And when the page renders the console shows:

core.js:6189 ERROR TypeError: Cannot read property 'nativeElement' of undefined
at DropDownButtonComponent.get focused [as focused] (index.js:2688)
at DropDownButtonComponent_HostBindings (index.js:2905)
at setHostBindingsByExecutingExpandoInstructions (core.js:11535)
at refreshView (core.js:11904)
at refreshComponent (core.js:13295)
at refreshChildComponents (core.js:11586)
at refreshView (core.js:11909)
at renderComponentOrTemplate (core.js:11983)
at tickRootContext (core.js:13457)
at detectChangesInRootView (core.js:13491)
at RootViewRef.detectChanges (core.js:15182)
at ApplicationRef.tick (core.js:42907)
at ApplicationRef._loadComponent (core.js:42957)
at ApplicationRef.bootstrap (core.js:42883)
at core.js:42475

When I click the button, just a small empty popup shows.

I am using:

"@progress/kendo-angular-dropdowns": "^4.2.6",

"@progress/kendo-angular-buttons": "^5.4.0",

Does anyone know what might be the issue here?
Thanks.

DropDownButton

answered on 14 Apr 2020

1 answer

2.4K+ views

Error: Cannot read property 'nativeElement' of undefined

There are error at console with this message "ERROR TypeError: Cannot read property 'nativeElement' of undefined"

you can see it at this link
https://stackblitz.com/edit/angular-k4mfsv?file=src%2Fapp%2Fapp.module.ts

Angular 9

kendo modules installed
"@progress/kendo-angular-buttons": "^5.4.0",
    "@progress/kendo-angular-common": "^1.2.2",
    "@progress/kendo-angular-dateinputs": "^4.2.2",
    "@progress/kendo-angular-dialog": "^4.1.3",
    "@progress/kendo-angular-dropdowns": "^4.2.6",
    "@progress/kendo-angular-excel-export": "^3.1.3",
    "@progress/kendo-angular-grid": "^4.7.0",
    "@progress/kendo-angular-inputs": "^6.5.0",
    "@progress/kendo-angular-intl": "^2.0.1",
    "@progress/kendo-angular-l10n": "^2.0.1",
    "@progress/kendo-angular-layout": "^4.2.3",
    "@progress/kendo-angular-pdf-export": "^2.0.3",
    "@progress/kendo-angular-popup": "^3.0.5",
    "@progress/kendo-angular-treeview": "^4.1.2",
    "@progress/kendo-data-query": "^1.5.3",
    "@progress/kendo-drawing": "^1.6.0",
    "@progress/kendo-theme-default": "^4.14.0",

SplitButton

answered on 14 Apr 2020

1 answer

189 views

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

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

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

627 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

128 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