Questions on Kendo UI for Angular Forum

0 answers

107 views

Custom DateInput Component Issue: Calendar Not Displaying in when using date range

I am experiencing an issue with the Kendo DateRange functionality in my Angular project. I am dynamically assigning the kendodaterangestartinput and kendodaterangeendinput attributes using a directive. While the attributes are correctly applied to the <kendo-dateinput> elements (verified in the DOM), the calendar is not showing when interacting with the input fields.

Here’s the directive I am using to dynamically assign the attributes

import { Directive, Input, Renderer2, ElementRef, OnInit } from '@angular/core';

@Directive({
  selector: '[dynamicDateRange]',
  standalone: true
})
export class DynamicDateRangeDirective implements OnInit {
  @Input() dynamicDateRange: 'start' | 'end' | null = null;

  constructor(private renderer: Renderer2, private el: ElementRef) {}

  ngOnInit(): void {
    if (this.dynamicDateRange === 'start') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangestartinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    } else if (this.dynamicDateRange === 'end') {
      this.renderer.setAttribute(this.el.nativeElement, 'kendodaterangeendinput', '');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
    } else {
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangestartinput');
      this.renderer.removeAttribute(this.el.nativeElement, 'kendodaterangeendinput');
    }
  }
}

Here’s how I wrote the story component

<kendo-formfield [showHints]="showHints" [showErrors]="showErrors" [orientation]="orientation">
  <kendo-label [text]="label" [for]="dateinput" [hidden]="!showLabel"></kendo-label>
  <kendo-dateinput
    #dateinput
    [formControl]="control"
    [allowCaretMode]="allowCaretMode!"
    [autoCorrectParts]="autoCorrectParts"
    [autoFill]="autoFill"
    [autoSwitchKeys]="autoSwitchKeys"
    [autoSwitchParts]="autoSwitchParts"
    [clearButton]="clearButton"
    [disabled]="disabled"
    [enableMouseWheel]="enableMouseWheel"
    [fillMode]="fillMode"
    [format]="format"
    [formatPlaceholder]="formatPlaceholder"
    [incompleteDateValidation]="incompleteDateValidation"
    [inputAttributes]="inputAttributes!"
    [max]="max"
    [min]="min"
    [placeholder]="placeholder"
    [rangeValidation]="rangeValidation"
    [readonly]="readonly"
    [rounded]="rounded"
    [size]="size"
    [steps]="steps"
    [tabindex]="tabindex"
    [dynamicDateRange]="dateRangeType"
    [title]="title"
    [twoDigitYearMax]="twoDigitYearMax"
    [value]="value"
    (blur)="blur.emit($event)"
    (valueChange)="valueChange.emit($event)"
    (focus)="focus.emit($event)">
  </kendo-dateinput>
  <kendo-formhint [align]="hintAlign">
    <ng-content select="[hint]"></ng-content>
  </kendo-formhint>
  <kendo-formerror [align]="errorAlign">
    <ng-content select="[error]"></ng-content>
  </kendo-formerror>
</kendo-formfield>

Here’s how I use it in the template:

<kendo-daterange id="feed-filter-date-range" class="k-mt-4 k-justify-content-between">
  <mnp-date-input 
    label="start" 
    [dynamicDateRange]="'start'" 
    [control]="fromDate">
  </mnp-date-input>
  <div>
    <kendo-formfield>
      <mnp-label text="End" class="k-d-flex k-flex-col"></mnp-label>
      <kendo-dateinput 
        formControlName="toDate" 
        kendodaterangeendinput>
      </kendo-dateinput>
    </kendo-formfield>
  </div>
</kendo-daterange>

Despite the attributes being added dynamically, the calendar does not appear when interacting with the kendodaterangestartinput or kendodaterangeendinput fields. However, when I used the <kendo-dateinput> directly the attributes directly in the template, the calendar works as expected.

<kendo-daterange>
  <kendo-dateinput 
    formControlName="fromDate" 
    kendodaterangestartinput>
  </kendo-dateinput>
  <kendo-dateinput 
    formControlName="toDate" 
    kendodaterangeendinput>
  </kendo-dateinput>
</kendo-daterange>

DateInput

DateRange

asked on 18 Nov 2024

1 answer

291 views

Kendo Grid Column fixed width

There is a kendo grid with 8 columns. The width param is set to all columns.
I would like to have one column always be mentioned value. and never receive distributed portion.

More Details:

From Official documentation at https://www.telerik.com/kendo-angular-ui/components/grid/columns/width we know that

When all column widths are explicitly set and the cumulative column width is less than the available Grid width, the remaining width is distributed evenly between all columns

At my use case, in about 50 grids, there are same "Date" columns (YYYY-MM-DD formatted). So when it will be "perfect" that the columns be always same value and do not become "wider" for case when cumulative column width is less than the available Grid width.

Is it possible?

General Discussions

Grid

answered on 15 Nov 2024

0 answers

111 views

KendoGrid removing an item

I use a kendo-grid component that has a dynamic list,. When I press Add it adds a new row and each row can be removed from the list. My problem is when I remove an item, it always removes the last row from UI. I saw that the values are correct, only the UI is the problem because it removes the last element from the list and it keeps visible the one I selected to remove.

After some debugging, I saw that it is because of the filteredPermission list that updates at every changes but I do not know how to fix th problem.

Thank you!

  <kendo-grid [data]="rowsPermissionsArray.controls">
        <kendo-grid-column field="id" title="{{ resourceCodes.permissions | translate }}">
          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <kendo-formfield>
              <app-crm-single-dropdown
                class="dl-with-remove-btn"
                [data]="filteredPermissions"
                [formControl]="dataItem.get('id')"></app-crm-single-dropdown>
            </kendo-formfield>
            <ng-container
              *ngFor="let error of form.get('rowsPermissions')?.get(rowIndex.toString())?.get('id')?.errors | keyvalue">
              <kendo-formerror
                *ngIf="
                  error.key === 'required' || error.key === 'duplicatePermission'
                    ? form.get('rowsPermissions')?.get(rowIndex.toString())?.get('id')?.touched
                    : true
                "
                >{{ error.value }}</kendo-formerror
              >
            </ng-container>
          </ng-template>
        </kendo-grid-column>
        <kendo-grid-column [width]="130" title="{{ resourceCodes.actions | translate }}" class="column-action-buttons">
          <ng-template kendoGridCellTemplate let-dataItem let-rowIndex="rowIndex">
            <button class="button-grid-action" (click)="showDeleteConfirmationPermissionModal(rowIndex)">
              <icon-delete class="icon"></icon-delete>
            </button>
          </ng-template>
</kendo-grid-column>
 get rowsPermissionsArray() {
    return this.form.get('rowsPermissions') as FormArray;
  }
 
  confirmPermissionDeletion = (): void => {
    this.rowsPermissionsArray.removeAt(this.selectedPermissionId);
    this.showConfirmationPermissionModal = false;
  };
  showDeleteConfirmationPermissionModal(id: number) {
    this.selectedPermissionId = id;
    this.showConfirmationPermissionModal = true;
  }
  onCloseConfirmationPermissionModal(): void {
    this.showConfirmationPermissionModal = false;
  }
 
  setupPermissions() {
    this.form.get('rowsPermissions')?.valueChanges.subscribe((selectedValues: any[]) => {
      this.filteredPermissions = this.platformPermissions.filter(
        permission => !selectedValues.some(selected => selected.id === permission.id)
      );
    });
  }
</kendo-grid>

Grid

GridLayout

updated question on 13 Nov 2024

2 answers

175 views

how to apply bootstrap table style to grid component

hi,

can you please tell me how to apply bootstrap table style,i.e table-primary,table-secondary...,please see the below：

<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
 
the grid i am using  is descripted as below web page:
https://www.telerik.com/kendo-angular-ui/components/grid
 
thank you.
david

Grid

answered on 13 Nov 2024

1 answer

67 views

Kendo Loader Issue - Loader Impacting Textbox used for Password does not work as intended

Once Kendo loader is shown and hidden, it resets the textbox type from password to text.
Can I get a solution to it.

As I need the kendoTextBoxPrefixTemplate and cant use the kendoTextBox API inside <input/> to use a [type] variable and
control the textBox type

Here is the sample code:

import { Component, AfterViewInit, OnInit, ViewChild } from'@angular/core';

import {
  LoaderType,
  LoaderThemeColor,
  LoaderSize,
} from '@progress/kendo-angular-indicators';
import { FormControl, FormGroup, Validators } from '@angular/forms';
import { TextBoxComponent } from '@progress/kendo-angular-inputs';
@Component({
  selector: 'my-app',
  template: `
<div class="login-page--main-container">
  <kendo-card class="login-page--kendo-card" *ngIf="!showLoader">
    <div class="login-page--form-container">
      <form [formGroup]="loginForm" class="login-page--login-form" (ngSubmit)="onSubmit()">
        <div class="login-page--formfield">
          <div class="login-page--formfield-user">
            <kendo-formfield>
              <kendo-textbox
                class="login-page--textbox"
                formControlName="username"
                #username
                required
                placeholder="Username">
                <ng-template kendoTextBoxPrefixTemplate>
                  <img src="assets/content/images/login-images/profile.svg" alt="new" class="login-page--user-img" />
                </ng-template>
              </kendo-textbox>
              <kendo-formerror class="login-page-kendo-form-error">
                Username is required
              </kendo-formerror>
            </kendo-formfield>
          </div>
          <kendo-formfield>
            <kendo-textbox
              #textbox
              placeholder="Password"
              [clearButton]="true"
              class="login-page--textbox"
              formControlName="password">
              <ng-template kendoTextBoxSuffixTemplate>
                <button kendoButton look="clear" (click)="togglePasswordVisibility()"> Eye </button>
              </ng-template>
              <ng-template kendoTextBoxPrefixTemplate>
                <img src="assets/content/images/login-images/password.svg" alt="new" class="login-page--profile-img" />
              </ng-template>
            </kendo-textbox>
            <kendo-formerror class="login-page-kendo-form-error">
              Password is required
            </kendo-formerror>
          </kendo-formfield>
          <div class="login-page--forgot-div">
            <!-- Optional forgot password link -->
          </div>
        </div>
        <div>
          <button kendoButton class="login-page--signin-button" [disabled]="loginForm.invalid">
            Sign In
          </button>
        </div>
      </form>
    </div>
  </kendo-card>
  <div class="app-screen--loader" *ngIf="showLoader">
  <div class="example-item" *ngFor="let loader of loaders">
          <div class="example-item-title">{{ loader.type | titlecase }}</div>
          <div class="k-block">
            <kendo-loader
              [type]="loader.type"
              [themeColor]="loader.themeColor"
              [size]="loader.size"
            >
            </kendo-loader>
          </div>
        </div>
    <div>Signing in....</div>
  </div>
</div>
  `,
})
export class AppComponent implements AfterViewInit {
  public loginForm: FormGroup;
  public showLoader = false;
  public loaders = [
    {
      type: <LoaderType>'pulsing',
      themeColor: <LoaderThemeColor>'primary',
      size: <LoaderSize>'medium',
    },
    {
      type: <LoaderType>'infinite-spinner',
      themeColor: <LoaderThemeColor>'secondary',
      size: <LoaderSize>'medium',
    },
    {
      type: <LoaderType>'converging-spinner',
      themeColor: <LoaderThemeColor>'info',
      size: <LoaderSize>'medium',
    },
  ];
  @ViewChild('textbox') public textbox!: TextBoxComponent;
  constructor() {
    this.loginForm = new FormGroup({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required),
    });
  }
  public ngAfterViewInit(): void {
    this.textbox.input.nativeElement.type = 'password';
  }
  public togglePasswordVisibility(): void {
    const inputEl = this.textbox.input.nativeElement;
    inputEl.type = inputEl.type === 'password' ? 'text' : 'password';
  }
  public async onSubmit() {
    if (this.loginForm.valid) {
      this.showLoader = true;
      await new Promise((resolve) => setTimeout(resolve, 1000));
      this.showLoader = false;
    }
  }
}

Loader

TextBox

answered on 12 Nov 2024

1 answer

62 views

Change all the apparence of a KendoGrid on specific component

Hi, can we use directives or something similar to change the appearance of the Kendo-Grid like

<kendo-grid NewApparenceDirective [kendoGridBinding]="data()">

I need to create a reusable, very lightweight grid.

Removing the background (set it transparent), removing some borders, changing text size, and so on.

What is the way to accomplish and reuse it on a lot of our components

Thanks

Grid

answered on 08 Nov 2024

1 answer

70 views

how to change the click function of the ellipsis in kendo ui kendo-scheduler-month-view

how to change the click function of the ellipsis in kendo ui kendo-scheduler-month-view?

i need to change the click function of the ellipsis on the shown screenshot below:

<kendo-scheduler
    [resources]="[]"
    [kendoSchedulerBinding]="events"
    [(selectedViewIndex)]="schedulerView"
    [slotClass]="getSlotClass"
    [selectedDate]="selectedDate"
    [slotDivisions]="1"
    [selectable]="true"
    [isSlotSelected]="isSlotSelected"
    (slotDragStart)="onSlotDragStart($event)"
    (slotDrag)="onSlotDrag($event)">

    <kendo-scheduler-month-view [eventHeight]="18" [eventClass]="getEventClass">
      <ng-template kendoSchedulerEventTemplate let-event="event" let-resources="resources">
        <ng-template *ngTemplateOutlet="eventTemplate; context: { $implicit: event.dataItem }"></ng-template>
      </ng-template>
    </kendo-scheduler-month-view>

</kendo-scheduler>
<kendo-scheduler
    [resources]="[]"
    [kendoSchedulerBinding]="events"
    [(selectedViewIndex)]="schedulerView"
    [slotClass]="getSlotClass"
    [selectedDate]="selectedDate"
    [slotDivisions]="1"
    [selectable]="true"
    [isSlotSelected]="isSlotSelected"
    (slotDragStart)="onSlotDragStart($event)"
    (slotDrag)="onSlotDrag($event)">

    <kendo-scheduler-month-view [eventHeight]="18" [eventClass]="getEventClass">
      <ng-template kendoSchedulerEventTemplate let-event="event" let-resources="resources">
        <ng-template *ngTemplateOutlet="eventTemplate; context: { $implicit: event.dataItem }"></ng-template>
      </ng-template>
    </kendo-scheduler-month-view>

</kendo-scheduler>

Scheduler

answered on 08 Nov 2024

1 answer

104 views

Using a grid layout for k-form

Is there a built-in Kendo form class for a grid-type layout? I know that the GridLayout component is available, was hoping that there was something built-in already that would be more straightforward to implement.

Thanks

Forms

answered on 01 Nov 2024

0 answers

79 views

CTL/ Shift multiselection with large data and columns

Hello,

I'm working on a project where we have about 100 columns and rows can exceed 1000 rows.

The users want to enable CTL and shift selection but it doesn't work and I have 2 behaviors:

1- If I click quickly and simultaneously CTL and Select row it's works.

2 - If I start holding the CTL button and try to select row nothing happen and it takes long time to be selected.

can you tell me what the problem is exactly and if there is a bypass for it

Best regards

Grid

MultiSelect

asked on 01 Nov 2024

1 answer

119 views

How can I display the timeline component in reverse order?

How can I display the timeline component in reverse order? I can't find any parameter from the guide that could reverse it. https://www.telerik.com/kendo-angular-ui/components/layout/api/timelinecomponent#selector

Sortable

Timeline

answered on 31 Oct 2024