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.
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?
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)">
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?
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:
Any help would be greatly appreciated .
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>
<input (click)="onclick( )" type="checkbox" >
</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
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
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?
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.
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)
module.exports = { "stories": [ "../src/**/*.story.mdx", "../src/**/*.story.@(js|jsx|ts|tsx)" ], "addons": [ "@storybook/addon-links", "@storybook/addon-essentials", ], "core": { "builder": "webpack5" } }
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({});
<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">
...