Telerik Forums
Kendo UI for Angular Forum
0 answers
9 views

Hi Team,

I have default text filter (manual/server side) and want to have another filter as dropdownlist but both filters together  working

Sample : https://stackblitz.com/edit/dvv6dr8o

Before Filter

After apply both filters and remove filter for "Product Name" is not working. Also the filter array lost the selection for  "Category" field.
Also I need help to clear the dropdownlist/filter for category.

Kumar
Top achievements
Rank 1
 asked on 02 Sep 2025
1 answer
10 views

Hi,

I'm using kendo-grid in Angular with both resizable columns and virtual scrolling enabled.
I also call the autoFitColumns() method (through ViewChild) to auto-adjust the column widths based on the content.

However, I noticed the following problematic behavior:

  • My grid uses pageSize = 60, so only 60 rows are rendered in the DOM at a time.

  • I have a total of about 101 rows.

  • The content in row #101 is much wider than any of the rows currently rendered.

  • When I call autoFitColumns(), the method calculates the width based only on the visible (rendered) rows (the first 60).

  • As a result, when I scroll down to row 101, the cell shows ellipsis (...) because the column width didn't get adjusted based on its content.

It seems that autoFitColumns() does not take into account rows that aren't currently rendered due to virtual scrolling.


Expected behavior:
Ideally, autoFitColumns() should consider the ENTIRE dataset, or at least provide an option to temporarily render all rows, so the width is calculated correctly.


I'll attach a sample StackBlitz with:

  • 101 records

  • Virtual scrolling + resizable = true

  • Last row has a long text

  • After calling autoFitColumns, the column is not wide enough and shows "..."

Could you please confirm if this is expected behavior or if there's a recommended workaround?

https://stackblitz.com/edit/angular-8rzs1wr6-7hvlbi8f?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fproducts.ts

Thanks in advance!

Martin Bechev
Telerik team
 answered on 25 Aug 2025
0 answers
15 views

Hi Team,

Originally we have implemented the client side filter using the Date Range for date column. Now the requirement got changed and we need to fetch it from server. But the problem is API call returns the data based on start and end date selected but the UI is not rendering the same. UI is rendering the data if we select only the start date.
We have implemented the date range filter by referring this page https://www.telerik.com/kendo-angular-ui/components/grid/filtering/filter-row#using-daterange. Can you please help to render the data by ignoring the client side filter. we are using the CompositeFilterDescriptor for filter the kendo grid data from server. still the client side filter is working for text/string filter but rendering the final data returned by API.


import { Component, Input } from "@angular/core";
import {
  BaseFilterCellComponent,
  FilterService,
} from "@progress/kendo-angular-grid";
import { FilterDescriptor } from "@progress/kendo-data-query";
import { SVGIcon, xIcon } from "@progress/kendo-svg-icons";

/**
 * NOTE: Interface declaration here is for demo compilation purposes only!
 * In the usual case include it as an import from the data query package:
  */
import { CompositeFilterDescriptor } from '@progress/kendo-data-query';

@Component({
  selector: "date-range-filter-cell",
  styles: [
    `
      kendo-daterange > kendo-dateinput.range-filter {
        display: inline-block;
      }
      .k-button {
        margin-left: 5px;
      }
    `,
  ],
  template: `
    <kendo-daterange>
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeStartInput
        [value]="start"
        (valueChange)="filterRange($event, end)"
        style="width:120px"
      >
      </kendo-dateinput>
      -
      <kendo-dateinput
        class="range-filter"
        kendoDateRangeEndInput
        [value]="end"
        (valueChange)="filterRange(start, $event)"
        style="width:120px"
      >
      </kendo-dateinput><button
      kendoButton
      [svgIcon]="xIcon"
      title="Clear"
      (click)="clearFilter()"
    ></button>
    </kendo-daterange>
  `,
})
export class DateRangeFilterCellComponent extends BaseFilterCellComponent {
  // @Input() public filter: CompositeFilterDescriptor;

  @Input()
  public field: string;

  public xIcon: SVGIcon = xIcon;

  // constructor(filterService: FilterService) {
  //   super(filterService);
  // }

  public get start(): Date {
    const first = this.findByOperator("gte");

    return (first || <FilterDescriptor>{}).value;
  }

  public get end(): Date {
    const end = this.findByOperator("lte");
    return (end || <FilterDescriptor>{}).value;
  }

  // public get hasFilter(): boolean {
  //   return this.filtersByField(this.field).length > 0;
  // }

  public clearFilter(): void {
    this.filterService.filter(this.removeFilter(this.field));
  }

  public filterRange(start: Date, end: Date): void {
    this.filter = this.removeFilter(this.field);

    const filters = [];

    if (start) {
      filters.push({
        field: this.field,
        operator: "gte",
        value: start,
      });
    }

    if (end) {
     let enddate = new Date(end);

      filters.push({
        field: this.field,
        operator: "lte",
        value: end.setDate(enddate.getDate() + 1),
      });
    }

    const root = this.filter || {
      logic: "and",
      filters: [],
    };

    if (filters.length) {
      root.filters.push(...filters);
    }

    this.filterService.filter(root);
  }

  private findByOperator(op: string): FilterDescriptor {
    return this.filtersByField(this.field).filter(
      ({ operator }) => operator === op
    )[0];
  }
}

 

Kumar
Top achievements
Rank 1
 asked on 25 Aug 2025
1 answer
7 views

Hi there,

When [locked] is set in grid column, the kendoGridDetailTemplate will be broken. Noticed this issue after recent kendo version upgrade to 18.

Two expand + button will show in the locked columns and not locked columns and both buttons not working to expand.

Thanks.

Yanmario
Telerik team
 answered on 18 Aug 2025
2 answers
25 views

hi,

 

i have a snippet codes:

https://codesandbox.io/p/sandbox/adoring-galois-4cpxxm?file=%2Fsrc%2Fapp%2Fapp.component.ts%3A29%2C1

 

what i want is 

if the product name is "Chai", i want to give the "TD" cell  a speical css class name.

     <kendo-grid-column field="ProductName">
        <ng-template
          kendoGridHeaderTemplate
          let-column
          let-columnIndex="columnIndex"
        >
          {{ column.field }}({{ columnIndex }})
        </ng-template>
        <ng-template
          kendoGridCellTemplate
          let-dataItem
          let-field
          let-rowIndex="rowIndex"
        >
          <span>{{ field["ProductName"] }}</span>
        </ng-template>
      </kendo-grid-column>

 

i can get the product name by the above codes, but i dont know how to set the "TD" class name . the TD is the parent element of the span .

can you please tell me how to do this?

Zornitsa
Telerik team
 answered on 01 Aug 2025
1 answer
17 views
I am trying to use kendo-grid for angular on iOS (tablets) with kendo grid for angular.
I've noticed that grids dont show the context when pressing and holding on a line. I looked and saw that this was asked before, and wanted to know if there is a native solution for this. 
This theard:
https://www.telerik.com/forums/kendo-grid-context-menus-do-not-work-on-iphone-(ios-version-%3D-13)
Zornitsa
Telerik team
 answered on 11 Jul 2025
1 answer
20 views
While working and testing on android using a grid, I've ran into an issue with multiple row selection. I define the grid as:
[selectable]="{enable: true, mode: 'multiple'}"
This works on PC, and on iOS (via the two-finger gesture). On android this does not work, as the gesture doesn't exist.
What is the best way the handle this issue? Add a checkbox column for android so users select multiple rows using the checkbox? define a custom gesture and try to handle it?
Yanmario
Telerik team
 answered on 11 Jul 2025
1 answer
21 views

hi,

i am looking the below topic:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual

the web page says :

While the user is scrolling the table, the Angular Grid requests and displays only the visible pages. 

my question is:

how to scroll the table by codes?

for example ,i want to scroll the table making the data which id is 10254 visiable,

please tell me how to do this

thank you.

 

 

Martin Bechev
Telerik team
 answered on 10 Jul 2025
1 answer
31 views

Verified active Kendo UI license in Telerik account. Downloaded telerik-license.txt and placed it in the project root.Installed @progress/kendo-licensing via npm install --save. Activated the license with npx kendo-ui-license activate.Confirmed all steps work locally.Encountering build error during OpenShift pipeline build after adding license.

Error: EACCES: permission denied, open '/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/dist/index.mjs'
    at Object.openSync (fs.js:498:3)
    at Object.writeFileSync (fs.js:1529:35)
    at /opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:47542
    at Array.forEach (<anonymous>)
    at setRuntimeLicense (/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:47301)
    at main (/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:63927)
    at async /opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/bin/kendo-ui-license.js:2:64408 {
  errno: -13,
  syscall: 'open',
  code: 'EACCES',
  path: '/opt/app-root/src/webapp/node_modules/@progress/kendo-licensing/dist/index.mjs'
}
[ERROR][Telerik and Kendo UI Licensing] Error while importing license.
Martin Bechev
Telerik team
 answered on 09 Jul 2025
1 answer
23 views

Hey,

I tried to play around with the new Toolbar inside the Grid.

From the documentation I copied:

<kendo-grid
    [data]="gridData"
    [selectable]="false"
    (selectionChange)="onRowSelected()"
    [filterable]="true"
  >

<kendo-toolbar overflow="scroll">
      <kendo-toolbar-button kendoGridFilterTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridSortTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridGroupTool></kendo-toolbar-button>
      <kendo-toolbar-separator></kendo-toolbar-separator>
      <kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
      <kendo-toolbar-spacer></kendo-toolbar-spacer>
      <kendo-toolbar-button kendoGridPDFTool></kendo-toolbar-button>
      <kendo-toolbar-button kendoGridExcelTool></kendo-toolbar-button>
    </kendo-toolbar>

...

Sadly, I can't seem to get the first three directives (kendoGridFilterTool, kendoGridSortTool, kendoGridGroupTool) to work.

I'm in Webstorm which tells me: "Attribute kendoGridFilterTool is not allowed here".


Am I missing an import or something?

Please help.

Yanmario
Telerik team
 answered on 20 Jun 2025
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?