Questions on Kendo UI for Angular Forum

0 answers

235 views

The MaskedTextbox and NumericTextbox are still missing prefix and suffix template

I am using MaskedTextbox and NumericTextbox for our form but i don't see any template to add prefix and suffix icon as regular kendo textbox, please let me know if they will have their own template

MaskedTextBox

NumericTextBox

updated question on 06 Jul 2023

0 answers

186 views

Drag and drop from Kendo Grid to Kendo Tree and vice versa for Kendo Angular UI Components

Hi Members,

I have been trying to achieve drag and drop between Kendo Grid to Kendo Tree and vice versa but unable to find a feasible solution.

Is it possible to do so, if yes then can you please let me share some example of if someone has implemented something similar.

By default i think it doesn't support dragging and dropping from Kendo Angular Tree Control to Kendo Angular Grid Control

asked on 03 Jul 2023

0 answers

256 views

I can't set disabled property for kendo textbox when i am binding data by formControlName.

I don't know why i can't set kendo textbox disabled when i use it with formControlName, but when i test with kendo numericTextbox then it work. here is the example code below.
I just upgrade my Angular project from version 9 to 16 and i have this problem.

@Component({
    selector: 'my-app',
    template: `
        <form [formGroup]="test">
            <kendo-label class="k-form" text="Name">
            <kendo-textbox formControlName="value" [style.width.px]="200" 
            [disabled]="true" placeholder="Cardholder Name"></kendo-textbox>
            </kendo-label>
            <kendo-numerictextbox format="#" formControlName="value" placeholder="T.gian làm bài"
            [disabled]="true" [min]="0"
            [autoCorrect]="true"></kendo-numerictextbox>
        </form>
    `
})
export class AppComponent implements OnInit {
    public isDisabled = true;
    test = new FormGroup({
        value: new FormControl('test')
    })
    ngOnInit() {
        //I can set textbox disabled by this way
        this.test.controls['value'].disable();
    }
}

TextBox

asked on 03 Jul 2023

1 answer

126 views

$yiq-light variable not declared when using @progress/kendo-theme-bootstrap version 6.2.0

we use @progress/kendo-theme-bootstrap version 6.2.0 and related ones:

 "@progress/kendo-font-icons": "1.4.0",
    "@progress/kendo-theme-core": "6.2.0",
    "@progress/kendo-theme-default": "6.2.0",
    "@progress/kendo-theme-utils": "6.2.0",
    "bootstrap": "5.2.1"

and we receive and error saying "$yiq-light variable not found".

How we can fix it or change versions ?

Please assist.

Styling

answered on 30 Jun 2023

0 answers

1.2K+ views

Disable Multiselect Dropdown Items Once A Certain Number Have Been Selected

I am putting together a multiselect dropdown in Kendo UI for Angular and I have a use case where I want the user to only be able to select up to five options. I've configured the dropdown to use the itemDisabled function, but found that the function only has context to see each of the data items individually. I've tried to reference a global 'counter' variable that I'm setting each time the valueChange event is fired, but the counter variable is undefined in the itemDisabled function. I know that Kendo for jsp has a max items param, but angular does not. Any suggestions?

HTML File

<kendo-multiselect  class="input"

                                    formControlName="code"

                                    [checkboxes]="true"

                                    [autoClose]="false"

                                    [data]="codes"

                                    textField="value"

                                    valueField="value"

                                    placeholder="Select Code(s)"

                                    [style.width.px]="300"

                                    [itemDisabled]="itemDisabled"

                                    (valueChange)="valueChange($event)">

                    <ng-template kendoMultiSelectHeaderTemplate let-dataItem>

                        <button *ngIf="code.length !== codes.length && codes.length <= 15" (click)="code = codes">Select all Codes</button>

                        <button *ngIf="code.length === codes.length" (click)="code = []">Deselect all Codes</button>

                    </ng-template>

                </kendo-multiselect>

TS File

  valueChange(value : any) : void {
    this.selectedCages = value.length;
    console.log("selectedCage - " + this.selectedCages);
  }
  itemDisabled(itemArgs: { dataItem: any; index: number }): boolean {
    console.log("selectedCages - " + this.selectedCages);
    return this.selectedCages >= 5;
  }

DropDownList

MultiSelect

asked on 29 Jun 2023

2 answers

343 views

MultiSelect Dropdown

Hi! I work with React. I have Dialog with several fields. One of those field is MultiSelect. The problem is when I open MultiSelect's Dropdown adn scroll the Dialog's content and the Dropdown does not close when MultiSelect is not in the Dialog's viewport. I can get a nested element with a scroll in a Dialog only through document.querySelector('.k-dialog-content') to close Dropdown manually. Is there a native solution for this kind of situation in kendo-react?

DropDownList

MultiSelect

answered on 29 Jun 2023

1 answer

153 views

KendoGrid Angular : columnMenu columns sort

Hi,

i'm trying to order the items of the "columns" option of angular kendo grid columnMenu , like the jQuery version.

There is a way to do that?

Thanks.

Grid

Menu

answered on 28 Jun 2023

0 answers

433 views

Kendo button title attribute ignored when button is disabled

Hi,

I have the kendo ui angular button in my form. Due to multiple languages and options within the form, button text is sometimes too big to fit, so we are using ellipsis. But we still want user to be able to see full text when it brings mouse over it, so we are using title attribute to display full text.

Naturally, depending on various parameters button is disabled.

However, if the button is disabled, title attribute is ignored and not shown.

Is this a bug or it is intentional behavior? (regular html button without kendo displays it normally).

Thank yo and regards,

Vedad

Button

asked on 28 Jun 2023

0 answers

150 views

Misaligned columns on breakpage PDF HTML Kendo Angular

Hello,

I got a problem with PDF generation with Kendo,

Marked columns in red should be staggered on the right side, this data belongs to Homolog Number PH.002.15-O. Because of the break-page marked lines are misaligned

I provide you the html code

<div *ngIf="homologations$ | async as homologations">
<kendo-pdf-export #pdf
    paperSize="A4"
    [keepTogether]="'td'"
    [margin]="{
        top: '2cm', 
        bottom: standard.homologationForm.fields.length > 1 ? '2.5cm' : '4cm', 
        right: '2cm', 
        left: '2cm'
    }"
    [repeatHeaders]="true"
    [landscape]="standard.homologationForm.fields.length > 1"
    class="prevent-split"
>
    <ng-template kendoPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
        <div class="top-template">
            <div class="header">
                <span>FIA</span>
                <span>List n&deg;{{ standard.technicalList.number }}</span>
            </div>
        </div>
        <div class="bot-template">
            <span>
                <sup>(1)</sup> The homologation end date represents the final date on which the products may be manufactured
            </span>
            <span>
                <sup>(2)</sup> The validity of the product must always be that which is indicated on the product homologation label.
                The dates in this column are the latest possible dates that can be shown on the homologation label
            </span>
            <span *ngIf="warnings.length > 0">
                <sup>(3)</sup> Please refer to the end of this section
            </span>

            <div class="page-div">
                <span>{{ currentDate | appTechnicalDate:'dd.MM.YYYY' }}</span>
                <span>Page {{ pageNum }} / {{ totalPages }}</span>
            </div>
        </div>
    </ng-template>

    <div class="title-div">
        {{ standard.technicalList.englishTitle }}
    </div>

    <div class="center technical-div">
        TECHNICAL LIST N&deg; {{ standard.technicalList.number }}
    </div>

    <div class="center">
        <img *ngIf="headerPicture" [src]="headerPicture" class="header-picture" [style.max-height]="standard.homologationForm.fields.length > 1 ? '300px' : '400px'" />
    </div>

    <div [innerHtml]="standard.technicalList.linkUrl | appSafeHtml"></div>

    <ng-container *ngFor="let part of standard.parts; let i = index">
        <div *ngIf="part.name !== ''" class="part-infos" [class.page-break]="i > 0">
            <div class="center technical-div">
                {{ part.name }}
            </div>
            <div *ngIf="part.description !== null">
                {{ part.description }}
            </div>
        </div>

        <table class="table-contents">
            <thead>
                <th style="width: 50px;">
                    Homol. number
                </th>
                <th>
                    Brand
                </th>
                <th>
                    Model
                </th>
                <th *ngFor="let field of standard.homologationForm.fields">
                    {{ field.name }}
                </th>
                <th style="width: 35px;">
                    Start of homol.
                </th>
                <th style="width: 35px;">
                    End of homol.<sup>(1)</sup>
                </th>
                <th style="width: 55px;" *ngIf="standard.technicalList.validity">
                    Product valid until<sup>(2)</sup>
                </th>
            </thead>

            <tbody>
                <ng-container *ngFor="let homologation of getHomologationsPart(homologations, part)">
                    <tr [ngClass]="{
                            'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
                            'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
                        }"
                    >
                        <td style="width: 50px;"
                            [rowSpan]="homologation.helmetRequests.length + homologation.extensionRequests.length + 1"
                        >
                            {{ homologation.homologationNumber }}
                            <sup *ngIf="homologation.withdrawType !== null">(3)</sup>
                        </td>
                        <td [rowSpan]="
                            homologation.helmetRequests.length +
                            homologation.extensionRequests.length + 1
                        ">{{ homologation.brand }}</td>
                        <td [rowSpan]="
                            homologation.helmetRequests.length +
                            homologation.extensionRequests.length + 1
                        ">
                            <span>{{ homologation.initialRequest.modelName }}</span>
                            <span *ngFor="let request of homologation.changeOfNameRequests">
                                <br />
                                {{ request.modelName }}
                            </span>
                        </td>

                        <td *ngFor="let field of standard.homologationForm.fields">
                            {{ getCustomFieldValue(homologation.customFields, field.name) }}
                        </td>

                        <td style="width: 35px;">
                            {{ homologation.startDate | appTechnicalDate }}
                        </td>

                        <td style="width: 35px;" 
                            [rowSpan]="homologation.extensionRequests.length + 1"
                        >
                            {{ homologation.endDate | appTechnicalDate }}
                        </td>

                        <td style="width: 55px;"
                            *ngIf="standard.technicalList.validity && standard.technicalList.validityDuration"
                            [rowSpan]="homologation.extensionRequests.length + 1"
                        >{{ homologation.endDate.getFullYear() + standard.technicalList.validityDuration }}</td>

                    </tr>

                    <!--tr *ngFor="let request of homologation.extensionRequests"
                        [ngClass]="{
                            'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
                            'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
                        }"
                    >
                        <td *ngFor="let field of standard.homologationForm.fields">
                            {{ getCustomFieldValue(request.customFields, field.name) }}
                        </td>
                        <td style="border-right: none;">{{ request.homologationStartDate | appTechnicalDate }}</td>
                    </tr-->

                    <tr *ngFor="let request of homologation.helmetRequests"
                        [ngClass]="{
                            'row-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.TotalWithdraw),
                            'row-partial-withdraw': (homologation.withdrawType !== null && homologation.withdrawType.code === withdrawTypesEnum.PartialWithdraw)
                        }"
                    >
                        <!--td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td>
                        <td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td>
                        <td *ngIf="homologation.homologationNumber === 'PH.003.15-O'"></td-->
                        <td *ngFor="let field of standard.homologationForm.fields">
                            {{ getCustomFieldValue(request.customFields, field.name) }}
                        </td>
                        <td>{{ request.homologationStartDate | appTechnicalDate }}</td>
                        <td>{{ request.homologationEndDate | appTechnicalDate }}</td>
                        <td *ngIf="standard.technicalList.validity">{{ request.homologationEndDate.getFullYear() + 10 }}</td>
                    </tr>
                </ng-container>
            </tbody>
        </table>
    </ng-container>

    <div class="warning-title page-break">
        {{ standard.technicalList.englishWarning }}
    </div>

    <p *ngIf="warnings.length === 0">
        There are no warnings for this product
    </p>
    <div class="warning-div" *ngFor="let warning of warnings">
        <div [innerHtml]="warning"></div>
    </div>
</kendo-pdf-export>

And the css code

.table-contents {
    text-transform: uppercase;
    border-collapse: collapse;
    font-size: 8px;
    width: 100%;
    border-spacing: 0 calc(1rem + 2px);
    padding-bottom: 2px;


    page-break-inside: avoid;


    th {
        background-color: #CCC;
        border:1px solid black;
        border-right: none;
        padding:5px;
        text-align: center;
        page-break-inside:avoid;


        &:last-child {
          border-right: 1px solid black;
        }
    }


    tr {

        page-break-inside:avoid;
        //transform: scale(1);
    }

    td {
        border:1px solid #000000;
        border-top: none;
        border-right: none;
        text-align: center;
        padding: 2px;
        page-break-inside:avoid;


        &:last-child {
            border-right: 1px solid black;
        }
    }
}

Thanks for you help !

Regards,

PDF Export

asked on 28 Jun 2023

1 answer

156 views

Buttons in the editor's toolbar behave incorrectly

Hello, I’ve encountered an issue with Editor. After updating the main @progress dependencies to 11.6.0 along with @progress/kendo-theme-bootstrap and @progress/kendo-theme-default to 6.2.0, the buttons in the editor's toolbar started behaving incorrectly. However, I'm not able to reproduce this issue on examples of the Kendo Editor in Stackblitz.

Upon loading the page with the editor, the Clear button is displayed as active until the editor is clicked on (even though the class with disabled styles should be attached to the button immediately). Additionally, when clicking on the B button or any other button, the k-selected class is not added, but ng-reflect-selected becomes "true". However, clicking on another button in the toolbar results in the class being added and the button being recolored.

Please find the screen recording with the issue attached.

Could you please advise me on what might be causing this issue?

Editor

answered on 27 Jun 2023