Questions on Kendo UI for Angular Forum

0 answers

209 views

I have a nested Array of Objects and want to show a Custom Row based on condition. i.e: Say if Condition One is true i show KendoGridGroupHeader ( a custom row) , or if not true i dont.

I have a nested Array of Objects and want to show a Custom Row based on condition.
i.e: Say if Condition One is true i show KendoGridGroupHeader ( a custom row) , or if not true i dont.

To show the array object :

If it Array has roomList property length > 1 .
I need to add Header row. (see below (Suite 200 Row )

Problem is 2 layer data handling. what would be the best method to achieve this.

Grid

asked on 20 Sep 2021

1 answer

886 views

class attached for sticky column on hover

Can you please let me know which class is attached to sticky column when we are hovering it.

I want to keep its background color constant hense want to know its class name

Grid

answered on 20 Sep 2021

1 answer

1.1K+ views

placeHolder in grid search Field

Hi

I tried without succes to add an placeHolder into an search field in grid.

Could you help me ?

Thanks

Grid

answered on 17 Sep 2021

2 answers

167 views

coul you correct this sample for angular12

Hi,

Could you correct this

https://stackblitz.com/edit/angular-zmsedq?file=app/app.component.ts

Regards

DropDownButton

answered on 17 Sep 2021

3 answers

167 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

475 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.8K+ 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

654 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.4K+ 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

634 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