Questions on Kendo UI for Angular Forum

11 answers

385 views

KENDO-ANGULAR Export grid and chart in single pdf

I am working with the Kendo-angular. Need to export the grid and chart in single pdf. I found one example http://dojo.telerik.com/@tsvetomir/ubOhe it is with the jquery .
How I can achive the same thing with Kendo-Angular.
What if chart and grid in 2 different tabs and need to export both in single pdf
Any suggetion will be helpful. Thanks

General Discussions

updated answer on 18 Aug 2023

5 answers

770 views

Dynamic Multi-Column Headers

Hi

I'm trying to create a grid which has a mixture of multi-column headers and normal headers. I don't know the number / type of columns at design time so I'm using an array and trying to loop round the columns using a recursive template shown below.

<kendo-grid #grid [data]="result.rows"

[navigable]="true">

<ng-container *ngTemplateOutlet="recursiveColumns; context:{ columns: result.columns }">

</ng-container>

</kendo-grid>

<ng-template #recursiveColumns let-cols="columns">

<ng-container *ngFor="let c of cols">

<kendo-grid-column

*ngIf="!c.isGroup"

field="{{c.field}}"

title="{{c.title}}"

[locked]="c.isLocked || false">

</kendo-grid-column>

<kendo-grid-column-group

*ngIf="c.isGroup"

title="{{c.title}}">

<ng-container *ngTemplateOutlet="recursiveColumns; context:{ columns: c.columns }"></ng-container>

</kendo-grid-column-group>

</ng-container>

</ng-template>

Unfortunately the columns / groups do not get rendered. As far as I can tell my template is correct - everything is displayed correctly if I change the page to write out nested divs instead.

Please can you let me know if what I'm trying to achieve is possible? and if so,what changes I need to make to get it to work.

Thanks

Keith

General Discussions

answered on 15 Aug 2023

0 answers

22 views

Standard component based on Kendo Treelist

Hi,
I am making a standard treelist component based on kendo treelist, and im having some problem which i dont know how to fix it.
2. I want to allow user can add kendo treelist column and use ng-template KendoTreelistCell as `Usage code` below but it keep throw this error:
Uncaught (in promise): NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]:
NullInjectorError: No provider for OptionChangesService!
NullInjectorError: R3InjectorError(PMarketingModule)[OptionChangesService -> OptionChangesService -> OptionChangesService -> OptionChangesService]:
NullInjectorError: No provider for OptionChangesService!
https://stackblitz.com/edit/angular-keazja?file=src%2Fapp%2Fapp.component.ts
My component treelist:

export class PKendoTreelistComponent<T> implements OnInit, AfterViewInit {
  //Retrive input with many type of input array
  @Input() rootData: Subject<T[]> = new Subject<T[]>();
  @Input() hasChildrenFn: (item: T) => boolean;
  @Input() fetchChildrenFn: (item: T) => T[];
  @ViewChild('customTreeList') public customTreelist: TreeListComponent;
  @ViewChild('treelistContent', { static: true }) treelistContent!: TemplateRef<any>;
  @ContentChildren(PKendoTreeListColumnComponent) columns;
  @ContentChildren(ColumnGroupComponent) columnGroups;
  constructor() {}
  ngOnInit(): void {
    console.log(this.treelistContent);
  }
  ngAfterViewInit(): void {
      this.customTreelist.columns.reset([
        this.customTreelist.columns.toArray()[0],
        this.columnGroups.toArray(),
        this.customTreelist.columns.toArray().slice(1)
      ])
  }
}

<kendo-treelist
    #customTreeList
    kendoTreeListExpandable
    [data]="rootData | async"
    [fetchChildren]="fetchChildrenFn"
    [hasChildren]="hasChildrenFn"
    [height]="400"
    >
    <ng-content></ng-content>
</kendo-treelist>

@Component({
  selector: 'app-p-kendo-treelist-column',
  template: `<kendo-treelist-column
  #CustomTreelistColumn
  [field]="field"
  [title]="title"
  [width]="width"
  [expandable]="expandable"
  >
</kendo-treelist-column>`
})
export class PKendoTreeListColumnComponent {
  @ViewChild(ColumnComponent) public realColumn: ColumnComponent;
  @Input() field: string = '';
  @Input() title: string = '';
  @Input() width: number = 0;
  @Input() expandable: boolean = false;
  constructor() { }
  ngAfterViewInit() {
    console.log(this.realColumn)
  }
}

Usage:

      <app-p-kendo-treelist 
      [rootData]="listGroupWebTreeList" 
      [hasChildrenFn]="hasChildren" 
      [fetchChildrenFn]="fetchChildren"
    >
      <kendo-treelist-column [expandable]="true" class="d-flex">
        <ng-template kendoTreeListCellTemplate let-dataItem>
          {{dataItem.VNGroupName}}
        </ng-template>
      </kendo-treelist-column>
      </app-p-kendo-treelist>

Regards,
Hnaul

General Discussions

TreeList

updated question on 19 Jul 2023

1 answer

25 views

Which figma material design kit should I use for Kendo web ui for angular?

Hello,

Which figma assets fits best as material design kit to design a front made with Kendo web ui for angular?

BR/

Mikael

General Discussions

Styling

answered on 11 Jul 2023

0 answers

32 views

Scheduler Dynamic Slot Height

Hi,

I've set up a scheduler using the new multi-week-view for multiple resources where I display only 1 week. And I have grouped these vertically by resource.

However I'd like to dynamically set the height of the slots, to fit all the events of a resource. And also do this for the group headers. So they match their row.

Switching to a different view to show all the event of a day isn't wanted as there are a lot of groups.

What would be the best way to do this?

General Discussions

Scheduler

asked on 26 Jun 2023

2 answers

488 views

What is the timeframe for Angular 16 support?

Would love to have even a pre-release version of Kendo that supports Angular 16 so that I can see how A16 works in our project. I understand it is very recent, but thought I would lodge the request anyway.

General Discussions

answered on 08 Jun 2023

1 answer

250 views

How to check which kendo version is installed in Angular project

Hi ,

We are in to process to upgrade kendo UI for one of our angular project.

1. How to check which existing version is installed in angular project with NPM command.

2. How to install new version on below existing angular environment:

Angular CLI: 6.2.2
Node: 14.20.0
Angular: 6.1.7

regards,

Sachin Verma

General Discussions

answered on 17 May 2023

1 answer

77 views

Upgrade to Angular 15 throws sass errors on Kendo-default-theme

Hi there,

I am trying to upgrade my project from Angular 14 to Angular 15. I am getting the following errors:

./src/assets/styles/pim.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Index out of range
╷
1328 │ @return function-exists( $name );
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
@progress\kendo-theme-default\dist\all.scss 1328:13 k-meta-function-exists()
@progress\kendo-theme-default\dist\all.scss 6526:19 generate-utils()
@progress\kendo-theme-default\dist\all.scss 6627:5 kendo-utils--layout--aspect-ratio()
@progress\kendo-theme-default\dist\all.scss 7440:5 kendo-utils--layout()
@progress\kendo-theme-default\dist\all.scss 13231:5 kendo-utils()
@progress\kendo-theme-default\dist\all.scss 13259:9 @content
@progress\kendo-theme-default\dist\all.scss 3695:9 module-render()
@progress\kendo-theme-default\dist\all.scss 13258:5 kendo-utils--styles()
@progress\kendo-theme-default\dist\all.scss 13264:5 @import
src\assets\styles\_kendo-custom.scss 16:9 @import
src\assets\styles\my.scss 5:9 root stylesheet

./src/assets/styles/my.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Index out of range
╷
1328 │ @return function-exists( $name );
│ ^^^^^^^^^^^^^^^^^^^^^^^^
╵
@progress\kendo-theme-default\dist\all.scss 1328:13 k-meta-function-exists()
@progress\kendo-theme-default\dist\all.scss 6526:19 generate-utils()
@progress\kendo-theme-default\dist\all.scss 6627:5 kendo-utils--layout--aspect-ratio()
@progress\kendo-theme-default\dist\all.scss 7440:5 kendo-utils--layout()
@progress\kendo-theme-default\dist\all.scss 13231:5 kendo-utils()
@progress\kendo-theme-default\dist\all.scss 13259:9 @content
@progress\kendo-theme-default\dist\all.scss 3695:9 module-render()
@progress\kendo-theme-default\dist\all.scss 13258:5 kendo-utils--styles()
@progress\kendo-theme-default\dist\all.scss 13264:5 @import
src\assets\styles\_kendo-custom.scss 16:9 @import
src\assets\styles\my.scss 5:9 root stylesheet

In my _kendo-custom.scss, it's simply importing the default theme stylesheet like this:

@import "@progress/kendo-theme-default/dist/all.scss";

I have tried to upgrade all the dependencies, but it's still throwing these errors. Here is the content my package.json

"@angular/animations": "^15.2.8",
"@angular/cdk": "^15.2.8",
"@angular/common": "^15.2.8",
"@angular/compiler": "^15.2.8",
"@angular/core": "^15.2.8",
"@angular/forms": "^15.2.8",
"@angular/localize": "^15.2.8",
"@angular/material": "^15.2.8",
"@angular/platform-browser": "^15.2.8",
"@angular/platform-browser-dynamic": "^15.2.8",
"@angular/router": "^15.2.8",
"@ng-select/ng-select": "^10.0.4",
"@progress/kendo-angular-buttons": "^11.6.0",
"@progress/kendo-angular-common": "^11.6.0",
"@progress/kendo-angular-dateinputs": "^11.6.0",
"@progress/kendo-angular-dialog": "^11.6.0",
"@progress/kendo-angular-dropdowns": "^11.6.0",
"@progress/kendo-angular-excel-export": "^11.6.0",
"@progress/kendo-angular-grid": "^11.6.0",
"@progress/kendo-angular-inputs": "^11.6.0",
"@progress/kendo-angular-intl": "^11.6.0",
"@progress/kendo-angular-l10n": "^11.6.0",
"@progress/kendo-angular-label": "^11.6.0",
"@progress/kendo-angular-notification": "^11.6.0",
"@progress/kendo-angular-pdf-export": "^11.6.0",
"@progress/kendo-angular-popup": "^11.6.0",
"@progress/kendo-angular-tooltip": "^11.6.0",
"@progress/kendo-angular-treelist": "^11.6.0",
"@progress/kendo-angular-treeview": "^11.6.0",
"@progress/kendo-common": "^0.2.2",
"@progress/kendo-data-query": "^1.6.0",
"@progress/kendo-date-math": "^1.5.10",
"@progress/kendo-drawing": "^1.17.5",
"@progress/kendo-file-saver": "^1.1.1",
"@progress/kendo-licensing": "^1.3.0",
"@progress/kendo-ooxml": "^1.7.0",
"@progress/kendo-popup-common": "^1.9.2",
"@progress/kendo-schematics": "^3.2.0",
"@progress/kendo-theme-default": "^6.3.0",

Running out of ideas now on how to resolve this. Any help would be appreciated!

General Discussions

answered on 28 Apr 2023

0 answers

35 views

Theming with figma only

Hello,

So I downloaded figma assets, created design with reused components from underlying figma assets, variables are changed and everything, but how do you actually use those in Angular app ?

If I set variable names with the values before importing all.scss in styles, it has no effect, because variable names in figma does not match variable names in all.scss of the themes, so it does not override. I noticed that themebuilder somehow maps those figma variables to the variables used in themes.

what should I do without ThemeBuilder?

General Discussions

Styling

asked on 23 Apr 2023

1 answer

96 views

usage of angular component (standalone) built with Kendo Angular within Kendo Ui Jquery main app - styling issue

Hi,

I am not sure if question belongs here, but since it is related to Kendo UI Angular and JQuery, I guess it might. :)

I have "old" app built using AngularJS, and Kendo UI for Jquery.

Recently we started replacing old modules with new ones built with latest Angular, and there we use Kendo UI Angular. To replace certain functionality I built standalone component in Angular where I use Kendo UI grid, cards, tabstrip and window. When I import my angular component files into old app, it seems that styling and themes from new component, mess up with styling of widgets of old app.

My question is following: Are styling (css) sheets from Jquery and Angular widgets the same, meaning, can I simply opt for one or another styling and count that all widgets will then be consistent? Since many jquery widgets rely on css selectors to achieve different custom functions, it is important to know whether I can rely on this.

Meaning, can I use css theme (assuming that both use default now) from Angular and count that widgets or functionalities based on css in old app won't be destroyed?

If this is not a case, could you propose the way how to combine these two in usable way?

Thank you very much.

Regards,

Vedad

General Discussions

Styling