Questions on Kendo UI for Angular Forum

4 answers

337 views

Material Theme Grid Locked columns styled incorrectly

in the latest version of the material theme (4.16), Locked columns in the grid have lost their "elevated" (box shadow) styling and have a gray background instead of transparent. If I revert to what i was using before, 4.12.2, it works fine again. Not sure which version introduced the problem.

General Discussions

answered on 16 Apr 2020

3 answers

719 views

kendo-chart-tooltip opacity property is not working

Hi all,

I've tried using kendo-chart, when setting Opacity property for tool-tip, it's not working while the javascript version does.

I've also tried to use inspect element tool in browser to determine what html will be rendered.

I recognized that the html code rendered by Angular is not the save as the version rendered by Javascript

Please be informed.

Kendo-angular:

<kendo-chart-tooltip [shared]="true" [border]="{color:'red'}" [opacity]="0.8" >

</kendo-chart-tooltip>

kendo-angular-html rendered:

<kendo-popup class="k-animation-container k-chart-tooltip-wrapper k-animation-container-shown" style="left: 650px; top: 414px;">
<div class="k-popup">
<div ng-reflect-ng-class="[object Object]" ng-reflect-ng-style="[object Object]" class="k-chart-shared-tooltip k-chart-tooltip" style="border-color: red; opacity: 0.5; border-width: 1px;">

Kendo-javascript :

html render

Charts

answered on 15 Apr 2020

1 answer

244 views

Fill Remaining Space in Toolbar

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

266 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

439 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

386 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.5K+ 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

197 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

709 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.2K+ 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