Questions on Kendo UI for Angular Forum

0 answers

107 views

kendo-dropdownlist - having issue when component has both dropdownlist and multiselect

I have a component with kendo-dropdownlist and kendo-multiselect. When I expand the multi-select and then try to expand the dropdown, the multiselect popup item list is not closed automatically. Clicking outside however, closes both popups.

I think this is because of the stop propagation on kendo-dropdownlist onBlur and onFocus methods. Please advise.

DropDownList

MultiSelect

asked on 02 Jan 2024

1 answer

179 views

Custom filter menu issues updating currentFilter

Hi, there, so atm I'm trying to implement a custom filter menu, with kendo multiselect component, but I'm having some issues. So, what's happening it's that the filtering it's not working properly and I think the issue comes beacuse it's not getting the right currentFilter state. When I open the filter button it seems to do the filtering ok, but when I reopen the button, the filters selected previosly don't appear in the ui, despite the filtering persisting and I'm not able to unselect any filter at all, and if i try to filter again selecting new values it will just add the values to the currentFilter and perfoms the filtering adding the new values, plus the ones before.

custom-component.ts

export class CustomMultiSelectFilterComponent implements AfterViewInit {

  @Output() public handleFilterChange = new EventEmitter<CompositeFilterDescriptor>()

  @Input() public data: string[] = []
  @Input() public textField: string = ""
  @Input() public valueField: string = ""
  @Input() public filter: CompositeFilterDescriptor = { logic: "or", filters: [] }
  @Input() public preFilterValue: string | null = null
  @Input() public filterService: FilterService
  @Input() public currentFilter: CompositeFilterDescriptor = { logic: "or", filters: [] }

  public constructor(
    filterService: FilterService
  ) {
    this.filterService = filterService
  }

  public filterChange(filter: CompositeFilterDescriptor): void {
    this.filter = filter
    this.data = filterBy(this.data , filter)
    this.handleFilterChange.emit(filter)
  }

  public onChange(values: string[], filterService: FilterService): void {
    filterService.filter({
      filters: values.map((value) => ({
        field: this.valueField,
        operator: "contains",
        value,
      })),
      logic: "or",
    })
  }

  public ngAfterViewInit(): void {
    if (this.filterService) {
      this.filterService.changes.subscribe((filter: CompositeFilterDescriptor) => {
        this.currentFilter = filter
        console.log("Current Filters:", this.currentFilter)
      })
    }
  }

}

custom-filter.html

<kendo-multiselect
  [data]="data"  
  [valuePrimitive]="true"
  [textField]="textField"
  [valueField]="valueField"
  [value]="filter | filterValues"
  (valueChange)="onChange($event, filterService)"
  >
</kendo-multiselect>

table.html

<kendo-grid
  kendoGridSelectBy="id"
  [kendoGridBinding]="users"
  filterable="menu"
  [sortable]="true"
  [resizable]="true"
  (selectionChange)="selectionChange($event)"
  [selectable]="selectableSettings"
  [selectedKeys]="[selectedKeyArray]"
  (filterChange)="handleFilterChange($event)"
  [filter]="filter"
>
  <kendo-grid-column-group title="{{ 'literal:Users | Total:' | translate }} {{ users.length }}" [columnMenu]="true">
    <kendo-grid-column field="roles" title="{{ 'literal:Roles' | translate }}" [width]="220" [headerStyle]="{ 'font-weight': 'bold' }">
      <ng-template kendoGridFilterMenuTemplate let-filter="filter" let-filterService="filterService">
        <app-custom-multiselect-filter
          [data]="rolesToFilter"
          textField="rolesToFilter"
          valueField="filterRoles"
          [preFilterValue]="preFilter"
          [filterService]="filterService"
          [currentFilter]="filter"
          >
        </app-custom

answered on 02 Jan 2024

0 answers

277 views

Set the value of kendo-combobox in reactive form

Hello,
I need to set the value of a kendo-combobox inside an angular form using code after receive the value from a webservice.

<form class="k-form" [formGroup]="usrForm">
  <kendo-combobox #formContractor formControlName="formCity" [data]="cities"
    textField="name" valueField="id" (valueChange)="ControlValueChange($event)" [clearButton]="true">
  </kendo-combobox>
</form>

I have tried to set the value using object (my desire) or primitive value but the value is alwais null.

this.usrForm.controls['formCity'].setValue(newCityObj);
this.usrForm.controls['formCity'].patchValue(newCityObj);
this.usrForm.patchValue({formCity: newCityObj});

buth the control alwais remain blank,

if I show the form value in the console:
console.log(this.usrForm.value);
the formCity value is set but the value in the kendo-combobox are not displayed (kombo text remain blank)

I have see a lot of documentation and sample on read the value...but nothing about the set value by code.

Thanks

Maurizio

ComboBox

updated question on 25 Dec 2023

1 answer

222 views

Kendo Gantt print in Angular

I desperately need the function to print the Gantt. I have managed to hand-make the function to print the table part, but I need to know how I can print the Gantt part, at least until the functionality is available. I'm trying to print the element:

document.getElementsByTagName('kendo-gantt-timeline')[0]

But it gives me size problems and problems with .k-gantt-dependencies-svg.

Can you help me?

Gantt

answered on 25 Dec 2023

0 answers

197 views

Close a window programmatically?

I am using the WindowService to open a window and passing in a template for the content. Once the user performs their action within the window, I want to close it.

I tried adding

public window : WindowRef

to my constructor, but this threw an error, 'No provider for WindowRef'

Window

asked on 21 Dec 2023

0 answers

139 views

formBuilder.group([{counties: [{id: 1, name: "name"}]) converts array to first object

Using formBuilder to create a reactive form when I noticed that it turns array properties in to the first object in the array. This is breaking my multiselect drop down as it is expecting an array.

I create a stack blitz demonstration.

https://stackblitz.com/edit/angular-bnet6z?file=src%2Fapp%2Fapp.component.ts

This is based off of you https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/forms/#toc-reactive-forms demonstration where I changed the form building to use the form builder.

Multiselect then reports these errors.

ERROR

Error: values.reduce is not a function
ERROR

Error: Expected values of array type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding

The workaround is to build the form manually, but it really feels like a bug in formBuilder. Is there something else that will work to prevent formBuilder from reducing arrays?

Forms

MultiSelect

asked on 21 Dec 2023

7 answers

562 views

Highlight the filtered string in multiselect

Hello,

I need to highlight using a css the filtered strings in a kendo ui multiselect for angular.

Is there an option for this?

Thanks

MultiSelect

answered on 21 Dec 2023

0 answers

111 views

telerik report hide toolbar

I want to hide the toolbar that is framed in red. How can it be done?

ToolBar

updated question on 20 Dec 2023

1 answer

368 views

Since Kendo now forces the use of svgIcons how can I use my own svg file in a kendo-drawer?

<kendo-drawer-container>
    <kendo-drawer
      #drawer
      [items]="drawerItems"
      [mode]="'push'"
      [mini]="true"
      [expanded]="false"
      (select)="onDrawerSelect($event)"


drawerItems: DrawerRoutingItem[] = [
    {
      svgIcon: ?????????,
      text: "Chargements",
      path: "",
      selected: window.location.pathname==="/"
    },
    {
      svgIcon: ????????????,
      text: "Horaire des reprises",
      path: "horaire",
      selected: window.location.pathname==="/horaire"
    }
  ];

I have a chargements.svg file in an Assets directory however the svgIcons in drawerItems will only take SVGIcon object from @progress/kendo-svg-icons

How can I use my own svg files inside the drawerItems array?

SVGIcon

answered on 13 Dec 2023

0 answers

777 views

overriding css styles without using ::ng-deep

I am trying to get rid of the current ng-deep use cases in our app.

The class that being override is as follows:

css:
::ng-deep .k-chat.k-selected {
margin-bottom: 0px !important;
};

html:
<kendo-chat class="chatbox" [messages]="messages" [user]="user">

<ng-template kendoChatMessageTemplate let-message>

</ng-template>

</kendo-chat>

General Discussions

asked on 13 Dec 2023