Telerik Forums
Kendo UI for Angular Forum
0 answers
132 views

Hi there,

While working with the Filter Component I was able to export an CompositeFilterDescriptor object on the client side before sending it to the server, the backend is a .net core API.

Unfortunately I tried to use Telerik.Datasource DLL in order to utilize the JSON parsing functionality inside however it seems like they are from two different worlds !

On the Angular side the CompositeFilterDescriptor looks like this 

{
    "logic": "or", 
    "filters": [ 
       {
           "field" : "unitId",
           "operator" : "eq", 
            "value" : "1005"
       }
     ]
}


On the .NET side the CompositeFilterDescriptor it is expecting something like this 

{
  "logicalOperator": 1,
  "filterDescriptors": [
      {
        "member": "unitId", 
        "operator": 2 , 
        "value" : "1005"
      }
  ]
}

 

Summary of Differences

1- Field names are different and hence not parsed properly ( i.e. logicalOperator vs logic)

2- Enumerations are sent as strings from Angular but parsed as Integers from Telerik.Datasource 

3- Its called Field in Angular and Member in Telerik.Datasource

 

I feel a little bit confused here, is there any library provided by telerik that I can use to capture the Angular CompositeFilterDescriptor received from the client app inside a Web API ?

 

 

Ahmed
Top achievements
Rank 1
 asked on 04 Sep 2023
1 answer
588 views

Hi All,

Kendo dropdown list by default shows 6 items when expanded (clicked on down arrow). How can i increase the number of items to be displayed?

Need to show at least 15 items instead of 6. Also need to change the height of list items so that more items can be shown.

Tried changing the height, but it increased the height of dropdown list itself instead of the slider that pops out when clicked.

Thanks!!!

Tsvetelina
Telerik team
 answered on 04 Sep 2023
1 answer
615 views

Does the kendo-numerictextbox support tooltips? I cant seem to find any documentation on it.

The placeholder wont do as its gone after text is typed.

Yanmario
Telerik team
 updated answer on 01 Sep 2023
1 answer
252 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
279 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
185 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
361 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
198 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
271 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
850 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jake
Top achievements
Rank 1
RBarnes
Top achievements
Rank 1
Iron
Iron
Rami
Top achievements
Rank 1
Iron
Veteran
Nathan
Top achievements
Rank 1
Kumeri
Top achievements
Rank 1
Iron
Veteran
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?