I recently converted a file-upload control to use external buttons instead of the built-in Upload and Clear buttons.  The control was correctly firing all the events.  However, when I hid the built-in buttons and used my own buttons to execute the uploadFiles method, the events no longer fire.

Here is HTML that creates the control and the new buttons:

<kendo-upload #upload

[saveUrl]="equipmentUploadUrl"
[multiple]="false"
[autoUpload]="false"
[restrictions]="uploadRestrictions"
(complete)="completeEventHandler()"
(error)="errorEventHandler($event)"
(success)="successEventHandler($event)"
(select)="onSelectEvent($event)"
(upload)="onUploadEvent($event)"
(remove)="onRemoveEvent($event, upload)"
[(ngModel)]="uploadFileList">

<kendo-upload-messages select="Upload Equipment List">
</kendo-upload-messages>'

<div row *ngIf="fileCount > 0">

<button kendoButton [primary]="true" (click)="onClearButtonClick(upload)"> Clear </button>
<button kendoButton [primary]="true" (click)="onUploadButtonClick(upload)"> Upload </button>
&nbsp;
<input type="checkbox" [(ngModel)]="createSnapshots" class="k-checkbox" />
<label for="createSnapshots" class="k-checkbox-label">Create Snapshots</label>

</div>

Here is the handler for the click of the Upload button:

public onUploadButtonClick(upload: UploadComponent) {

this.loading = true;
upload.saveUrl += `?createSnapshot=${this.createSnapshots}`;
upload.uploadFiles();

}

When the uploadFiles() method is execute, it DOES fire the upload event, which my code handles in the onUploadEvent method, but none of the other events are fired.  I want to be able to catch when the upload is complete, but neither the "complete" nor "success" events are firing.

public onUploadEvent(e) {

this.resetFileUpload();

}

public completeEventHandler(): void {

this.loading = false;

}

public successEventHandler(e: SuccessEvent): void {

this.loading = false;

}

public errorEventHandler(e: ErrorEvent): void {
  alert("Your file upload failed.  Please try again.");
}

private resetFileUpload() {
    this.fileCount = 0;
    this.uploadFileList = [];
}

https://stackblitz.com/edit/ka-draw-signature-fy3eep?file=app%2Fapp.component.ts

I have been using the above given code to create a signature pad for the web application I am working on. Although the code works fine when used alone, when used in my application, the line starts a few pixels above the mouse pointer when it is used. Any help will be much appreciated.

I have a bar chart in which I am showing tooltip when user hovers on series(bars). Now I want to show an icon (X) to let user close the tooltip instead of auto close. I tried closable="true" but it is not working on kendo-chart-series-item-tooltip. (The popup which gets opened on series hover has customized logic inside which shows 3-4 lines inside a div )

So I want an icon inside the tooltip so that when user clicks on that X icon then only the tooltip should close. 

Please refer the attached image for better understanding of my requirement.

Hi team,

I'm trying to force a different orientation for the PDF file exported.

I tried this:

I set the landscape attribute for forcing the portrait orientation. But after the export, I always get the scheduler in landscape orientation.

Could you please help me here? :)

Thank you.

Change css style inside the line chart

I would like to change the css style of the line in which the value is zero.
I would like a thick black line.
How can I do?

from:

to:

Hi, I'm working on generating a PDF of a form I've created and I'm trying to style the PDF so that inputs have no background and just show their entered text. I've been able to do this with all of the form elements aside from my Kendo date range. For some reason, I cannot set the background of these inputs for the PDF.

When I set the background to transparent in the regular CSS, it works, and the PDF is generated without the background... but when I set the background to transparent just for the PDF CSS, it does not.

I've tried using both background, background-color, background: transparent, background: none, etc. with no luck. 

Stackblitz: https://stackblitz.com/edit/kendo-angular-date-range-gxnuby (try downloading the PDF - background of date inputs will be white)

.k-pdf-export .k-dateinput-wrap, .k-pdf-export .k-dateinput-wrap {
  background: transparent !important;
  border: 3px solid red;
}

Hi 

I have grid with dynamic data and when i change colunms from column menu i want to write column state or selected columns on my console. Is it possible?

Thanks

When using Menu filters I can define date range filter in the following way

<kendo-grid-date-filter-menu
    [filter]="filter"
    [operator]="filterOperator"
    [column]="column"
    [filterService]="filterService"
    [extra]="true"
  >
    <kendo-filter-gte-operator text="{{'Is greater or equal'|i18n}}"></kendo-filter-gte-operator>
    <kendo-filter-gt-operator text="{{'Is greater than'|i18n}}"></kendo-filter-gt-operator>
    <kendo-filter-lte-operator text="{{'Is less or equal'|i18n}}"></kendo-filter-lte-operator>
    <kendo-filter-lt-operator text="{{'Is less than'|i18n}}"></kendo-filter-lt-operator>
    <kendo-filter-eq-operator text="{{'Is equal to'|i18n}}"></kendo-filter-eq-operator>
    <kendo-filter-neq-operator text="{{'Is not equal to'|i18n}}"></kendo-filter-neq-operator>
    <kendo-filter-isempty-operator text="{{ 'Is empty' | i18n }}"></kendo-filter-isempty-operator>
    <kendo-filter-isnotempty-operator text="{{ 'Is not empty' | i18n }}"></kendo-filter-isnotempty-operator>
  </kendo-grid-date-filter-menu>

Both the primary and secondary search criteria now get the same list of operators and in the same order. As the end used most likely wants to filter some date range this means that every time the user needs to also change the operator in addition to selecting dates. So is there a built-in way to have a different default operator for only the secondary criteria?

Even more cool would be some kind of interactive selection component where user can define start and end date. Similar to DateRange picker of materia UI.