Questions on Kendo UI for Angular Forum

1 answer

5 views

Good afternoon,
Does anyone know how to disable <kendo-filter> control?

<kendo-filter [filters]="populationCriteriaFilters"
  [value]="initialValue" (valueChange)="onFilterChange($event)"> </kendo-filter>

I have it on the card and the card is disabled and I need to disable it as well.
Any help will be greatly appreciated.

Filter

answered on 31 May 2024

1 answer

15 views

Styling controls inside Kendo UI for Angular filter component

Hello - I want to style the dropdowns that are inside the Kendo Angular filter component without overriding Kendo dropdown styles. For example, I'd like to increase the width and set font size. Is there a way to do this?

Filter

Styling

answered on 18 Apr 2024

1 answer

28 views

Kendo Filter generating form inputs -> how to get Autocomplete inputs??

Hello,

Currently I have a Kendo Filter in which I'm passing in a CompositeFilterDescriptor (dslFilter) as a value, as such:

<kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter" // <=== THIS ONE
      (valueChange)="onFilterChange($event)"
    >
...

As I understand it, the filter will turn a CompositeFilterDescriptor into a bunch of generated input forms, such as this:

Problem is, I implemented Kendo Autocomplete in those fields (full HTML below), but the generated input forms aren't generated as Autocomplete input forms. I only get Autocomplete forms if I (1) edit the field in one of the forms, or (2) I add a filter. In both cases, the input form will have to deviate from the generated (from the CompositeFilterDescriptor) form in order to become Autocomplete. Otherwise, it's just a textbox.

How do I get the generated input forms to be Autocomplete? Edit: A more general question, how can I modify the generated input forms? Say if I want the generated textbox to be wider...

Full HTML is below:

  <div>
    <kendo-filter
      #filter
      [filters]="filters"
      [value]="dslFilter"
      (valueChange)="onFilterChange($event)"
    >
      <ng-container *ngFor="let fl of filters">
        <kendo-filter-field [field]="fl.field" [editor]="fl.editor">
          <ng-template kendoFilterValueEditorTemplate let-currentItem>
            <ng-container *ngFor="let field of autocompleteFields">
              <ng-container *ngIf="currentItem.field === field">
                <kendo-autocomplete
                  [data]="getUniqueValues(currentItem.field)"
                  [value]="currentItem.value"
                  [suggest]="true"
                  [virtual]="{itemHeight: 28}"
                  (valueChange)="editorValueChange($event, currentItem, filter.value)"
                >
                </kendo-autocomplete>
              </ng-container>
            </ng-container>

          </ng-template>
        </kendo-filter-field>
      </ng-container>
    </kendo-filter>
  </div>

AutoComplete

Filter

answered on 15 Apr 2024

1 answer

36 views

Highlight specific text in cells based on filter/search

Hi!

I implemented a filter over all columns to implement a search like the example in the Overview-section for the Grid component.

I would like to highlight all text in the columns yellow that match the entered search text.

Is that easily possible?

Best regards,

Gerald

Filter

Grid

Styling

answered on 22 Feb 2024

1 answer

31 views

Kendo UI grid with Odata

Hello,

I'm planning on migrating an old AngularJS 1.5.5 (working with KendoUI) to latest angular 17.X with Kendo UI and I have some questions about Odata integration.

Is filtering, paging and sorting working "built-in" with odata ? I couldn't find any documentation forfiltering, for ex, with odata.

Do you have any example ?

Kind regards,

Musab

Filter

Grid

answered on 12 Jan 2024

2 answers

46 views

Angular Grid Filter Menu dropdownlist-filter

Hi!

i want replace a input text with a dropdownlist-filter inside this default filter, i need to keep this filter: CONTAINS ... - AND / OR - CONTAINS ...

Can someone help me?

Thanks!!

DropDownList

Filter

Grid

answered on 10 Jan 2024

1 answer

28 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

1 answer

49 views

Numeric grid filter does not allow input decimal point

Hello!

Our customer complained that when trying to enter a decimal point in the numeric filter of the grid, it appears and then immediately disappears. This effect appeared after upgrading the kendo-angular-grid package from version 4.7.0 to version 11.2.0 (we also upgraded the Angular version from version 10 to 15). I noticed that the same effect is present on your site

https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-menu/

Notice the Order column in the 1st example there. Please open a filter for it and try to quickly (as fast as possible) enter a number and then a dot in the top input of the filter.
The same thing happens in the other examples on this page that have a numeric filter. Interestingly, there is no such effect in the lower inputs.

So my questions are:
1. is this a defect?
2. is it possible to fix this behaviour without changing the version of the kendo-angular-grid package? I mean, maybe there is a possibility to intercept an input event in the filter input in an Angular component code.

Filter

Grid

answered on 29 Nov 2023

1 answer

178 views

How to implement a tri-state checkbox in Kendo- UI Angular

I have a scenario, where I have to filter the grid based on a Boolean column.

for ex: "isMember" is a boolean field with "yes" or "No" values

The user can filter records with :

"yes":- to see only member records,[checked= true]

"No":- to see non-member records[checked = fslse]

and "both yes and No":- to see all records[checked=null]

The Prime-ng has a p-triStateCheckbox component to implement this scenario.

Do we have something similar in kendo to implement this scenario?

CheckBox

Filter

Grid

answered on 18 Oct 2023

2 answers

69 views

Externa filter in grid is not working as expected when we apply grouping

Hi team,

On the external filtering sample under the grid, I wanted a filter condition like the below :

(Product Name starts with 'c' And Product Name ends with 'i') OR Product Name is equal to 'Ikura'

Using this filter, I expected to get chai and ikura as filtered results. but the filter gave me zero results back.

Can you please tell me why this selection of filters gave no results back? Also, what filters do I need to use to accomplish my requirement of getting chai and ikura as my results?

I am attaching the screen capture of my selected filter options for your reference.

Regards,
Naresh Ravlani.

Filter

Grid