Questions on Kendo UI for Angular Forum

2 answers

1.2K+ views

We are trying to create multi select component with remote data (with paging) and virtual scroll to use it in grid menu filters. Unfortunately, there are few problems:

1) When I pass selected items from parent component everything that is not in loaded items is ignored (no tags presented) even if I set allowCustom to true. Loading entire data set is not an option for us, amount of data is too large.

2) Selected items are shown incorrect. It selects wrong items, seems the problem is in virtual scroll. Is there any possibility (any attribute?) to control selected items in our code?

3) Checkbox sometimes selects more than one item.

Code example:
HTML:

<kendo-multiselect
[data]="items"
[valuePrimitive]="true"
[virtual]="virtual"
[filterable]="true"
[allowCustom]="true"
[checkboxes]="true"
[tagMapper]="tagMapper"
[kendoMultiSelectSummaryTag]="3"
[popupSettings]="popupSettings"
[loading]="isLoading"
[autoClose]="false"
valueField="id"
textField="id"
(valueChange)="onChange($event)"
(opened)="onOpened()"
(filterChange)="onFilterChange($event)"
>
<ng-template kendoMultiSelectHeaderTemplate>
<div class="k-grid-header">
<div class="k-grid-header-wrap">
<table class="multi-select-headers-grid">
<thead>
<tr>
<th
*ngFor="let col of columns"
class="k-header"
[style.width.px]="defaultColumnWidth"
>
{{ col.label }}
</th>
</tr>
</thead>
</table>
</div>
</div>
</ng-template>
<ng-template kendoMultiSelectItemTemplate let-item>
<ng-container *ngFor="let col of columns">
<ng-container *ngIf="item">
<span class="k-cell" [style.width.px]="defaultColumnWidth">{{ item[col.propName] }}</span>
</ng-container>
</ng-container>
</ng-template>
<ng-template kendoMultiSelectGroupTagTemplate let-dataItems>
{{ dataItems.length }} more selected
</ng-template>
</kendo-multiselect>

TS:

items: MultiSelectItem[] = [];
isLoading: boolean = false;
popupSettings: PopupSettings = { width: 500 };
readonly defaultColumnWidth = 200;

state: any = {
skip: 0,
take: 10,
};

virtual: VirtualizationSettings = {
itemHeight: 36,
pageSize: 10,
total: 0,
};

private term: string;
private stateChange = new BehaviorSubject<any>(this.state);
private unsubscribe = new Subject();

@Output() selectionChange: Subject<string[]> = new Subject();
@Output() termChange: Subject<Term> = new Subject();

@ViewChild(MultiSelectComponent, { static: false })
multiSelect: MultiSelectComponent;

ngOnInit(): void {
this.stateChange
.pipe(skip(1), debounceTime(50), takeUntil(this.unsubscribe))
.subscribe(state => {
this.state = state;
this.isLoading = true;
this.emitTermChanged();
});

this.dataSource
.pipe(takeUntil(this.unsubscribe))
.subscribe(response => this.onResponse(response));
}

ngOnDestroy(): void {
this.unsubscribe.next();
}

ngAfterViewInit() {
this.multiSelect.tags = this.selectedItems;
console.log('this.multiSelect.tags: ', this.multiSelect.tags);
}

onChange(value) {
this.selectedItems = value;
this.selectionChange.next(this.selectedItems);
}

onOpened(): void {
this.multiSelect.optionsList.pageChange.subscribe(state => {
this.stateChange.next(state);
});
}

onFilterChange(searchTerm: string): void {
this.term = searchTerm;
this.emitTermChanged();
}

tagMapper = (tags: any) => {
return this.selectedItems;
};

private emitTermChanged() {
this.termChange.next({
value: this.term,
offset: this.state.skip,
size: this.state.take,
});
}

private onResponse(response: any): void {
if (this.virtual.total !== response.totalAmount) {
this.items =
response.totalAmount > response.result.length
? response.result.concat(new Array(response.totalAmount - this.state.take))
: [...response.result];
} else {
this.items.splice(this.state.skip, this.state.take, ...response.result);
}

this.virtual.total = response.totalAmount;
this.isLoading = false;
}
}

export interface MultiSelectItem {
id: string;
name: string;
}

Thanks in advance,
Vlad

MultiSelect

updated answer on 28 Feb 2023

0 answers

201 views

How to style the scrollbars of the Angular MultiSelect?

How can I identify the primary scrollbars of the MultiSelect control to be able to modify their appearance?

I have tried to highlight the scrollbar-button so see if I am on the right track with each of these, one-at-a-time:

.kc-input-base::-webkit-scrollbar-button:single-button
.kc-input-base ::-webkit-scrollbar-button:single-button
.kc-input-base > ::-webkit-scrollbar-button:single-button
.kc-input-base > ::ng-deep::-webkit-scrollbar-button:single-button
.kc-input-base > ::ng-deep.k-multiselect-wrap::-webkit-scrollbar-button:single-button
.kc-input-base > ::ng-deep.k-multiselect-wrap ::-webkit-scrollbar-button:single-button
::ng-deep::-webkit-scrollbar-button:single-button

The multiselect is defined as:

<kendo-label class="k-form k-form-label" text="Coverage">
<kendo-multiselect
[data]="coverageCodes"
formControlName="coverageCode"
[autoClose]="false"
[textField]="'name'"
[valueField]="'key'"
class="input-search-flex kc-input-base"
(valueChange)="valueChange($event)"
[clearButton]="false"
DropDownFillMode="outline"
[popupSettings]="{ popupClass: 'kc-popup' }"
>
</kendo-multiselect>
</kendo-label>

This is the result:

As you can see, the scrollbars never changed color.

MultiSelect

Styling

asked on 27 Feb 2023

0 answers

177 views

Kendo Label not accessible with Kendo Editor when [iframe]="false"

Hi,

I am having an issue with kendo labels being marked as "orphaned form label" (label was not read by NVDA screen reader) when using the kendo editor with [iframe] set to false to have non-encapsulated style in the Editor.

The WAVE browser extension does show the "orphaned form label" alert for some of your controls (dropdowns, multiselect) but since you have the aria-label attribute NVDA reads the label text values for those controls.

However, I have noticed that no such aria attribute is added/updated when the [iframe] input of the Editor control is set to false.

I have checked this in your example stackblitz environment and it seems to reproduce the issue as well.

Is there any workaround to fix this ?

Regards,
Pavithra

Accessibility

Editor

asked on 27 Feb 2023

1 answer

317 views

Angular Autocomplete

Hello,

I am trying to put a max length on the angular autocomplete component to only allow a certain amount of characters to be typed. So far I have had no luck trying to use autocomplete api documentation.

Hopefully someone is able to help. Thank you in advance.

AutoComplete

answered on 24 Feb 2023

1 answer

170 views

filtering treeview with drag&drop

Hi,

this is a bug report. The treeview cant' be filtered, if the drag&drop directive is used.

Drag and Drop

TreeView

answered on 22 Feb 2023

0 answers

97 views

Kendo Grid with kendo Popup

I'm trying to add Kendo-grid with kendo-popup but am not ably and based on cell click popup will appear

Grid

Popup

updated question on 21 Feb 2023

1 answer

141 views

Kendo grid expand, collapse column header (k-group-cell k-header) WCAG Error.

Hi,

I'm having a kendo grid with grouping rows with expand collapse buttons.

When scanned for WCAG, the header column gives an error since it has an empty header without any labels.

Any workaround to fix this?

Thanks & Regards,
Milinda

Accessibility

Grid

answered on 21 Feb 2023

1 answer

129 views

Grid Pageable and Navigable oddly affect dynamic component

I have a grid with both its pageable and navigable settings turned on. This grid works fine but appears to oddly affect another grid on the page that is added dynamically when a button is clicked.

The dynamically created grid has selectable set to true and it has a checkbox column. The checkbox can be checked but not unchecked.

When either pageable or navigable is turned off for the first grid, the checkbox in the dynamic grid works as expected.

Here is a stackblitz project demonstrating the issue: (tested in Chrome and Edge)

https://stackblitz.com/edit/stackblitz-webcontainer-api-starter-lqeqyu

This project uses older versions of Angular and Kendo, and I have tested with the latest versions and the bug is fixed.

Is there a temporary workaround for this issue until I am able to upgrade?

Thanks!

Marvin

CheckBox

Grid

answered on 20 Feb 2023

0 answers

119 views

MVC grid cikarma islemi

Aşağıda belirttiğim kodlarda grid panele yeni bir sütun ekleyip modelde var olan 2 sütunun çıkarma işlemini yapmak istiyorum.

Kırmızı olarak belirttiğim "Sağlama 1" sütununa "Son Sayaç - İlk Sayaç" işlemini yapmak istiyorum.

Kırmızı olarak belirttiğim "Sağlama 2" sütununa "Verilen Yakıt - Sağlama 1" işlemini yapmak istiyorum.

Destekleriniz için teşekkür ederim.

c.ColumnFor(c1 => c1.TuruIsim).Width(50).Text("Turu").Renderer("girisRenk");
c.ColumnFor(c1 => c1.DepoIdIsim).Width(140).Text("Yakıt Deposu");
c.ColumnFor(c1 => c1.FisNo).Width(60).Text("Fiş/Ft No").Align(ColumnAlign.Center);
c.ColumnFor(c1 => c1.AracPlaka).Width(70).Text("Araç Plaka").Align(ColumnAlign.Center);
c.ColumnFor(c1 => c1.Tarih).Width(100).Text("Tarih").Renderer(new Renderer("return Ext.util.Format.date(value,'d-m-Y H:i');"));
c.ColumnFor(c1 => c1.TalepEdenIsim).Width(180).Text("Talep Eden");
c.ColumnFor(c1 => c1.TeslimEdenIsim).Width(180).Text("Teslim Eden");
c.ColumnFor(c1 => c1.TeslimAlanIsim).Width(180).Text("Teslim Alan");
c.ColumnFor(c1 => c1.AlinanYakit).Width(85).Text("Alınan Yakıt");
c.ColumnFor(c1 => c1.VerilenYakit).Width(85).Text("Verilen Yakıt");
c.ColumnFor(c1 => c1.SayacDegeri).Width(80).Text("İlk Sayaç");
c.ColumnFor(c1 => c1.SonSayacDegeri).Width(80).Text("Son Sayaç");
c.ColumnFor(c1 => c1.??).Width(80).Text("Sağlama 1");
c.ColumnFor(c1 => c1.??).Width(80).Text("Sağlama 2");
c.ColumnFor(c1 => c1.Onay).Text("Onay").Renderer("Durum");
c.ColumnFor(c1 => c1.Durum).Text("Kontrol").Renderer("Kontrolrn");

Grid

asked on 20 Feb 2023

1 answer

245 views

Angular compile error after upgrading kendo-theme-default to 6.1.0

Hi everyone,

I got errors on "ng build" regarding a function in the all.scss after upgrading the upgrading kendo-theme-default to 6.1.0.

the error is:

./src/styles.scss - Error: Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
C:\Perforce\Noorollah.Malek_LINW-DMALEK_QA_Reporting_Dashboards_Dev_856\QAReportingDashboard\QAReportingDashboard\ClientApp\src\styles.scss:26468:3: Can't resolve 'null' in 'C:\Perforce\Noorollah.Malek_LINW-DMALEK_QA_Reporting_Dashboards_Dev_856\QAReportingDashboard\QAReportingDashboard\ClientApp\src'

and is related to @progress/kendo-theme-default/dist/all.scss.

I figured out this is because of below function in the all.scss file which followed by ToDo comment since when I remove it the build goes successfully.

// TODO: Remove this function or rethink the logic
@function k-true-mix( $color1, $color2, $weight: 50% ) {
    @return k-color-mix( rgba( $color1, 1 ), rgba( $color2, 1 ), $weight );
}

if you remove this, still needs to make some other changes in other parts of the file.

Is there any other solution for that or is it fixed currently?

Thanks

Styling

answered on 20 Feb 2023