Telerik Forums
Kendo UI for Angular Forum
1 answer
139 views
A loader component with a theme color of secondary is always gray regardless of the theme settings. You can see this on your demo page.
Martin Bechev
Telerik team
 answered on 30 Aug 2023
0 answers
177 views

I am using the kendo-pdf-export and I need to send the resulting pdf to my backend API without opening or downloading the file locally. 

I used the following to achieve this:


 exportToPdf(pdfExport: { export: () => Promise<any>; }) {
    
    pdfExport.export().then((group) => {
      exportPDF(group).then((data) => {
        
        saveAs(data, 'Cdl-conformite-' + this.searchCriteria.courtier + '_' + this.datePipe.transform(this.searchCriteria.valueDate, 'yyyy-MM-dd') + '.pdf', {
          proxyURL: `${PATH}/savePdf`,
          forceProxy: true
        });
      });
    });
  }

I configured my backend to receive the file and can upload it to an S3 bucket. All this works fine.

My only problem is that when I click the button to save the pdf it redirects the UI to my /savePdf route which ... obviously is a blank page.

How can I force the control to use the proxy to send the file but not redirect the UI i.e. stay on the current page but submit the post asynchronously to my backend and do nothing else in the UI?

EDIT: I used proxyTarget = "_blank", it's better but the new window is focused and remains open which is not really acceptable.

Luc
Top achievements
Rank 1
 updated question on 25 Aug 2023
0 answers
120 views

Kendo-filter has dropdowns that are not appearing in the mat-dialog modal of my angular app. I am using the boiler plate code that is provided in the kendo-filter over view page.   I can See The Add Group, Add Filter, but after clicking add filter button, the filter dropdowns appear, The dropdowns themselves do not work, I tried targeting the dropdown with z-index 1000 with no luck.  Has anyone seen this before?

If there was a popupSettings for kendo-filter, then all generated ui components could inherit from that setting.

 

                    <kendo-filter
                        #filter
                        [filters]="filters"
                        (valueChange)="onFilterChange($event)">
                    </kendo-filter>
                    <ng-template let-currentItem #template>
                        <kendo-dropdownlist
                            [popupSettings]="{ appendTo: 'component' }"
                        ></kendo-dropdownlist>
                    </ng-template>
Alternative attempted approach to set the popupSettings for dynamic kendo-dropdownlist
import { DropDownListComponent } from '@progress/kendo-angular-dropdowns';

@Component({
  // ...
})
export class YourComponent {
  @ViewChildren(DropDownListComponent) dropdownLists: QueryList<DropDownListComponent>;

  // ... other component properties and methods ...

  ngAfterViewInit() {
    this.dropdownLists.forEach(dropdown => {
      dropdown.popupSettings = { appendTo: 'component' };
    });
  }
}

joe
Top achievements
Rank 1
 updated question on 24 Aug 2023
0 answers
239 views
I am trying to use kendo-filter module in my application currently it has limited filter operators (https://www.telerik.com/kendo-angular-ui/components/filter/api/FilterExpression/#toc-operators/) i want extent the operators and add new operators, Is there any way we can achieve this. Thanks.
sandeep
Top achievements
Rank 1
 asked on 24 Aug 2023
0 answers
118 views

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);
  }
}
Firdoush
Top achievements
Rank 1
 asked on 21 Aug 2023
1 answer
166 views
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?
Tsvetelina
Telerik team
 answered on 21 Aug 2023
11 answers
724 views
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
Ajay
Top achievements
Rank 1
Iron
 updated answer on 18 Aug 2023
1 answer
725 views

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?

Martin Bechev
Telerik team
 answered on 18 Aug 2023
1 answer
331 views

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

Martin Bechev
Telerik team
 answered on 18 Aug 2023
1 answer
131 views

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"?

Tsvetelina
Telerik team
 answered on 17 Aug 2023
Narrow your results
Selected tags
Tags
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?