Telerik Forums
Kendo UI for Angular Forum
1 answer
1.5K+ views

The calendar popup is not getting closed even after selecting the date or clicking outside.

This is how I have integrated data picker in my component.

<kendo-datepicker *ngIf="formControl.allowEditing && !disabled && active" placeholder="mm/dd/yyyy"
    [formControlName] = "controlName" [min]="minDate" [max]="maxDate" [disabledDates]="disableDates" >
   

</kendo-datepicker>

 

 

Hetali
Telerik team
 answered on 05 Sep 2023
1 answer
92 views
I've set the heights of all the kendo-(inputs) to be 45px when they are created, yet for whatever reason the div with class k-form-field-wrap is always 4 pixels taller for the dropdown list input compared to the other form inputs. Does anyone know what maybe causing this?
Tsvetelina
Telerik team
 answered on 05 Sep 2023
0 answers
80 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
389 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
428 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
152 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
191 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
128 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
261 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
126 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
Narrow your results
Selected tags
Tags
+? more
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Rob
Top achievements
Rank 3
Iron
Iron
Iron
Atul
Top achievements
Rank 1
Iron
Iron
Iron
Alexander
Top achievements
Rank 1
Veteran
Iron
Serkan
Top achievements
Rank 1
Iron
Shawn
Top achievements
Rank 1
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?