Telerik Forums
Kendo UI for Angular Forum
0 answers
17 views

Hello,

 

I have a kendo grid with many columns and virtualcolumns set to true. I would like to know how to have the horizzontal scroll working while selecting cells with drag enable in order to select cells that are outside of the portion of grid visible in the screen. I've noticed that if I set drag to false the scroll works but then I'm not able to select multiple cells with the mouse. Thanks

GIUSEPPE
Top achievements
Rank 1
 asked on 14 Mar 2024
1 answer
15 views
i'm currently using the kendoUI multiselect component, and wondering if there is anyway to change the default functionality, where instead of coloring the selected item. it can be removed from the list once it has been selected populates in the input element and added back to the list once it de-selected.
Martin
Telerik team
 answered on 08 Mar 2024
0 answers
10 views

I am using kendo-multiselecttree and i just simply wanna show all the selected items when hovering on the selected items

So here upon overing item1, i don't know how to get tooltip or something, please someone help me with it

Thank you.

Dhaval
Top achievements
Rank 1
 updated question on 04 Mar 2024
1 answer
20 views

Hello,

I'm trying to add placeholder text in a multiselecttree element but when nothing is selected I'm not seeing the placeholder text. I'm pretty sure this should be supported, I tried using the same placeholder in a multiselect element and it's working fine.

Am I missing something else here or are placeholders not allowed in multitreeselect?

Here's the code I pulled from the docs site for testing each placeholder: codesandbox_link

Any help is appreciated. Thanks!

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselecttree/

Hetali
Telerik team
 answered on 19 Jan 2024
0 answers
14 views
hi, I have a column with multiple object values ​​and I need to bind each id to default filter menu but kendo only allows me to bind an unique id via input (fieldName).
Is there a way to send multiple ids? or i have to create a custom component and add my logic there
marc
Top achievements
Rank 1
 asked on 09 Jan 2024
0 answers
16 views

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.

SR
Top achievements
Rank 1
 asked on 02 Jan 2024
1 answer
21 views
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


Yanmario
Telerik team
 answered on 02 Jan 2024
0 answers
19 views

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
    1. Error: values.reduce is not a function
    2. ERROR
      1. Error: Expected values of array type. See https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/value-binding
      2. 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?

      3. John
        Top achievements
        Rank 1
        Iron
         asked on 21 Dec 2023
        7 answers
        362 views

        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

        John
        Top achievements
        Rank 1
        Iron
         answered on 21 Dec 2023
        2 answers
        32 views
        Hi all.
        There is a large array of data, so I use virtualization.
        The element needs to have 2 lines; if I do this, the styles break.
        https://stackblitz.com/edit/angular-rgcbjk?file=src%2Fapp%2Fapp.comComponent.ts
        Moreover, if you remove virtualization, everything is ok.
        Martin
        Telerik team
         answered on 26 Sep 2023
        Top users last month
        horváth
        Top achievements
        Rank 2
        Iron
        Iron
        Steve
        Top achievements
        Rank 2
        Iron
        Erkki
        Top achievements
        Rank 1
        Iron
        Mark
        Top achievements
        Rank 2
        Iron
        Iron
        Veteran
        Jakub
        Top achievements
        Rank 1
        Iron
        Want to show your ninja superpower to fellow developers?
        Want to show your ninja superpower to fellow developers?