Questions on Kendo UI for Angular Forum

3 answers

586 views

[Solved] Using (async) pipes for Excel export values

Hello,

I have a Grid with a column where I use an async pipe to format the displayed value using a custom cell template

<ng-template kendoGridCellTemplate let-dataItem>

{{dataItem.Value | myPipe}}>

</ng-template>

Unfortunately I could not find a way to do this same transformation for the exported data. Is there a way to use async pipes or pipes in general in combination with the Excel export functionality?

Regards,
// Lukas

General Discussions

answered on 22 Dec 2017

1 answer

747 views

FontAwesome compatibility

Is it possible to use FontAwesome with controls such as Button or PanelBarItem in Kendo UI for Angular?

General Discussions

answered on 21 Dec 2017

5 answers

744 views

[Solved] Edit button in the toolbar

Hi,

I successfully managed to make the Add, save and cancel functionalities in the toolbar of my grid but kendoGridEditCommand doesn't work. I enabled selectedKeys so I have an active row. How can I edit/delete a row using toolbar buttons? Can you provide my an example?

<ng-template kendoGridToolbarTemplate>

<button (click)="onToggleFilterBar()" class="k-button k-filter-button">

<i class="fa fa-filter" aria-hidden="true"></i>

</button>

<button kendoGridAddCommand class="k-button k-add-button">

<i class="fa fa-plus-circle" aria-hidden="true"></i>

</button>

<button kendoGridEditCommand class="k-button k-edit-button">

<i class="fa fa-pencil-square" aria-hidden="true"></i>

</button>

<button kendoGridSaveCommand class="k-button k-save-button" [disabled]="formGroup?.invalid">

<i class="fa fa-floppy-o" aria-hidden="true"></i>

</button>

<button kendoGridCancelCommand class="k-button k-cancel-button">

<i class="fa fa-times-circle" aria-hidden="true"></i>

</button>

</ng-template>

General Discussions

answered on 20 Dec 2017

1 answer

2.7K+ views

NPM install all

Is there a way to simply install all kendo components? It's kind of annoying to every time I need a component to run another npm install command.

General Discussions

answered on 18 Dec 2017

1 answer

2.0K+ views

grid detail “+” "-" click event

How to tap in to the click event of the "+" expand "-" collapse click events. Clicking on the row triggers the "cellClickHandler($event)", I need it to be able to handle detail click as an event also.

<kendo-grid [data]="mainData" (cellClick)="cellClickHandler($event)" >

<kendo-grid-column>

// column stuff

</kendo-grid-column>

<kendo-grid-column>

// more column stuff

</kendo-grid-column>

<ng-template kendoGridDetailTemplate>

<table> // stuff </table>

</ng-template>

</kendo-grid>

General Discussions

answered on 15 Dec 2017

1 answer

260 views

Master-Detail Grids Example

In trying to move the Master-Detail Grid example from the Telerik site [ https://www.telerik.com/kendo-angular-ui/components/grid/advanced-features/hierarchy/ ] to a VS Code solution, I am greeted by the following error when the solution is served;

"ERROR in src/app/category-details.component.ts(44,39): error TS2345: Argument of type 'Object' is not assignable to parameter of type '{ CategoryID: number; }'."

I have found some threads suggesting this may be due to a change in Angular 2.2.

Any thoughts as to why this solution still works as a Plunker, yet not as a VS Code solution; what am I missing here?

General Discussions

answered on 12 Dec 2017

2 answers

561 views

Grid - accessing a stream of data changed events.

I've been using the InCellEditing and GridBinding directives with the KendoGrid in the way shown in your InCellEditing Example (https://www.telerik.com/kendo-angular-ui/components/grid/editing/editing-directives/#toc-the-in-cell-directive)

What I've needed to do recently is (ideally) subscribe to an Observable that would give me give me all the current data in the grid every time some data has been changed (added/updated/removed).

I went digging through the grid code base and saw that the Grid & InCellEditingDirective is injected with a LocalDataChangesService. I'd love to be able to access this service too so that I can consume a stream of change events.

Is there an easy way to achieve this?

General Discussions

answered on 08 Dec 2017

3 answers

746 views

Dash/dot/solid chart legend markers

Is it possible to render the legend marker as a line matching the dash types (i.e. dot, dash, solid).

In this plunker for instance, two line series have the same colour but differentiate on dash type and I want the legend to reflect that.

http://plnkr.co/edit/SRAahc7NN9LRDiq9EfLt?p=preview

General Discussions

answered on 07 Dec 2017

3 answers

4.2K+ views

[Solved] Dropdownlist filter for grid

Hi,

I am trying add a dropdown as filter in the column template. Using this I managed to do it but I doesn't apply the filter to the grid. The Plunker doesn't work due to 'Access-Control-Allow-Origin' problem so I can't see any live example. The dropbownlist is shown and the value returns correctly but nothing happens in the grid. I've added field parameter since the fieldName and valueField is not the same. I've recognized that the filter is always undefined.

My HTML:

<kendo-grid-column field="sSY90Falttyp" title="Fälttyp" width="160px">

<ng-template kendoGridFilterCellTemplate let-filter>

<my-dropdown-filter [filter]="filter" [data]="fieldTypes" textField="text" valueField="value" field="sSY90Falttyp">

</my-dropdown-filter>

</ng-template>

<ng-template kendoGridCellTemplate let-dataItem>

{{getFieldTypeText(dataItem.sSY90Falttyp)}}

</ng-template>

</kendo-grid-column>

DropdownlistFilterComponent:

import { Component, OnInit, Input } from '@angular/core';

import { CompositeFilterDescriptor, FilterDescriptor } from '@progress/kendo-data-query';

import { FilterService, BaseFilterCellComponent } from '@progress/kendo-angular-grid';

@Component({

selector: 'my-dropdown-filter',

templateUrl: './dropdownlist-filter.component.html',

styleUrls: ['./dropdownlist-filter.component.scss']

})

export class DropdownlistFilterComponent extends BaseFilterCellComponent {

public get selectedValue(): any {

const filter = this.filterByField(this.field);

return filter ? filter.value : null;

}

@Input() public filter = <CompositeFilterDescriptor>null;

@Input() public data: any[];

@Input() public textField: string;

@Input() public valueField: string;

@Input() public field: string;

public get defaultItem(): any {

return {

[this.textField]: "Select item...",

[this.valueField]: null

};

}

constructor(filterService: FilterService) {

super(filterService);

}

public onChange(value: any): void {

this.applyFilter(

value === null ? // value of the default item

this.removeFilter(this.valueField) : // remove the filter

this.updateFilter({ // add a filter for the field with the value

field: this.field,

operator: "eq",

value: value

})

); // update the root filter

}

General Discussions

answered on 07 Dec 2017

1 answer

259 views

Angular - TreeView

Hi,

Is it possible to use TreeView in Kendo UI Angular? We found that on JQuery but we couldn't find on Kendo UI Angular? Also, we found a npm package on https://www.npmjs.com/package/@progress/kendo-angular-treeview. Is it beta version? If you have treeview in angular, can you propose an example for it?

Best wishes.

General Discussions

answered on 06 Dec 2017