Questions on Kendo UI for Angular Forum

3 answers

4.2K+ views

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

281 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

5 answers

554 views

Virtual Scrolling and toDataSourceRequestString()

Hi all,

I've implemented Virtual Scrolling with Custom Binding Directive.
Unfortunately, I have an issue when converting State to query string using toDataSourceRequestString:

if virtual scrolling requests to skip 49 records, with pageSize =100 it gets converted by toDataSourceRequestString to Page=1&pageSize=100
and incorrect results are returned.

Please suggest fix or workaround.

Thanks,
Yuriy

General Discussions

answered on 29 Nov 2017

2 answers

640 views

[Solved] DropDownList valuePrimitive-problem

Hello,

I have tried the DropDownList using "valuePrimitive" like in one of your demos. But I think there is a little bug which only appears when the "valuePrimitive" is set to "true". You can reproduce this in your example: If you open the dropdown, and then leave it without choosing any of the options it is loosing the selected value.

This only happens after the initial loading of the control. If you first select a value and then open the control again, leaving it, it keeps the value correctly.

Best regards!

General Discussions

answered on 28 Nov 2017

2 answers

150 views

bound data behind a donut chart

I have bound some data in JSON format to a Bar Chart. How can I get the bound data on the click event of a bar in the bar chart.

General Discussions

answered on 28 Nov 2017

2 answers

378 views

[Solved] Nested Chart - Pie Chart in Grid

Hi,

Is it possible to make a grid with Pie charts inside? I saw nested charts page in JQuery version but I couldn't find any information about Angular. Can you explain and show example if it is possible ?

General Discussions

answered on 23 Nov 2017

1 answer

112 views

Sortable - issues with inputs

Hi,

while using Kendo Sortable component, I've run into following problem:

If I use an input element inside a sortable element, I need to DOUBLE-click the input to be able to edit it.

I found that Kendo UI for jQuery has ignore option (https://docs.telerik.com/kendo-ui/api/javascript/ui/sortable#configuration-ignore) - is there anything similar in Kengo Angular UI that I'm missing?

Thanks

General Discussions

answered on 23 Nov 2017

1 answer

737 views

Grids: Data Loaded Event

I am working on E2E tests via Cucumber/Selenium. How do I know when the grid has been fully populated? I cannot let the test run until I know the grid is loaded. Some grids take several seconds. A static delay is not an option. Does anybody know which event to use for this?

Using:

Kendo UI for Angular (latest version)

Angular 5.01

General Discussions

answered on 21 Nov 2017

1 answer

338 views

Grid CellClickEvent documentation

I'm trying to code a grid cell click event and have found two different examples I'm using. They seem to conflict regarding the parameters click event can use.

https://www.telerik.com/kendo-angular-ui/components/grid/api/CellClickEvent/

This shows these 7 parameters

public cellClick(column: any, columnIndex: number, isEdited: boolean, originalEvent: any, rowIndex: number, sender: GridComponent, type: any)

This example shows 4 parameters.

public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited })

Which one is correct?

General Discussions

answered on 16 Nov 2017

2 answers

186 views

Object doesn't support property or method 'setProperty'

Hi Folks,

I am using Kendo UI for Angular in a asp.net core 2 application. I am getting the following error for all the kendo components:

Object doesn't support property or method 'setProperty'

I also downloaded the sample project for asp.net core from git hub. But that also fails to run with the following error:

Exception: Call to Node module failed with error: Error: Can't resolve all parameters for HttpXsrfCookieExtractor: (?, [object Object], [object Object]).
at syntaxError (C:\Users\gursin\Downloads\kendo-angular-universal-demo-master1\kendo-angular-universal-demo-master\aspnet_core_sample_application\ClientApp\dist\vendor.js:36978:34)

I have followed the instructions mentioned in the following article:

https://www.telerik.com/kendo-angular-ui/components/installation/dotnet-core/

https://www.telerik.com/blogs/cooking-with-aspnet-core-and-angular-2

Would appreciate some help on this.

Thanks

Gurpreet Singh

General Discussions