Questions on Kendo UI for Angular Forum

0 answers

1.1K+ 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

252 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

94 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

249 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

103 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

104 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

0 answers

236 views

Scheduler Dynamic Slot Height

Hi,

I've set up a scheduler using the new multi-week-view for multiple resources where I display only 1 week. And I have grouped these vertically by resource.

However I'd like to dynamically set the height of the slots, to fit all the events of a resource. And also do this for the group headers. So they match their row.

Switching to a different view to show all the event of a day isn't wanted as there are a lot of groups.

What would be the best way to do this?

General Discussions

Scheduler

asked on 26 Jun 2023

0 answers

185 views

Open window as modal

Hi,

I am making a standalone component using window, and I would like to make it modal - to prevent people clicking around while this window is open.

Is there any predefined way for making the window modal, or I have to explicitly use dialog for this?

Thank you

Regards,

Vedad

Window

asked on 23 Jun 2023

2 answers

682 views

can you set a limit on number of files the user can select ?

Hi , I am using the uploader but I want to limit the number of files that the user can select , the uploader is set to manual uploading and user can select multiple files , so if the user select 7 files and the MaxFileLimit is set to 5, I want to add 5 files to the list and removed the rest .

 <kendo-upload 
                    [saveUrl]="uploadUrl" 
                    [autoUpload]="false" 
                    [actionsLayout]="actionsLayout"
                    [restrictions]="imageRestrictions" 
                    (select)="select($event)"
                    (remove)="remove($event)" 
                    (clear)="clear()"
                    (upload)="uploadEventHandler($event)"
                    (complete)="complete()">
                        <ng-template kendoUploadFileInfoTemplate let-file>
                            <div><img [src]="findPreview(file)" style="height: 50px;"> Name: {{file[0].name}} </div>
                            <div *ngIf="file[0].validationErrors">You cannot upload this file :: {{file[0].validationErrors[0]}}</div>
                          </ng-template>
                    </kendo-upload>

I have tried using the Select Event to remove the file using e.preventDefault(); but it does stop the process and not files are added to the list if the users select more than 5 files .

 publicselect(e: SelectEvent): void {
        const that = this;

        e.files.forEach((file) => {

            if (file.extension === '.jpg') {
                if (this.imageCount < this.maxImageCount) {

                    this.imageCount++

                    if (!file.validationErrors) {
                        const reader = newFileReader();

                        reader.onload = function (ev) {
                            const image = {
                                src: ev.target["result"],
                                uid: file.uid,
                            };

                            that.imagePreviews.unshift(image);
                        };
                        reader.readAsDataURL(file.rawFile);
                    }
                }else {
                     e.preventDefault();

                }
            }

        });
    }

Any ideas on how to remove the extra files or limit the number of files the user can select .

Thanks

Upload

answered on 20 Jun 2023

1 answer

125 views

Can the kendo grid cell dropdown top position be changed

Hi
I have a dashboard with a grid and space is rather tight, and the user wants to see a long list of items, without covering up other parts of the grid.
Is It possible from my sample below

https://stackblitz.com/edit/angular-kggzs9?file=src%2Fapp%2Fapp.component.ts

To always have the kendo-dropdownlist popup always open just below the column header, no matter which row is being edited ?

Here's a sketch of what I'm looking for .. I want the popup to always open right below Product Name. For PopupSettings there appears to be no "Top" attribute to accomplish this position change.

Using chrome dev tools, I can modify the Top attribute to 0 to achieve the desired result.

Thanks

DropDownList

Grid

Popup

answered on 20 Jun 2023