Questions on Kendo UI for Angular Forum

3 answers

131 views

search grid sample with two or three Dropdown Component

Hi

I search an Grid sample with two or three Dropdown componnent ?

Regards

Grid

answered on 17 Sep 2021

1 answer

420 views

error TS2322: Type '{ logic: string; filters: any[]; }' is not assignable to type 'CompositeFilterDescriptor'.

Hi,

I tried to running following error sample https://plnkr.co/edit/pA0ydVPk7vYfhPBHTV4T?p=preview&preview in Angular12 and i have error message error TS2322: Type '{ logic: string; filters: any[]; }' is not assignable to type 'CompositeFilterDescriptor'.

Why ?

Regards

Grid

answered on 17 Sep 2021

1 answer

1.7K+ views

kendo ui grid - header in the bold ?.

Hello,

I tried to add this style but do not see any change. How to have the header for the grid in bold.

.k-grid-header {
font-weight: bold!important;
}

thanks

alexsunny

updated question on 15 Sep 2021

0 answers

544 views

How to enable scrolling in long Kendo modal dialogs?

Hey there,

I'm attempting to use a Kendo dialog in an instance where the modal content may be longer than some users viewports. In this case, I'd expect the dialog would be able to scroll independent of the page itself, like this example from the Bootstrap modal docs. However when the dialog opens the page behind it is still scrollable, and even when I attempted this fix suggested from a previous question about disabling global scroll when dialog is open, the dialog itself is still not scrollable.

This seems like a pretty essential modal behavior for the Kendo Dialog to support. What can be done to enable this behavior? (We're using version 5.1.0 of kendo-angular-dialog).

Thanks!

Note: I also tried adding `overflow-y: auto;` on the dialog wrapper and overflow elements, but even then the Kendo dialog wouldn't scroll unless my mouse was specifically hovering over the dialog itself (not the overflow element behind/around it). That behavior isn't great for UX, so I'm hopeful to find a solution which behaves like the Bootstrap example linked above.

Dialog

updated question on 15 Sep 2021

7 answers

4.2K+ views

Filter a column in a grid based on two fields

I want to filter my grids having both menu and row filter option. As it is a common scenario, some columns represent a "text-value" field; for example, the category column in Products grid. For this type of columns, I would like to have a "Kendo UI Multi Select" in the menu (which filters based on the value of category), and a simple string filter in the filter row (which basically applies string filtering on the name of category). I wrote the following code to accomplish this, but apparently the grid is got confused to filter based on category' value or category's name.

Here is the template:

<kendo-grid [data]="gridData"

[pageSize]="state.take"

[skip]="state.skip"

[sort]="state.sort"

[filter]="state.filter"

filterable="menu, row"

[sortable]="true"

[pageable]="true"

(dataStateChange)="dataStateChange($event)"

[height]="400">

<kendo-grid-column field="ProductName" title="Product Name">

</kendo-grid-column>

<kendo-grid-column field="Category.CategoryName" title="Category">

<ng-template kendoGridFilterMenuTemplate

let-column="column"

let-filter="filter"

let-filterService="filterService">

<kendo-multiselect [data]="categories"

textField="CategoryName"

valueField="CategoryID"

[valuePrimitive]="true"

[value]="categoryFilters(filter)"

(valueChange)="categoryChange($event, filterService)">

</kendo-multiselect>

</ng-template>

<ng-template kendoGridCellTemplate let-dataItem>

{{dataItem.Category?.CategoryName}}

</ng-template>

</kendo-grid-column>

</kendo-grid>

and here is part of the .ts file:

01. public filterChange(filter: CompositeFilterDescriptor): void {

02. this.state.filter = filter;

03. }

04.

05. public categoryChange(values: any[], filterService: FilterService): void {

06. filterService.filter({

07. filters: values.map(value => ({

08. field: 'Category.CategoryID',

09. operator: 'eq',

10. value

11. })),

12. logic: 'or'

13. });

14. }

15.

16. public categoryFilters(filter: CompositeFilterDescriptor): FilterDescriptor[] {

17. return flatten(filter).map(({ value }) => value);

18. }

19.

20. public dataStateChange(state: DataStateChangeEvent): void {

21. this.state = state;

22. this.gridData = process(sampleProducts, this.state);

23. }

24.

25.

26. public state: State = {

27. skip: 0,

28. take: 6,

29. };

30.

31.public categories: any[] = distinct(sampleProducts);

32. public gridData: GridDataResult = process(sampleProducts, this.state);

33.

34.

35.const flatten = filter => {

36. const filters = (filter || {}).filters;

37. if (filters) {

38. return filters.reduce((acc, curr) => acc.concat(curr.filters ? flatten(curr) : [curr]), []);

39. }

40. return [];

41.};

42.

43.const distinct = data => data

44. .map(x => x.Category)

45. .filter((x, idx, xs) => xs.findIndex(y => y.CategoryName === x.CategoryName) === idx);

General Discussions

answered on 15 Sep 2021

1 answer

527 views

Custom icons in color picker

Hi,

In the documentation https://www.telerik.com/kendo-angular-ui/components/inputs/colorpicker/custom/ , the sample is given for customizing icons using kendo icons or kendo classes.

Is there an option of using angular material icons/class with colorpicker component.

Regards,

Jaspreet

ColorPicker

answered on 15 Sep 2021

0 answers

424 views

Grid height 100%

Hi,

I have a kendo-grid control on my page, wrapped in parent div-element that calculates the space of the content area.

The grid is configured with ngStyle to have a height.% = 100 and scrollmode = 'scrollable'

The grid takes the available space of the parent div-element with success. At the moment data is loaded into the grid, the grid does not respect the available space and grows in size. The page scrollbars become active, the grid scrollbars remains disabled.

Any idea what's going wrong here?

It seems that the grid only reacts on fixed heights -> height.px = 200 (for example)

Grid

asked on 15 Sep 2021

0 answers

106 views

Assigning to properties with and without brackets '[]'

Hello,

I wonder what's the difference between assigning to kendo-chart-series-item property with and without [].

I looked at this example and saw there are values assigned to type, style, data and name properties of the series item. Some of the properties are assigned with [] and some without. I think all of them should be assigned with [] because all are component properties, aren't they?

And what confuses me even more, in the example there is a value assigned to type property without [], but in our project we assign to [type], so what's the right way?

Thanks for clarification.

J

Charts

asked on 15 Sep 2021

1 answer

90 views

Likely production regression in Kendo TabStrip's "tabPosition" attribute

I've found a possible regression in the Kendo Angular Tabstrip component. Previously, setting the "tabPosition" to "left" would result in a left-positioned vertical TabStrip, but after updating to the latest Kendo-layout version, it now incorrectly renders as a left-positioned horizontal Tabstrip.

I've attached screenshots of this behaving in two different manners on the official Kendo Angular & jQuery (for comparison) docs pages for

- Incorrect left-positioned but still horizontal Tabstrip behavior in the Angular docs

- Correct left-positioned vertical Tabstrip behavior in the jQuery docs

For reference, this functionality was working correctly in our previous version:

"@progress/kendo-angular-layout": "^6.1.4"

We're now encountering this regression after updating to:

"@progress/kendo-angular-layout": "^6.2.0",

As you can imagine this is having catastrophic effects on layout and positioning (I've attached some screenshots before and after the regression took effect). Please let me know if there's any other info I can provide, and how quickly this can be resolved!

TabStrip

answered on 14 Sep 2021

1 answer

1.2K+ views

Kendo-datepicker throws undefined error when selected

Hello,

I'm working on an angular project and I used kendo-datepicker in several places. A week ago I updated the angular version to the latest one. Before that version 7 was used.

After the updated, there's an issue with the datepicker components. When I select the toggle calendar icon the following error is thrown:

Uncaught TypeError: Cannot read property 'add' of undefined
at HeaderComponent.ngOnInit (index.js:11822)
....

And when I select any date, that's the error, which is thrown:

Uncaught TypeError: Cannot read property 'close' of undefined
at DatePickerComponent._toggle (index.js:6636)

I even tried to use the control in the most basic way in a page, where there's nothing more than it. The result is the same

<kendo-datepicker ></kendo-datepicker>

Angular version: 12.1.2
@progress/kendo-angular-dateinputs: 5.2.2
typescript: 4.3.5

Does anybody has any idea why that happens?

Regards

DateInput

DatePicker

DateTimePicker

answered on 13 Sep 2021