or
2 answers
214 views
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';
}
Zornitsa
Telerik team
answered
on
21 Oct 2024
0 answers
145 views
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
ikram
Top achievements
Rank 1
Iron
Rank 1
Iron
updated question
on
20 Oct 2024
0 answers
50 views
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[];
}
0 answers
131 views
please can I get a help, I am trying to change the highlight color for the menu item for the below component
I have tried to use the cssClass approach but it is not working
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[];
}
1 answer
164 views
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();
});
Yanmario
Telerik team
updated answer
on
18 Oct 2024
0 answers
122 views
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.
0 answers
51 views
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.
Pedro
Top achievements
Rank 2
Rank 2
asked
on
16 Oct 2024
0 answers
55 views
Hi,
Following this official instruction, we can use TAB key to navigate within a single grid editable cells. However the user requirement is to navigate between two grids - when navigate to the last editable cell in the grid, hitting TAB again should focus on the first editable cell in another grid, and vise versa.
We've tried to use a service (since grids are in different components) in "InCellTabDirective", when no next cell to navigate to, to raise a notification and the next grid will subscribe this notification and put first cell into edit mode with "editRow()". However this does not work as smoothly as expected. It seems the grid header always have a tabindex so will prevent to focus on a cell within, so have to press TAB twice to actually focus on the cell element. Sometimes the kendoTextBox in the first cell does not get focused but instead the cell itself. Sometimes when jumping between two grids the "jump-from" grid still in edit but loses focus, and the "jump-in" grid and two rows focused at the same time.
Is there an official approach or demo how to achieve this - navigate out of current grid to another element, or navigate into grid from outside. Thanks in advance.
Version used: @progress/kendo-angular-grid: "~16.5.0"
Randy
Top achievements
Rank 1
Rank 1
updated question
on
16 Oct 2024
0 answers
65 views
Hi.
I'm exploring the possibilities of implementing hierarchical grids in Kendo UI for Angular and would like to know if it is possible to create grids with an infinite (or unpredictable) number of levels, each having heterogeneous structures.
Specifically, the requirement would involve different structures at each level (i.e., different columns and data types), and the number of nested levels is not known in advance.
Is there a way to dynamically handle these scenarios within the Kendo UI for Angular grid component?
I would appreciate any insights, examples, or suggestions on how to approach this.
Regards.
0 answers
100 views
I've got a use case where the number of steps in a vertically oriented stepper are dynamic.
If the number of steps is decently high (like, above 10) and the current step is also high, reducing the number of steps to a small value causes a very long and weird looking animation of the progress bar.
Here is a stackblitz demonstrating the issue
Turning off animations or reducing the time would mitigate this problem, but I think the animations are nice to have, especially when progressing through the stepper in a more traditional fashion.
Lucio
Top achievements
Rank 1
Rank 1
updated question
on
09 Oct 2024
