or
1 answer
97 views
I am using Kendo for my Angular app. I return 1,000 rows of data and sorting on a column becomes increasingly slow, and it freezes up my whole screen. Does anyone have an idea how I can make it faster?
Valentin
Telerik team
answered
on
29 Dec 2021
1 answer
105 views
I'm using Kendo UI for Angular.
In my project,I was following the codes exactly as same as the demo,but nothing happened when I triggered the button of 'Export to Excel'.Instead,the functionity in the Demo works.Is there any other requirement needed that document not mentioned?
Valentin
Telerik team
answered
on
29 Dec 2021
1 answer
252 views
It shows an empty chart but when I press F12 then I see the data in the chart. Is the data being bound after the UI is created of something ? It is strange. Any idea would could be causing this ?
Svet
Telerik team
answered
on
28 Dec 2021
1 answer
281 views
Hey,
I am using Kendo Angular numerictextbox.
Unlike the Vue and JQuery version, Angular version does not have "round" property.
How can I prevent rounding ? Could you please add this feature to new version ?
Best Wishes.
Svet
Telerik team
answered
on
28 Dec 2021
1 answer
469 views
Hi
Could i have an kendo-dialog completly separate from caller button with specific typescript file and specific html file ?
Regards
Yanmario
Telerik team
answered
on
27 Dec 2021
1 answer
132 views
Hi, All
I have one solution of angular project with Angular 7.2. It working fine with Nested Grid.
when upgrade solution to latest version as Angular 12.2.11 and Nested grid not able to view on pages.
I was only updated package.json that it.
Link for Reference : https://www.telerik.com/kendo-angular-ui/components/grid/master-detail/
Can any one help for this
Svet
Telerik team
answered
on
27 Dec 2021
1 answer
284 views
Is there a way to prevent the overlay drawer from closing when the user clicks in the gray overlay area and force them to click a button that fires the toggle method?
Yanmario
Telerik team
answered
on
24 Dec 2021
1 answer
136 views
After hiding 'all day' from kendo angular scheduler using below code, we are facing scroll issue. In week view when we scroll, only the view from Sun to Sat scrolls leaving Time bar fixed. And hence there is a mismatch in alignment of and timings in UI.
Can you please help us in fixing this scroll issue hiding 'all day' feature.
Please find the attached image for reference.
.hide-all-day .k-scheduler-table tr:nth-of-type(0),
.k-scheduler-times-all-day,
.k-scheduler-table.k-scheduler-header-all-day {
display: none;
}
Hetali
Telerik team
answered
on
23 Dec 2021
0 answers
104 views
I'm trying to get multiple label per item on Kendo Column chart
Desired layout looks like on the first attached image.
I was able to get only this layout
You can try this code here.
My current result look like on the second attached image.
So my question is how to display multiple labels per item like on the first picture?
My current obstacles.
- I didn't find a way to add multiple `<kendo-chart-series-item-labels>` elements. Only one will be rendered, rest will be ignored.
- I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.
I asked this question on Stack Overflow as well.
Desired layout looks like on the first attached image.
I was able to get only this layout
import { Component } from '@angular/core';
import { groupBy, GroupResult } from '@progress/kendo-data-query';
import { ValueAxisLabels } from '@progress/kendo-angular-charts';
export type TrendItem = {
clientName: string;
periodName: string;
income: number;
};
@Component({
selector: 'my-app',
template: `
<kendo-chart>
<kendo-chart-category-axis>
<kendo-chart-category-axis-item [categories]="categories">
</kendo-chart-category-axis-item>
</kendo-chart-category-axis>
<kendo-chart-value-axis>
<kendo-chart-value-axis-item [labels]="valueAxisLabels">
</kendo-chart-value-axis-item>
</kendo-chart-value-axis>
<kendo-chart-series>
<kendo-chart-series-item *ngFor="let groupedResult of groupedTrendsByPeriod" [data]="groupedResult.items" field="income" type="column">
<kendo-chart-series-item-labels [content]="labelVisual">
</kendo-chart-series-item-labels>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`,
})
export class AppComponent {
public valueAxisLabels: ValueAxisLabels = {
font: 'bold 16px Arial, sans-serif',
};
public trendItems: TrendItem[] = [
{
clientName: 'Client1',
periodName: 'Q1 2020',
income: 20,
},
{
clientName: 'Client1',
periodName: 'Q2 2020',
income: 15,
},
{
clientName: 'Client1',
periodName: 'Q3 2020',
income: 35,
},
{
clientName: 'Client1',
periodName: 'Q4 2020',
income: 40,
},
{
clientName: 'Client2',
periodName: 'Q1 2020',
income: 15,
},
{
clientName: 'Client2',
periodName: 'Q2 2020',
income: 20,
},
{
clientName: 'Client2',
periodName: 'Q3 2020',
income: 15,
},
{
clientName: 'Client2',
periodName: 'Q4 2020',
income: 30,
}
];
public categories = (groupBy(this.trendItems, [{ field: 'clientName' }]) as GroupResult[])
.map((e) => e.value);
public groupedTrendsByPeriod = groupBy(this.trendItems, [{ field: 'periodName' }]) as GroupResult[];
public labelVisual(e: { dataItem: TrendItem }) {
return `$${e.dataItem.income}\r\n${e.dataItem.periodName}`;
}
}My current result look like on the second attached image.
So my question is how to display multiple labels per item like on the first picture?
My current obstacles.
- I didn't find a way to add multiple `<kendo-chart-series-item-labels>` elements. Only one will be rendered, rest will be ignored.
- I didn't find a way to position labels below column chart. For column chart it's only possible to use "center", "insideBase", "insideEnd", "outsideEnd" options (according to API Reference) but none of them gives me desired position.
I asked this question on Stack Overflow as well.
1 answer
184 views
I have grid in angular and two buttons ones bind 5 column the other bind 2 but when i click them grid always shows 5 column.... How to fix this without using js? Is there any refresh() or rebind() function or directive?
html<button (click)="changeDataSource(1)">Data1</button> <button (click)="changeDataSource(2)">Data2</button>
<kendo-grid [data]="gridData | async" k-grid-options="sa">
</kendo-grid>component
public gridData: Observable<any[]>;
constructor(private productService: ProductService) { }
ngOnInit(): void {
this.gridData = this.productService.getProducts();
}
changeDataSource(id: number) {
console.log(id);
if (id == 1) { this.gridData =this.productService.getProducts();}
if (id == 2) { this.gridData =this.productService.getProductsAlternative() }
}
my service
getProducts(): Observable<Products[]>{ //Returns ProductID,ProductName,CategoryName,UnitPrice,UnitsInStock
return this.http.get<Products[]>(this.url)
}
getProductsAlternative(): Observable<ProductAlternative[]>{ //Returns ProductName,CategoryName
return this.http.get<ProductAlternative[]>(this.url1)
}
