or
1 answer
96 views
Hello
Using Kendo Grid for Angular
I have a weid behaviour where the last right filter popup menu will push to hole page to the left, because of its fixed positioning :
Here is the view while no filter is opened :
What can fix that ? Does the kendo grid have the hability to keep its popup items into its area ?
Thanks in advance
Using Kendo Grid for Angular
I have a weid behaviour where the last right filter popup menu will push to hole page to the left, because of its fixed positioning :
Here is the view while no filter is opened :
What can fix that ? Does the kendo grid have the hability to keep its popup items into its area ?
Thanks in advance
0 answers
43 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
97 views
In my project I have many tooltips for displaying different things. But I want to change the CSS properties of one tooltip in particular which will not affect the other tooltips. How to do it ,the method mentioned in the document doesn't seem to work.
<div kendoTooltip tooltipClass="my-class">
.my-class *{
color:black;
}
0 answers
199 views
I'm working with my first instantiation of a light / dark theme and to do this I'm using css variables.
An example of what I mean:
input::placeholder {
color: var(--input-placeholder);
}
What I'm noticing however for the items in a dropdown list is that if I use css variables I'll only see the initial set color (I just tested this with kelly green as the default) but if the variable switches the dropdown background and text colors will not update. An example of the css that I have in my all.css file:
.k-list-item {
color: var(--input_color);
background-color: var(--k_input_background2);
}
I just tried setting the program to dark mode and then creating the component and dropdowns after that's already selected - I still get the initial / default value not the actual. To clarify I'm setting other kendo css with this such as the grids, input backgrounds and text color, all of it's working fine - this is the only place it seems to be failing.
Let me know if this sounds familiar and if so what recommendations you have to work around this issue.
An example of what I mean:
input::placeholder {
color: var(--input-placeholder);
}
What I'm noticing however for the items in a dropdown list is that if I use css variables I'll only see the initial set color (I just tested this with kelly green as the default) but if the variable switches the dropdown background and text colors will not update. An example of the css that I have in my all.css file:
.k-list-item {
color: var(--input_color);
background-color: var(--k_input_background2);
}
I just tried setting the program to dark mode and then creating the component and dropdowns after that's already selected - I still get the initial / default value not the actual. To clarify I'm setting other kendo css with this such as the grids, input backgrounds and text color, all of it's working fine - this is the only place it seems to be failing.
Let me know if this sounds familiar and if so what recommendations you have to work around this issue.
1 answer
1.4K+ views
The calendar popup is not getting closed even after selecting the date or clicking outside.
This is how I have integrated data picker in my component.
<kendo-datepicker *ngIf="formControl.allowEditing && !disabled && active" placeholder="mm/dd/yyyy"
[formControlName] = "controlName" [min]="minDate" [max]="maxDate" [disabledDates]="disableDates" >
</kendo-datepicker>
Hetali
Telerik team
answered
on
05 Sep 2023
1 answer
106 views
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
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
Yanmario
Telerik team
answered
on
20 Jun 2023
0 answers
63 views
I'm trying to add Kendo-grid with kendo-popup but am not ably and based on cell click popup will appear
Tamilvanan
Top achievements
Rank 1
Rank 1
updated question
on
21 Feb 2023
1 answer
169 views
Hi,
I have a kendo-dropdownlist and I want to override the style of the kendo-popup. I want to change the font as well as change the style for the selected item (see attached file) like the background color, etc...
How do I go about doing this? I've tried styling using pseudo ::ng-deep, :host ::ng-deep to using the classes .k-popup, the li's .k-list-item, etc..
Thanks!
Jaime
Hetali
Telerik team
answered
on
15 Feb 2023
0 answers
75 views
After the latest version upgrade popup component doesn't work correctly - it doesn't update on data changes
2 answers
3.0K+ views
Hi Team,
I attached my project with this question.
Can you look at the problem of anchor giving the error "Property 'nativeElement' is missing in type 'HTMLButtonElement' but required in type 'ElementRef<any>'"
StockBlitz also working fine. Only one doubt is Angular CLI version.
I'm using Angular CLI v12
Can you check the attached project and solve the issue!
<div class="example-config">
<button #anchor (click)="onToggle()" class="k-button">
{{ toggleText }} Popup
</button>
</div>
<kendo-popup [anchor]="anchor" (anchorViewportLeave)="show = false" *ngIf="show">
<div class="content">
<!-- User-defined content -->
Popup content.
</div>
</kendo-popup>
Regards,
Srinivas M.P.
