Questions on Kendo UI for Angular Forum

0 answers

46 views

How can search using API and select data with autocomplete

I need to search and then select value. Trying to use autocomplete component. The issue is there are 2 values: one is a query and the other is a selected value. Unable to combine them.

Need a guideline.

AutoComplete

asked on 23 Oct 2024

1 answer

67 views

localization error in unit testing

Hi team,

I'm very sorry to bother you again. I tried all the methods you provided, but the error still exists. I will now describe the error to you in more detail.

The following is a picture of unit test error information.

I tried to understand the error message, and it seems to be related to the language setting initialization of the datepicker component.

In the datepicker component, I have implemented the language switching function. Here is the relevant code for the language switching.

In the app.config.ts file, I globally set and imported the corresponding language pack.

I tried to introduce CldrIntlService in the unittest file, but it still gave the same error.

Thank you for your help!

DatePicker

answered on 22 Oct 2024

1 answer

71 views

AppBar with dropdown menu

I need to create a dropdown menu on the Appbar. how can I do that? I used <kendo-menu-item>, but it doesn't align with other items in the appbar-section

AppBar

answered on 22 Oct 2024

2 answers

122 views

Kendo-Splitter: how to rearrange pane sizes after browser resize and to keep separate scroll bars

Hi,

I have a kendo-splitter with two horizontal panes with large content. After page loading, when I resize the browser (half the width), the behaviour is as expected: each pane gets its own horizontal scrollbar.
However, if once resized by the splitter bar, the pane width is not longer adjusted after browser resize events. Instead, the page shows a single scrollbar for the whole splitter.

I understood from a similar JQuery thread (https://docs.telerik.com/kendo-ui/knowledge-base/keep-pane-size-in-percentages), that this is expected and that I have to rearrange the pane sizes programatically.

Is there more recent angular sample code for this approach, our could someone kindly layout the most effective way (avoid flickering etc.)?

As an additional question : How do I achieve separate vertical scrollbars for the panes? The pane contents have different size. When changing the height of the browser window, I get one vertical scrollbar for the whole splitter. However I would prefer separate vertical scrollbars for the panes.

My sample component code is placed below, toghether with two screenshots of wanted / unwanted rendering.

Thank you!

import {Component} from '@angular/core';
import {SplitterComponent, SplitterPaneComponent} from '@progress/kendo-angular-layout';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [SplitterComponent, SplitterPaneComponent],
  template:
    `
      <div class="container" kendoWindowContainer>
        <main>
          <kendo-splitter style="height: 100%">
            <kendo-splitter-pane [collapsible]="true">
              <div class="pane-content" style="height: 500px">
                <h3>Inner splitter / left pane</h3>
                <p>Resizable and collapsible.</p>
              </div>
            </kendo-splitter-pane>

            <kendo-splitter-pane>
              <div class="pane-content" style="height: 700px">
                <h3>Inner splitter / center pane</h3>
                <p>Resizable only.</p>
              </div>
            </kendo-splitter-pane>

          </kendo-splitter>
        </main>
      </div>
    `,
  styles: `
    .pane-content {
      padding: 0 10px;
      border: black 1px solid;
      width: 600px;
    }

    h3 {
      font-size: 1.2em;
      margin: 10px 0;
      padding: 0;
    }

    p {
      margin: 0;
      padding: 0;
    }
  `
})
export class AppComponent {
  title = 'test-kendo-splitter';
}

Splitter

answered on 21 Oct 2024

0 answers

97 views

How to always show scroll bar on scheduler timeline wiew

hi, I want the scroll bar to always be visible. It appears when I start scrolling, but I want it to always be visible.
so #scheduler .k-scheduler-content {
overflow-y: scroll;
} this isn't working

please give some exaple on schedule timeline view

Scheduler

ScrollView

Timeline

updated question on 20 Oct 2024

0 answers

39 views

how to change the highlight color for the kendoMenuItemTemplate

I have the below componet and i am trying to change the highlight color for the popup menu list:

import { Component, input, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenusModule } from '@progress/kendo-angular-menu';
import { ICON_SETTINGS, SVGIcon } from '@progress/kendo-angular-icons';

@Component({
  selector: 'mnp-menu-item',
  standalone: true,
  imports: [CommonModule, MenusModule],
  providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font', size: 'medium' } }],
  template: `
     <link
      rel="stylesheet"
      href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
    />

    <kendo-menu [items]="items"
    >
      <ng-template kendoMenuItemTemplate let-item="item" >
        <span  class='item'>
        <span class="icon-container">
          <ng-container *ngIf="item.icon; else noIcon">
            <span [ngClass]="item.icon" class="k-icon"></span>
          </ng-container>
          <ng-template #noIcon>
            <span class="k-icon empty-icon"></span>
          </ng-template>
        </span>
        {{ item.text }}
        </span>
      </ng-template>
    </kendo-menu>
  `,
    styleUrl: './menu-item.component.scss',
    

})
export class MenuItemComponent {
  @Input() items: MenuItem[] = [];
  @Input() vertical: boolean = false;

}

interface MenuItem {
  text?: string;
  url?: string;
  icon?: string;  // Dynamic icon field
  disabled?: boolean;
  separator?: boolean;
  svgIcon?: SVGIcon;
  cssClass?: string;
  items?: MenuItem[];
}

Menu

Popup

asked on 18 Oct 2024

0 answers

90 views

How to change the highlight color for the kendo menu item with kendoMenuItemTemplate

please can I get a help, I am trying to change the highlight color for the menu item for the below component

import { Component, input, Input } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MenusModule } from '@progress/kendo-angular-menu';
import { ICON_SETTINGS, SVGIcon } from '@progress/kendo-angular-icons';

@Component({
  selector: 'mnp-menu-item',
  standalone: true,
  imports: [CommonModule, MenusModule],
  providers: [{ provide: ICON_SETTINGS, useValue: { type: 'font', size: 'medium' } }],
  template: `
     <link
      rel="stylesheet"
      href="https://unpkg.com/@progress/kendo-font-icons/dist/index.css"
    />

    <kendo-menu [items]="items"
    >
      <ng-template kendoMenuItemTemplate let-item="item" >
        <span  class='item'>
        <span class="icon-container">
          <ng-container *ngIf="item.icon; else noIcon">
            <span [ngClass]="item.icon" class="k-icon"></span>
          </ng-container>
          <ng-template #noIcon>
            <span class="k-icon empty-icon"></span>
          </ng-template>
        </span>
        {{ item.text }}
        </span>
      </ng-template>
    </kendo-menu>
  `,
    styleUrl: './menu-item.component.scss',
    

})
export class MenuItemComponent {
  @Input() items: MenuItem[] = [];
  @Input() vertical: boolean = false;

}

interface MenuItem {
  text?: string;
  url?: string;
  icon?: string;  // Dynamic icon field
  disabled?: boolean;
  separator?: boolean;
  svgIcon?: SVGIcon;
  cssClass?: string;
  items?: MenuItem[];
}

I have tried to use the cssClass approach but it is not working

Menu

updated question on 18 Oct 2024

1 answer

124 views

Angular Kendo Editor Bug

There is a bug in the Angular Kendo Editor, whereby it treats any semicolon in the style attribute as a CSS property delimiter. However, not all semicolons are CSS property delimiters, as I will show in an example below.

Version: "@progress/kendo-angular-editor": "16.8.0".

Set the value property of <kendo-editor> to the below value:

<p  style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo)"> </p>

Note the semicolon in the URL parameter between svg+xml and base64.

When you load the editor, you will get the following error:

TypeError: Cannot read properties of undefined (reading 'trim')
    at http://localhost:9090/dev-build/vendor.js:81983:45
    at Array.forEach (<anonymous>)
    at applyStyle (http://localhost:9090/dev-build/vendor.js:81981:98)
    at http://localhost:9090/dev-build/vendor.js:81989:5
    at Array.forEach (<anonymous>)
    at restoreStyleAttr (http://localhost:9090/dev-build/vendor.js:81986:65)
    at htmlToFragment (http://localhost:9090/dev-build/vendor.js:82001:3)
    at parseContent (http://localhost:9090/dev-build/vendor.js:82041:15)
    at EditorComponent.initialize (http://localhost:9090/dev-build/vendor.js:324747:100)
    at Object.next (http://localhost:9090/dev-build/vendor.js:324378:155)

The error seems to be occurring in the file

./node_modules/@progress/kendo-drawing/dist/es2015/svg/utils/render-svg.js

Below is the problematic code. It assumes that any semicolon is a CSS property delimiter, but this is not true, as in the example above,

where the semicolon is part of the CSS value.

const applyStyle = (styleString, element) => styleString.split(';').filter(s => s !== '').forEach(s => {
  const parts = s.split(':');
  element.style[parts[0].trim()] = parts[1].trim();
});

The code is crashing on line 3 above, as there is no 1st element of the parts array.

Editor

updated answer on 18 Oct 2024

0 answers

86 views

Angular 10 Kendo Grid Causing "Class constructor vA cannot be invoked without 'new'" Error

I'm in the process of upgrading an Angular application from version 8 to 10. After the upgrade, I'm encountering the following error while using Kendo Grid in my Angular application,

vendor.4add67dadae0cd9152b9.js:16 ERROR Error: Uncaught (in promise): TypeError: Class constructor vA cannot be invoked without 'new'
TypeError: Class constructor vA cannot be invoked without 'new'
    at new t (index.js:2890:28)
    at new e (index.js:6780:28)
    at Sg (core.js:23695:20)
    at _g (core.js:23564:22)
    at mk (core.js:30653:38)
    at Dk (core.js:30969:13)
    at Ck (core.js:30888:13)
    at mk (core.js:30681:5)
    at Dk (core.js:30969:13)
    at Ck (core.js:30888:13)

Here's the relevant code:

queue-grid.component.ts:

import { Component, OnInit, OnDestroy, Input, Inject } from "@angular/core";
import { ActivatedRoute, Router } from '@angular/router';
import { GridDataResult } from '@progress/kendo-angular-grid';
import { SortDescriptor } from '@progress/kendo-data-query';
import { Subscription } from "rxjs/Subscription"
import * as _ from 'lodash';



@Component({
    selector: "queue-grid",
    moduleId: module.id.toString(),
    templateUrl: "./queue-grid.component.html",
    providers: [
        { provide: Window, useValue: window }
    ]
})
export class QueueGridComponent implements OnInit, OnDestroy {
    // ... component properties
    public isLoading: boolean = true; 

    constructor() {
        console.log("Queue Component Constructor");
        this.fetchData();
        console.log("constructor end");
    }

    ngOnInit() {
        console.log("Queue Component oninit ");
        console.log("Component oninit end");
    }

    fetchData() {

        setTimeout(() => {
            this.QueueListData = {
                data: [
                    { reference: "12345", state: "CA", dueDate: "10/20/2024" },
                    { reference: "67890", state: "NY", dueDate: "10/25/2024" },
                    { reference: "54321", state: "TX", dueDate: "10/30/2024" }
                ],
                total: 3
            };
            this.isLoading = false; 
        }, 2000); 
    }

    ngOnDestroy(): void {
    }
}

Relevant parts of queue-grid.component.html:

 <div id="dvListData">
    <kendo-grid [data]="QueueListData?.data">
    <kendo-grid-column field="reference" title="Reference #"> </kendo-grid-column>
    <kendo-grid-column field="state" title="State"> </kendo-grid-column>
    <kendo-grid-column field="dueDate" title="Due Date"> </kendo-grid-column>
    </kendo-grid> 
</div>

Relevant parts of Module

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { GridModule } from '@progress/kendo-angular-grid'; 
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';



@NgModule({
    imports: [
       
        GridModule ,BrowserAnimationsModule
    ],
    declarations: [
        QueueGridComponent
    ]
})
export class QueueGridModule { }

package.json:

"@angular/animations": "^10.2.2",
"@angular/common": "^10.2.2",
"@angular/compiler": "^10.2.2",
"@angular/compiler-cli": "^10.2.2",
"@angular/core": "^10.2.2",
"@angular/forms": "^10.2.2",
"@angular/platform-browser": "^10.2.2",
"@angular/platform-browser-dynamic": "^10.2.2",
"@angular/platform-server": "^10.2.2",
"@angular/router": "^10.2.2",
"@angular/upgrade": "^10.2.2",
"@ng-bootstrap/ng-bootstrap": "^8.0.0",
"@progress/kendo-angular-buttons": "^5.0.0",
"@progress/kendo-angular-common": "^1.0.0",
"@progress/kendo-angular-dateinputs": "^4.0.0",
"@progress/kendo-angular-dropdowns": "^4.0.0",
"@progress/kendo-angular-excel-export": "^3.0.0",
"@progress/kendo-angular-grid": "^4.7.3",
"@progress/kendo-angular-inputs": "^6.0.0",
"@progress/kendo-angular-intl": "^2.0.0",
"@progress/kendo-angular-l10n": "^2.0.0",
"@progress/kendo-angular-layout": "^5.1.0",
"@progress/kendo-angular-pdf-export": "^2.0.0",
"@progress/kendo-angular-popup": "^3.0.0",
"@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-date-math": "^1.3.0",
"@progress/kendo-drawing": "^1.0.0",
"@progress/kendo-file-saver": "^1.0.3",
"@progress/kendo-ooxml": "^1.0.2",
"@progress/kendo-popup-common": "^1.0.0",
"@progress/kendo-theme-default": "^3.0.0",
"@telerik/kendo-draggable": "^1.5.1",
"@telerik/kendo-dropdowns-common": "^1.0.0",
"@telerik/kendo-inputs-common": "^2.2.1",
"@telerik/kendo-intl": "^1.2.0",
"@telerik/kendo-theme-default": "^1.33.4",
"@types/file-saver": "^2.0.0",
"angular-d3-charts": "^4.4.7",
"angular-highcharts": "^10.0.1",
"angular-router-loader": "^0.8.2",
"angular-tree-component": "^8.5.5",
"angular2-template-loader": "^0.6.2",
"bootstrap": "^4.3.1",
"copy-webpack-plugin": "^4.3.1",
"core-js": "^2.6.1",
"file-saver": "^2.0.1",
"hammerjs": "^2.0.8",
"highcharts": "^9.2.2",
"highcharts-stock": "^0.1.7",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^4.0.0",
"jquery": "^3.2.1",
"jszip": "^3.2.0",
"lodash": "^4.14.172",
"mini-css-extract-plugin": "^0.1.0",
"mobx": "^4.0.1",
"moment": "^2.22.2",
"ngx-file-drop": "^11.0.0",
"ng2-input-autocomplete": "^0.3.5",
"ng2-select": "^2.0.0",
"ngx-smart-popover": "^1.0.4",
"ngx-textarea-autosize": "^2.0.0",
"ngx-toastr": "^13.0.0",
"npm": "^8.5.5",
"raw-loader": "^0.5.1",
"rxjs": "^6.5.3",
"rxjs-compat": "^6.6.7",
"style-loader": "^0.19.1",
"systemjs": "^0.19.39",
"ts-loader": "^6.0.0",
"typescript": ">=3.9.0 <4.1.0",
"zone.js": "^0.10.3"

tsconfig.json

"compilerOptions": {
  "baseUrl": "",
  "lib": [ "es2016", "dom" ],
  "downlevelIteration": true,
  "target": "es6",
  "module": "esnext",
  "noImplicitAny": false,
  "sourceMap": true,
  "preserveConstEnums": true,
  "noEmitOnError": false,
  "experimentalDecorators": true,
  "emitDecoratorMetadata": true,
  "forceConsistentCasingInFileNames": false,
  "allowSyntheticDefaultImports": true,
  "declaration": false,
  "moduleResolution": "Node"
}

I'm seeing 'constructor end' in the console, but then it throws the error that i mentioned above.

Grid

updated question on 17 Oct 2024

0 answers

42 views

How can I fix an error with Tile Layout and Bootstrap DropdownMenu

I'm working on a component using Bootstrap's dropdown functionality (ph filter form). I have a dropdown that should appear when clicking a button, but the dropdown is not appearing in the foreground as expected. I've already tried adjusting the z-index and overflow properties, but the dropdown still seems to be hidden behind other elements.
I placed this component inside the kendo-tile-item-header and still the behavior is not what I expected.

Could you please provide information on whether there are known issues or specific considerations when using Bootstrap dropdowns in Kendo Tile Layout? Any guidance or suggestions to resolve this issue would be greatly appreciated.

Best Regards.

TileLayout

asked on 16 Oct 2024