Questions on Kendo UI for Angular Forum

0 answers

21 views

Filter kendo angular grid if columns is associated with a complex objects

Hello!

I have a grid filter is specified as "menu" ([filterable]="'menu'")

Some the grid columns are created dynamically like this:

<kendo-grid-column *ngFor="let c of myColumnsObjects"
        field="{{ c.name }}"
        title="{{ c.title }}"
    >
    <ng-template
          kendoGridFilterMenuTemplate
          let-column="column"
          let-filter="filter"
          let-filterService="filterService"
        >
          <app-mycolumn-filter
            [field]="column.field"
            [filterService]="filterService"
            [currentFilter]="filter"
            [distinctData1]="getDistinctData1(column.field)"
            [distinctData2]="getDistinctData2(column.field)"
            [distinctData3]="getDistinctData3(column.field)"
          ></app-mycolumn-filter>
        </ng-template>
    <ng-template 
      kendoGridCellTemplate 
      let-dataItem >
        <ng-container *ngIf="getObjectByColumnName(c.name, dataItem) as myItem">
          <div class="{{getClassByObject(myItem)}}">
            <div>{{myItem.dataOfField1}}</div>
            <div>{{myItem.dataOfField2}}</div>
            <div>{{myItem.dataOfField3}}</div>
          </div>
        </ng-container>
    </ng-template>
    </kendo-grid-column>

Where

myColumnsObjects is

interface IMyDynamicallyColumn {
  name: string;
  title: string;
}

dataItems is array of

interface IMyData {
  id: number;
  name: string;
  somecomlexobject: any;
  ....
  myItems: IMyItem[];
  otheItems: IOtherItem[];
}

myItem is:

interface IMyItem {
  id: number;
  dataOfField1: string;
  dataOfField2: number;
  dataOfField3: EMyItemState;
}

const enum EMyItemState {
  State1 = 'state1',
  State2 = 'state2',
  ...
  State<N> = 'state<n>'
}

Input data distinctData1, distinctData2 and distinctData3 used in angular's component of app-mycontrol-filter.

In this case, the standard filter does not work.

How can I organize a filter on an objects (type is IMyItem) associated with a column using all the properties of the object?

Filter

General Discussions

Grid

asked on 13 Mar 2024

0 answers

27 views

TreeList selected row on expand/collapse event

Hi,

please help to set k-selected class on expand/collapse event in treeList (angular 16 app).

By default rows are highlighted on select event (k-selected class applied), but I need to highlight it on expand, collapse, select events.

I was trying to use rowCallback for setting/removing selected class and expand/collapse events for getting selected row id, but currently several rows are staying selected at the same time when should be selected only one (from the last action). Am I missing something, or is there a better approach?

rowCallback = (context) => {
return this.zone.run(() => {
if (context.dataItem.id === this.selectedNodeId) {
return {
'k-selected': true
      }
    }
else if (context.dataItem.id === this.previousSelectedNodeId) {
return {
'k-selected': false
      }
    }
  });
}
onAction(e) {
this.zone.run(() => {
const row = this.treeList.view.data.find(dataItem => dataItem.data.id === e.dataItem.id);
if (row) {
this.previousSelectedNodeId = this.selectedNodeId;
this.selectedNodeId = row.data.id;
    }
  });

}
 
<kendo-treelist #treeList kendoTreeListExpandable kendoTreeListSelectable
  [data]="(loadNodes$ | async)"
  [fetchChildren]="fetchChildren"
  [hasChildren]="hasChildren"
  (selectionChange)="onSelectionChange($event)"
  [rowClass]="rowCallback"
  (expand)="onAction($event)"
  (collapse)="onAction($event)">

asked on 05 Jan 2024

1 answer

83 views

How to Design the interface for the grid so that it will fully fill all the requirements of a simple or complex grid?

Hi ,

I want to design a grid interface which can be used to create a simple grid or complex grid.

Requirements;-

1) Simple grid columns or grid with multiple span columns.

2) Filter, Custom Filter & Multi Select dropdown Filters

3) Columns with editable controls features like fields having text fields, dropdown fields and radio buttons.

What I have done:-

To achieve above requirements I have created below things

1) Created a grid interface.

2) Create a grid config file having different properties for different functionality. This will be loaded while creating the grid.

Issues:-

But my template file becomes too big to meet all my custom and complex requirements. It is now very difficult to maintain.

How could I design the grid interface so that all the functionality will be properly distributed and connected?

General Discussions

Grid

answered on 11 Apr 2023

0 answers

52 views

Kendo Grid Selection Assistance

Hi all.

I am currently trying to implement multi-selection within the grid.
When I check one of the checkboxes, it automatically selects all the items(checkboxes) in the grid (which it shouldn't).
I have closely followed the documentation but can't seem to figure it out.

Here is some of the code snippets:

<kendo-grid
  class="data-grid-kendo"
  [data]="gridData | async"
  kendoGridSelectBy="id"
  [(selectedKeys)]="mySelection"
  (selectedKeysChange)="keyChange($event)"
  [pageable]="true"
  [pageSize]="state.take"
  [skip]="state.skip"
  [sortable]="true"
  [selectable]="true"
  [groupable]="false"
  [reorderable]="true"
  [resizable]="false"
  (dataStateChange)="onStateChange($event)"
>
  <kendo-grid-checkbox-column
    class="grid-cell-style-select"
    [headerClass]="'grid-column-header'"
    [width]="45"
    [resizable]="false"
    [columnMenu]="false"
    [showSelectAll]="true"
  >
  </kendo-grid-checkbox-column>

Any help would be greatly appreciated .

General Discussions

Grid

asked on 23 Mar 2023

0 answers

68 views

Personalising kendoGridSelectAllCheckbox

I have a kendo-grid-checkbox-column that needs a checkbox in the header. When clicking on it, it' supposed to be a

SelectAll checkbox there's a specific row i do'nt want to select.

First, i thought i would just use:

<ng-template kendoGridHeaderTemplate>

</ng-template>

followed by an <ng-template kendoGridCellTemplate>

But, for unknown reasons, that made it impossible for me to select the other rows , as if they were disabled

asked on 12 May 2022

0 answers

184 views

JAWS Screen reader is reading entire grid content while focusing on kendo switch button

Hi,

I have a kendo grid and in each row, I have a kendo switch button. When focusing on the kendo switch in the first row, the JAWS screen reader reads the entire grid values. The expected behavior is JAWS should read only the aria-label value along with Switch's action(Switched on or Pressed Off). I tried setting role="switch" and role="button". How to fix this?

Here's the stackblitz link: https://stackblitz.com/edit/angular-egapar?file=src%2Fapp%2Fapp.component.ts

I've attached JAWS' Speech history.

Thanks

updated question on 22 Apr 2022

1 answer

110 views

Why is the Kendo UI (AngularJS) affected by an NGX (Angular 2+) update?

I work on an enterprise application that has a mix of AngularJS (v1) and NGX (v2+) pages. We employ Kendo UI to construct Grids for list pages in the app.

Recently, we updated the the NGX portion of our application to Angular 12 via these update steps. After doing so however, the "items per page" text that usually appears at the bottom of the Kendo Grid next to the page size drop down disappeared from grids that are on AngularJS pages.

I've tried reverting the i18n migration step in the Angular upgrade guide which changes message IDs ("items per page" is one of the messages in messages.xlf) but this didn't help.

I also tried modifying the $scope's gridOptions that set the messages on the grid based on these docs i.e.

pageable: {
   .
   .
   .
   messages: {
      itemsPerPage: "items per page"
   }
}

but this also didn't work.

What's interesting is that if I modify the display or empty properties in messages, I do actually end up seeing a change. It's itemsPerPage (among other properties) whose updates can't be seen on the front-end. This might be a symptom of the same issue.

Anyone have ideas as to why this might be happening? Are there any incompatibility issues with certain versions of @progress/kendo-angular-<package_name> with version 12 of Angular?

General Discussions

Grid

answered on 04 Mar 2022

1 answer

54 views

How to integrate Reporting tool in Kendo UI Angular?

In DataGrid, export PDF is taking snapshot and downloads but not actually data?

Thanks in advance.

General Discussions

Grid

PDF Export

answered on 03 Mar 2022

4 answers

252 views

Error trying to update to angular 13 Can't resolve all parameters for FilterService: (?).

I'm trying to update a project to Angular 13 and after running the tests I end up with this error, has anyone faced this error? and know how to solve it?

I'm using Jest as test runner and jest-preset-angular updated to the last version

NG0204: Can't resolve all parameters for FilterService: (?).

      at getUndecoratedInjectableFactory (node_modules/@angular/core/fesm2015/core.mjs:11501:15)
      at injectableDefOrInjectorDefFactory (node_modules/@angular/core/fesm2015/core.mjs:11491:16)
      at providerToFactory (node_modules/@angular/core/fesm2015/core.mjs:11534:52)
      at providerToRecord (node_modules/@angular/core/fesm2015/core.mjs:11521:25)
      at R3Injector.processProvider (node_modules/@angular/core/fesm2015/core.mjs:11424:24)
      at node_modules/@angular/core/fesm2015/core.mjs:11410:56
      at node_modules/@angular/core/fesm2015/core.mjs:4162:76
          at Array.forEach (<anonymous>)
      at deepForEach (node_modules/@angular/core/fesm2015/core.mjs:4162:11)
      at R3Injector.processInjectorType (node_modules/@angular/core/fesm2015/core.mjs:11410:13)
      at node_modules/@angular/core/fesm2015/core.mjs:11213:48
      at node_modules/@angular/core/fesm2015/core.mjs:4162:76
          at Array.forEach (<anonymous>)
      at deepForEach (node_modules/@angular/core/fesm2015/core.mjs:4162:11)
      at new R3Injector (node_modules/@angular/core/fesm2015/core.mjs:11213:9)
      at createInjectorWithoutInjectorInstances (node_modules/@angular/core/fesm2015/core.mjs:11187:12)
      at new NgModuleRef (node_modules/@angular/core/fesm2015/core.mjs:21812:28)
      at R3TestBedCompiler.finalize (node_modules/@angular/core/fesm2015/testing.mjs:930:30)
      at TestBedRender3.get testModuleRef [as testModuleRef] (node_modules/@angular/core/fesm2015/testing.mjs:1795:49)
      at TestBedRender3.inject (node_modules/@angular/core/fesm2015/testing.mjs:1718:29)
      at inject (node_modules/@angular/core/fesm2015/testing.mjs:1609:37)
      at node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:157:15
      at node_modules/tslib/tslib.js:117:75
      at new ZoneAwarePromise (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1347:33)
      at __awaiter (node_modules/tslib/tslib.js:113:16)
      at createComponent (node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:155:12)
      at node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:126:33
      at node_modules/tslib/tslib.js:117:75
      at new ZoneAwarePromise (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1347:33)
      at __awaiter (node_modules/tslib/tslib.js:113:16)
      at renderFixture (node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:122:20)
      at node_modules/@testing-library/angular/fesm2015/testing-library-angular.mjs:64:15
      at fulfilled (node_modules/tslib/tslib.js:114:62)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:407:30)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3765:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invoke (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:406:56)
      at Zone.Object.<anonymous>.Zone.run (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:167:47)
      at node_modules/zone.js/bundles/zone-testing-bundle.umd.js:1325:38
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:441:35)
      at ProxyZoneSpec.Object.<anonymous>.ProxyZoneSpec.onInvokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:3796:43)
      at ZoneDelegate.Object.<anonymous>.ZoneDelegate.invokeTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:440:64)
      at Zone.Object.<anonymous>.Zone.runTask (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:212:51)
      at drainMicroTaskQueue (node_modules/zone.js/bundles/zone-testing-bundle.umd.js:627:39)

General Discussions

Grid

answered on 22 Feb 2022

1 answer

880 views

Storybook for Angular not displaying elements created by Kendo UI

I am trying to use Storybook for an Angular project. The Angular project is utilizing Kendo UI's kendo grid elements throughout component templates.

The issue is any piece of a component template using a kendo element does not show in the Storybook interface when I am running it. If I change to standard html elements, the data does display as expected.

What do I have setup incorrectly that is preventing these custom elements from displaying in Storybook?

Any help or ideas would be appreciated and am happy to provide more context to anything. Some code samples below.

Versions
@angular/core - ^12.1.0<br/>
@progress/kendo-angular-grid - ^5.4.0<br/>
@storybook/angular - ^6.3.4

.storybook/main.js file

module.exports = {
  "stories": [
    "../src/**/*.story.mdx",
    "../src/**/*.story.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
  ],
  "core": {
    "builder": "webpack5"
  }
}

component story

import { HttpClientModule } from '@angular/common/http';
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { RouterTestingModule } from '@angular/router/testing';
import { moduleMetadata } from '@storybook/angular';
import { Story, Meta } from '@storybook/angular/types-6-0';
import DocumentsComponent from './documents.component';

export default {
  title: 'Components/Pages/Documents',
  component: DocumentsComponent,
  argTypes: {},
  decorators: [
    moduleMetadata({
      imports: [HttpClientModule, RouterTestingModule],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }),
  ],
} as Meta;

const Template: Story<DocumentsComponent> = (args: DocumentsComponent) => ({
  props: args,
});

export const DocumentsList = Template.bind({});

component template file

<div class="documents">
  <button kendoButton (click)="addNew()" class="add-new" icon="plus" look="flat">Add New</button>
  <h1>Documents</h1>


  <!-- start block added to confirm data was available when rendering -->
  <div *ngFor="let data of gridData">
    <h2>{{data.id}}</h2>
  </div>
  <!-- end block added to confirm data was available when rendering -->


  <kendo-grid
    [data]="gridData"
    [sort]="sort"
    [sortable]="{ allowUnsort: true, mode: 'multiple' }"
    (sortChange)="sortChange($event)"
  >
    <kendo-grid-column field="id" title="ID" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="assignee.username" title="Assignee" [width]="100"> </kendo-grid-column>
    <kendo-grid-column field="status" title="Status" [width]="120">
...