Questions on Kendo UI for Angular Forum

0 answers

129 views

Error while adding Custom Tools to the ToolBar

I have been trying to implement Custom toolbar with Kendo Buttons using the below document from kendo.

https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/#toc-adding-custom-tools-to-the-toolbar

I am getting "Cannot read properties of undefined (reading 'nativeElement')" error.

Below is my implementation.

<ng-container *ngIf="stepsState$ | async as stepsState">
    <kendo-toolbar *ngIf="isToolbarEnabled$ | async">
        <aog-step-toolbar-button buttonId='reset-button' text="Reset" themeColor="error" (click)='reset()'>
        </aog-step-toolbar-button>
        <kendo-toolbar-separator></kendo-toolbar-separator>
        <aog-step-toolbar-button *ngIf='stepsState.currentStep!==0' buttonId='back-button' text="Back"
            themeColor="primary" (click)='backStep()'>
        </aog-step-toolbar-button>
        <aog-step-toolbar-button *ngIf='stepsState.currentStep!==3' buttonId='next-button' text="Next"
            themeColor="primary" (click)='nextStep()' [disabled]='isStepInvalid(stepsState)'>
        </aog-step-toolbar-button>
        <kendo-toolbar-separator *ngIf='stepsState.currentStep===3'></kendo-toolbar-separator>
        <aog-step-toolbar-button *ngIf='stepsState.currentStep===3' buttonId='save-button' text="Save"
            themeColor="primary" (click)='save()' [disabled]='isStepperInvalid(stepsState)'>
        </aog-step-toolbar-button>
    </kendo-toolbar>
</ng-container>

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { Store } from '@ngrx/store';
import { Observable } from 'rxjs';
import {
  goToNextStep,
  goToPreviousStep,
  resetStepper,
} from '../../state/operational-structure-creation-step/operational-structure-creation-step.actions';
import { AggregatedStepState } from '../../state/operational-structure-creation-step/step';
import { submitOperationalStructureCreation } from '../../state/operational-structure-creation/operational-structure-creation.actions';
import { StepsStateFacadeService } from '../../services/steps-state-facade.service';
import { selectIsToolbarEnabled } from '../../state/operational-structure-creation/operational-structure-creation.selectors';
// TODO: rename to toolbar instead of navigation as it holds reset and save now
@Component({
  selector: 'aog-operational-structure-step-navigation',
  templateUrl: './operational-structure-step-navigation.component.html',
  styleUrls: ['./operational-structure-step-navigation.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class OperationalStructureStepNavigationComponent {
  public readonly stepsState$: Observable<AggregatedStepState>
    = this.stepsStateFacade.stepsState$;
  public readonly isToolbarEnabled$: Observable<boolean> = this.store
    .select(selectIsToolbarEnabled);
  public isStepInvalid(state: AggregatedStepState): boolean {
    const stepState = state.steps[state.currentStep];
    if (!stepState) {
      throw new Error(`Unknown step state for index: ${state.currentStep}`);
    }
    return !stepState.isValid;
  }
  public isStepperInvalid(state: AggregatedStepState): boolean {
    return state.steps.filter((s) => s.isValid).length !== 4;
  }
  public constructor(
    private readonly stepsStateFacade: StepsStateFacadeService,
    private readonly store: Store,
  ) { }
  public nextStep(): void {
    this.store.dispatch(goToNextStep());
  }
  public backStep(): void {
    this.store.dispatch(goToPreviousStep());
  }
  public reset(): void {
    this.store.dispatch(resetStepper());
  }
  public save(): void {
    this.store.dispatch(submitOperationalStructureCreation());
  }
}

<ng-template #toolbarTemplate>
    <button [id]='buttonId' [aogTestId]="buttonId" kendoButton [themeColor]="themeColor"
        [disabled]='disabled' (click)='onClick($event)'>
        {{ text }}
    </button>
</ng-template>

@Component({
  providers: [{
    provide: ToolBarToolComponent,
    useExisting: forwardRef(() => OperationalStructureStepToolbarButtonComponent),
  }],
  selector: 'aog-step-toolbar-button',
  templateUrl: './operational-structure-step-toolbar-button.component.html',
})
export class OperationalStructureStepToolbarButtonComponent extends ToolBarButtonComponent {
  @Input()
  public buttonId = uuid();
  @ViewChild('toolbarTemplate', { static: true })
  public override toolbarTemplate!: TemplateRef<Element>;
  public onClick($event: Event) {
    this.click.emit($event);
  }
  public constructor(element: ElementRef, zone: NgZone) {
    super(element, zone);
  }
}

ToolBar

asked on 21 Aug 2023

1 answer

185 views

How to export a tabStrip with 4 tab in a pdf using kendoUI pdf export in angular?

Hi,

I am currently working with the KendoUI Angular TabStrip and the pdfExport functionality. I have a specific requirement where I need to work with the same functionality. My situation involves a TabStrip that consists of four tabs, and each of these tabs contains a graph from different components. When using the pdfExport feature, I've noticed that only the currently open tab can be exported to PDF. However, my goal is to export all four charts into a single PDF file.

I'd like to inquire whether this feature is supported by KendoUI. If it is supported, could you please guide me on how to achieve this functionality?

PDF Export

answered on 21 Aug 2023

11 answers

775 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

1 answer

810 views

Setting Google font as Default font for all Kendo Components

I have imported a google font that I want to use as the default font for my application

@import url('https://fonts.googleapis.com/css2?family=Arimo:wght@400;700&display=swap');

I am also using tailwindcss to style a majority of the application so I have tried to set it as
default in many different ways.

@layer base {
  html {
    font-family: Armio, system-ui, sans-serif !important;
  }
}
$kendo-font-family-sans-serif: Armio, system-ui, sans-serif !important;
$font-family-monospace: Armio, system-ui, sans-serif !important;

curious what I am doing wrong - I have been able to manually override in the .appbar component
but for the kendo dialogs it is not taking effect and using the Roboto font instead?

Typography

answered on 18 Aug 2023

1 answer

367 views

Column-kendo-grid "sticky" property does not change dynamically

I'm trying to change the "sticky" columns dynamically in my project, but if I add a column with sticky true dynamically, the other column "rises" on top of the other, it's like the recalculation is not redone to leave more than one column with "sticky".

I made an example on "stackblitz" of the error, it starts with column 2 (ProductName) starting with "sticky" as "true", but if you click to column 1 (ProductID) and column 3 (Category.Category) it gets fixed, column 3 is on top of the other fixed columns.
The three columns with styck only work if I start the kendo grid with both true.

To test, keep the screen small to generate horizontal scrolling

example:

https://stackblitz.com/edit/angular-hjbr9g-nsukvc?file=src%2Fapp%2Fapp.component.ts

Grid

answered on 18 Aug 2023

1 answer

145 views

Show SummaryTag always in Multiselect even when no items are selected

Hi, as described here https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/summary-tag-mode/#toc-basic-usage iam creating a MultiSelect component with a summary tag using the kendoMultiSelectSummaryTag directive and a custom kendoMultiSelectGroupTagTemplate .

But the summary tag is only visible, when there is atleast one item selected.

Is it possible to show the summary tag even when there are no items selected?

E.g. somethink like "0 items selected"?

MultiSelect

answered on 17 Aug 2023

0 answers

81 views

kendoGridPDFCommand directive blocks the ui

When trying to download from a large dataset, this blocks the UI and the browser throws the message "wait".

kendoGridExcelCommand has no such limitation.

How do I get it to not block the UI on PDF export?

PDF Export

asked on 16 Aug 2023

1 answer

464 views

Unable to set specific width for kendo drawer

I'm currently implementing the kendo-drawer for navigation in my application. I have most things working but am running into an issue with styling.

I have tried setting a custom width of 300px for the drawer but the element itself always has a flex-basis of 240px on it, overriding the value in the scss. I have looked at the utils included with the theme but am unsure how to use them.

Is there a way that I can set the flex-basis to be the value that I am wanting? Changing it in DevTools gives me the result that I want.

Thanks in advance.

Drawer

answered on 15 Aug 2023

5 answers

1.2K+ 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