Telerik Forums
Kendo UI for Angular Forum
1 answer
198 views

Hello, I have the following scenario:

The column status is represented in the following code:

   <kendo-grid-column  [headerStyle]="{'font-weight': 'bold'}" [width]="200" field="status" title="Status">
        <ng-template kendoGridCellTemplate let-dataItem>
            <span class="whole-cell" [style.backgroundColor]="colorCode(dataItem.status.description)">
                <kendo-combobox [data]="statuses" textField="description" valueField="code" [filterable]="true"
                    (filterChange)="handleFilter($event)" [(ngModel)]="dataItem.status">
                </kendo-combobox>
            </span>
        </ng-template>
    </kendo-grid-column>

 

 

When I click in the blue part, the grid run the following code:

 public cellClickHandler({ sender, rowIndex, columnIndex, dataItem, isEdited }) {
    if (!isEdited) {
      sender.editCell(rowIndex, columnIndex, this.createFormGroup(dataItem));
    }

 

 public createFormGroup(dataItem: any): FormGroup {
    return this.formBuilder.group({
      orderNumber: dataItem.orderNumber,
      status: [dataItem.status, Validators.required],
      customerDateWanted: dataItem.customerDateWanted,
      providerShipDate: dataItem.providerShipDate,
      boxesCount: dataItem.boxesCount,
      providerCode: dataItem.providerCode,
      brand: dataItem.brand,
      postharvest: dataItem.postharvest,
      boxType: dataItem.boxType,
      bunchesUnitPerBox: dataItem.bunchesUnitPerBox,
      flowerCost: dataItem.flowerCost,
      observation: dataItem.observation,
      slots: dataItem.slots,
      flowerCode: dataItem.flowerCode,
      flowerGrade: dataItem.flowerGrade,
      composition: dataItem.composition,
      pricesB: dataItem.pricesB
    });
  }

I have a doubt about the isEdited field because always is false, when is true?

In the next link you can see the problem with the component:

https://www.loom.com/share/8bf170aefde14cafa44e6250ab6d7b76

 

dataItem.status is an object like {value:1, description:"PROCESS"}

 

Which is my problem ?

 

Thanks!

Svet
Telerik team
 answered on 04 Apr 2022
0 answers
80 views

I am using kendo ui drawing pad for obtaining digital signatures. I am able to save it as .svg file using save as and display the svg link in console.

But I am unable to extract the svg link from the function to use it outside ExportSVG. Is there any way I can do that?

Pranav
Top achievements
Rank 1
 updated question on 04 Apr 2022
1 answer
165 views

I have a grid with editing in the cell. I need to put the yellow color in each cell after this cell is edited. Can you help me please? Which is the better way in this case?In this moment I have for example : 

<kendo-grid-column [style]="isEdited ? {'background-color': '#666','color': '#fff'} : {}" field="customerDateWanted" [width]="150" editor="date" title="Cust Date"
        [format]="'{0:yyyy-MM-dd}'">
        <ng-template KendoGridEditTemplate let-dataItem="dataItem" let-formGroup="formGroup">
            <kendo-datepicker [formControl]="formGroup.controls.customerDateWanted" [format]="'dd/MM/yyyy'">
            </kendo-datepicker>
        </ng-template>
    </kendo-grid-column>

 

isEdited is a boolean that I am testing. I think that I need to put a value depending of this cell was edited or not but I don't know how.

 

Thanks!!

Martin Bechev
Telerik team
 answered on 04 Apr 2022
2 answers
116 views

Hi team,

I couldn't find how to format the same way time scheduler column for 'en-GB' and 'de-DE' languages.

Now, the format is shown for 'en-GB' is:

And 'de-DE':

How can I format it in the same way?

Thank you!

Regards,

Carina

carina
Top achievements
Rank 1
Iron
 answered on 31 Mar 2022
1 answer
995 views

Hi

I have a component that contains a kendo-grid of "Organizations". Its name is "OrganizationTableComponent" . In the table there is a button "edit" used to open another component "OrganizationFormComponent" in a kendo-window using WindowService.

In the "OrganizationFormComponent" , in the ngOnInit() , I want to receive the country record to show it on the form

the following is editAction() method in the OrganizationTableComponent

public editAction(){
    dataItem = this.selectedOrganization; // This is the seleced row
    console.log('editAction',dataItem);
    const windowRef = this.windowService.open({
      title: 'Edit Organization',
      content: OrganzationFormComponent,
      width: 400,
      top: 100,
      // is it possible to pass the selected row here when opening the window

    });

}

Dimiter Topalov
Telerik team
 answered on 31 Mar 2022
1 answer
133 views

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 = [];
}

 

 

Dimiter Madjarov
Telerik team
 answered on 30 Mar 2022
0 answers
64 views

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.

 

Pranav
Top achievements
Rank 1
 asked on 29 Mar 2022
1 answer
283 views

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.

 

 

Martin Bechev
Telerik team
 answered on 28 Mar 2022
1 answer
881 views

Hi team,

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

I tried this:

        <kendo-pdf-export #pdfExport [landscape]="false">
            <kendo-scheduler-pdf fileName='Vergabekalender.pdf' margin='1cm' [avoidLinks]="true">
            </kendo-scheduler-pdf>
        </kendo-pdf-export>

 

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.

Hetali
Telerik team
 answered on 25 Mar 2022
0 answers
82 views

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:

 

alex
Top achievements
Rank 1
Iron
Veteran
 asked on 25 Mar 2022
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?