When increasing the browser zoom level while using a kendo-splitter with two kendo-splitter-pane elements, one of the panes exceeds the boundaries of the kendo-splitter. As a result, part of the content becomes hidden.
Steps to Reproduce:
Template:
<kendo-splitter>
<kendo-splitter-pane [collapsible]="true" size="30%">
<div>
<h3>Inner splitter / left pane</h3>
<p>Resizable and collapsible.</p>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane>
<div>
<h3>Inner splitter / center pane</h3>
<p>Resizable only.</p>
</div>
</kendo-splitter-pane>
<kendo-splitter-pane [collapsible]="true" size="30%">
<div>
<h3>Inner splitter / right pane</h3>
<p>Resizable and collapsible.</p>
</div>
</kendo-splitter-pane>
</kendo-splitter>
The page numbers and total items within a pager do not appear to respect the currently loaded i18n locale. For example, there's no comma in the thousands place for the en locale. What makes me believe this is a bug is that the page input which can appear DOES have i18n applied to it so the discrepancy is clearly visible between the two.
As there's no demo with such large page numbers I've created an example as well as a screenshot:
B187rdik (forked) - StackBlitz
When dateinput format is "d/M/y" and "allowCaretMode" is enabled, users are unable to enter valid dates. Tested with dateinput and datepicker components.
https://angular-x4rvxqyp-qfq5b7mj.stackblitz.io
The user should be able to enter a full year after typing a valid single-digit day and month.
After entering a single-digit day and month, the input locks up, preventing the user from typing more than one character for the year. This prevents users from entering valid dates, making the input unusable in this scenario.
I couldn’t find an existing bug report related to this issue. Could you confirm whether this has already been reported or provide guidance on a potential fix or workaround?
Thanks
./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:19:0-75 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-progressbar' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'
./node_modules/@progress/kendo-angular-layout/fesm2022/progress-kendo-angular-layout.mjs:22:0-56 - Error: Module not found: Error: Can't resolve '@progress/kendo-angular-intl' in 'C:\LiveMRIProjects\MRI.AgoraInsightsAnywhere-Angular\node_modules\@progress\kendo-angular-layout\fesm2022'
this is the error is coming
when we add kendo thing into module.ts file
If the pane is scrolled, the dark highlight shown when grabbing the splitter is misaligned like this:
Stackblitz repro can be found here
I am using below piece of code inside <kendo-grid>. Here, I am using a dropdown and kendo excel export button inside toolbar. dropdown is in left and button is right aligned. Earlier, it was working till Kendo 18. When I upgraded to kendo 19, it stopped working.
Root Cause is kendo-dropdownlist contains an array button. When we click on button to expand dropdown, excel export button gets the focus and dropdown loses focus. When we click on dropdown button, 'k-focus' class is applied on 'excel-export'. Because of this, dropdown is not working.
Code:
<ng-template kendoGridToolbarTemplate>
<div class="toolbar-container" style="display: flex; align-items: center; gap: 16px; width: 100%;">
<!-- Dropdown Wrapper -->
<div style="flex-shrink: 0;">
<kendo-dropdownlist [data]="data"
[(ngModel)]="someField" [valuePrimitive]="true" (valueChange)="perform()"
[popupSettings]="{ appendTo: 'component' }" style="width: 175px;">
</kendo-dropdownlist>
</div>
<!-- Spacer to push button to right -->
<div style="flex-grow: 1;"></div>
<!-- Excel Export Button -->
<div style="flex-shrink: 0;">
<button type="button" kendoGridExcelCommand>Export</button>
</div>
</div>
</ng-template>
Ran this on StackBlitz
import { Component } from '@angular/core';
import {
LegendLabelsContentArgs,
SeriesClickEvent,
} from '@progress/kendo-angular-charts';
import { IntlService } from '@progress/kendo-angular-intl';
@Component({
selector: 'my-app',
template: `
<kendo-chart
(plotAreaClick)="onClick($event)"
[transitions]="false"
title="World Population by Broad Age Groups"
>
<kendo-chart-legend position="bottom"></kendo-chart-legend>
<kendo-chart-series>
<kendo-chart-series-item
type="donut"
[data]="pieData"
field="value"
categoryField="category"
explodeField="exploded"
[labels]="{ visible: true, content: labelContent }"
>
</kendo-chart-series-item>
</kendo-chart-series>
</kendo-chart>
`,
})
export class AppComponent {
public pieData: Array<{
category: string;
value: number;
exploded: boolean;
}> = [
{ category: '0-14', value: 0.2545, exploded: false },
{ category: '15-24', value: 0.1552, exploded: false },
{ category: '25-54', value: 0.4059, exploded: false },
{ category: '55-64', value: 0.0911, exploded: false },
{ category: '65+', value: 0.0933, exploded: false },
];
constructor(private intl: IntlService) {
this.labelContent = this.labelContent.bind(this);
}
public labelContent(args: LegendLabelsContentArgs): string {
return `${args.dataItem.category} years old: ${this.intl.formatNumber(
args.dataItem.value,
'p2'
)}`;
}
public onClick(event: any): void {
console.log('Click');
}
}
When the event is seriesClick, it works as expected, and if I change the type to bar, it works as expected, but when it's as shown as above, the onClick event isn't triggered.
As I have donuts/pies that might not have data in it, I needed to use plotAreaClick (which I have done for the bar charts)
Thanks,
Hello Support,
There is a feature request for this, but I see this as a bug. The Agenda view in the scheduler is advertised to work perfectly on mobile, but I would expect to see the event column one way or another. Now you can only see timeslots, which is not that useful. Can you fix it by making the event column available, maybe as part of the time as text or some other solution.
Hello.
Provide support for the "kk" format in the DateInputs components.
The directive `kendoGridColumnChooserTool` does not work correctly when having columns which are grouped. See this example: https://stackblitz.com/edit/angular-r9duqpcn?file=src%2Fapp%2Fapp.component.ts
import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import {
KENDO_GRID,
KENDO_GRID_EXCEL_EXPORT,
KENDO_GRID_PDF_EXPORT,
} from '@progress/kendo-angular-grid';
import { KENDO_TOOLBAR } from '@progress/kendo-angular-toolbar';
import { KENDO_LABELS } from '@progress/kendo-angular-label';
import { KENDO_INPUTS } from '@progress/kendo-angular-inputs';
import { KENDO_BUTTONS } from '@progress/kendo-angular-buttons';
import { Product } from './model';
import { products } from './products';
@Component({
selector: 'my-app',
standalone: true,
imports: [
FormsModule,
KENDO_GRID_EXCEL_EXPORT,
KENDO_GRID_PDF_EXPORT,
KENDO_GRID,
KENDO_BUTTONS,
KENDO_TOOLBAR,
KENDO_LABELS,
KENDO_INPUTS,
],
template: `
<kendo-grid
[kendoGridBinding]="products"
[pageSize]="5"
[pageable]="true"
[sortable]="{ mode: 'multiple' }"
[style.width.%]="gridWidth"
>
<ng-template kendoGridToolbarTemplate position="bottom">
<kendo-grid-column-chooser></kendo-grid-column-chooser>
</ng-template>
<kendo-toolbar overflow="scroll">
<kendo-toolbar-button kendoGridColumnChooserTool></kendo-toolbar-button>
</kendo-toolbar>
<kendo-grid-column-group title="TestA">
<kendo-grid-column
field="ProductName"
title="Product Name"
></kendo-grid-column>
</kendo-grid-column-group>
<kendo-grid-column-group title="TestB">
<kendo-grid-column
field="UnitPrice"
filter="numeric"
title="Price"
></kendo-grid-column>
<kendo-grid-column
field="Discontinued"
filter="boolean"
title="Discontinued"
></kendo-grid-column>
<kendo-grid-column
field="UnitsInStock"
filter="numeric"
title="Units In Stock"
></kendo-grid-column>
</kendo-grid-column-group>
</kendo-grid>
`,
styles: [
`
.example-info {
background: rgba(83, 146, 228, 0.1);
border-radius: 2px;
margin: 10px auto 10px auto;
padding: 15px;
border-left: 4px solid #5392e4;
font-size: 14px;
}
`,
],
})
export class AppComponent {
public gridWidth: number = 100;
public products: Product[] = products;
}