As you can see in the screenshot its data source has 7 records. The "take" adjusts to the table size. Now it is 5 as I see with break points.
Optically it works fine. But there are 2 errors that do not appear in all my other Kendo Grids.
- This grid does not let me navigate to the second page (and so on).
- It says "1-7" although it actually shows only 1-5 on the first page.
What could cause that?
Hi,
I am getting following exception when I tried to open dialog in agular unit test cases
Exception:
context.js:265 ERROR Error:
Cannot attach dialog to the page.
Add an element that uses the kendoDialogContainer directive, or set the 'appendTo' property.
See https://www.telerik.com/kendo-angular-ui/components/dialogs/dialog/service/.
at DialogService.open (index.js:1171)
at EmployeeDetailsComponent.openAddressModal (employee-details.component.ts:19)
Details are below:
1- App Component:
<div class="content" role="main">
<div>
<h1> Testing Popup Model Testing: </h1> <app-employee> </app-employee>
</div>
<div kendoDialogContainer></div>
</div>
2- Employee Component:
<div class="employee">
<h2> Employee Details: </h2><app-employee-details> </app-employee-details>
</div>
3- Employee Details Component:
<div>
Ram: <button class="addButton" (click)="openAddressModal(addressDialogContent, addressDialogActions)"> Add Address </button>
</div>
<ng-template #addressDialogContent>
Enter the address: <input type="text" id="address"/>
</ng-template>
<ng-template #addressDialogActions>
<button kendoButton (click)="close()">No</button>
<button kendoButton (click)="AddAddress();" primary="true">Yes</button>
</ng-template>
4- Employee Details.ts file
export class EmployeeDetailsComponent implements OnInit {
currentDialog;
constructor(private readonly dialogService: DialogService) { }
ngOnInit(): void { }
public AddAddress() { this.close(); }
public close() { if (this.currentDialog) { this.currentDialog.close(); }
}
openAddressModal(contentTemplate: TemplateRef<any>, actionsTemplate: TemplateRef<any>)
{
this.currentDialog = this.dialogService.open({
title: 'Address',
content: contentTemplate,
actions: actionsTemplate,
minWidth: 350,
minHeight: 150,
});
}
5- Employee details spec.ts file
describe('EmployeeDetailsComponent', () => {
let component: EmployeeDetailsComponent;
let fixture: ComponentFixture<EmployeeDetailsComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ EmployeeDetailsComponent ],
providers: [DialogService, DialogContainerService],
imports: [CommonModule, FormsModule]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(EmployeeDetailsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should open the the address popup model', () => {
const buttonElement = fixture.debugElement.query(By.css('.addButton'));
buttonElement.triggerEventHandler('click', null);
});
});
P.S: Note: I don’t want to add <div kendoDialogContainer></div> in employee details html file.
Please let me know if anyone need additional information, thanks for you help in advance.
We recently implemented a new color theme and right after release we realized that PDF exports from our reports (courtesy of Kendo's Grid) are exporting with white text, so they cannot be read.
Application details: Large Angular app with a C# backend, all handwritten scss except for our Kendo controls where we lean heavily on Grid and Charts, grid on our reports is @progress/kendo-angular-grid version 4.6.3, kendo-angular-pdf-export is 2.0.3 (not sure it's used; I don't see a reference, but the name made me think I should list it), Angular is 9.0.2. IDE is VS Code.
Things tried:
<
kendo-grid
#KendoGrid
[data]="gridSettings.gridView"
(...)
>
<
kendo-grid-column
field
=
"code"
title
=
"code"
>
(...)
<
ng-template
kendoGridCellTemplate let-dataItem>
<
details-component
[id]="dataItem.Id"
(onDelete)="onDelete($event)">
</
details-component
>
</
ng-template
>
(...)
</
kendo-grid
>
onDelete(deletedRowId: number): void {
this
.rows =
this
.rows.filter(r => r.id !== deletedRowId.id);
this
.loadGridResult();
}
loadGridResult(): void {
this
.gridSettings.gridView = {
data: orderBy(
this
.rows,
this
.gridSettings.sort)
.slice(
this
.gridSettings.skip,
this
.gridSettings.skip +
this
.gridSettings.pageSize),
total:
this
.rows.length
};
}
On screen the row is removed from the table and the next row is expanded (I asume this happens since the row with this index used to be expanded), but the details for the already removed row are still shown. This means that now the table shows a row with incorrect details. The shown details do not belong to this row. I don't think this should ever happen!
The attached images show what I mean. First before any button is clicked an then after clicking on Remove in the details of row 2:
If the Remove button is clicked again the page crashes as it tries to remove something that was already removed. If any row with now corrupt details is collapsed and again expanded the correct details are loaded.
It seems like the details of row 2 are incorrectly kept in memory or something. Can I do something to solve that?
Can someone explain what is going on here and why this doesn't work as I expect? What can I do to fix this?
I asked the same question on SO here but did not get any response yet. Thanks in advance..
Hi,
I want to activate to copy numerictextbox value content, when user double click and component is disabled. How can I do?
I try to add some properties to input tag, but does not work.
input {
user-select: text;
-webkit-user-drag: none;
}
https://www.telerik.com/kendo-angular-ui/components/inputs/numerictextbox/disabled-state/#toc-disabled-numerictextbox
Hi, I am using kendo tool tip to show tool tip(formatted) on hover of the kendo scheduler slot. But currently the tooltip is getting displayed on hover of the title not on the slot hover.
Code Snippet
</ng-template>
<kendo-scheduler-day-view> </kendo-scheduler-day-view>
<kendo-scheduler-week-view> </kendo-scheduler-week-view>
<kendo-scheduler-month-view> </kendo-scheduler-month-view>
<ng-template kendoSchedulerEventTemplate let-event="event" class="status" >
<div kendoTooltip
filter=".status"
[titleTemplate]="titleTemplate"
[tooltipTemplate]="template"
Hi,
I try to add resizable table to editor with css. Is there a possible with any other solutions?
Hello everyone, I hope you can help me.
I am trying to create pdf on my page with "Kendo UI for Angular PDF Export": https://www.telerik.com/kendo-angular-ui/components/pdfexport/
when I added the import "PDFExportModule" to my module:
import { PDFExportModule } from '@progress/kendo-angular-pdf-export';
NgModule({
imports: [
ReactiveFormsModule,
QuotationRoutingModule,
InputsModule,
ButtonsModule,
DropDownsModule,
CommonModule,
TranslateModule.forChild({
loader: {
provide: TranslateLoader,
useFactory: translateLoaderFactory,
deps: [HttpClient, MODULE_BASE_PATH],
},
isolate: true,
}),
MomentModule,
GridModule,
NotificationModule,
PDFExportModule,
TooltipModule,
NgxsModule.forFeature(),
],
declarations: [QuotationComponent, RequiredValidator],
exports: [QuotationComponent],
})
I get this error on the browser (image):
ERROR Error: Uncaught (in promise): Error: Unexpected token '<'
Evaluating http://localhost:4200/@progress/kendo-angular-pdf-export
Loading http://localhost:4100/quotation/bundles/quotation.umd.js?v=1599175943971
My page was working correctly before to import "PDFExportModule".
I couldn't find a way to fix this, does anyone know what might be going on?
best regards,
Configuration:
AngularCLI: 10.0.4
Node: 12.16.0
Angular: 10.0.5
----------
"@angular/common": "^10.0.5",
"@angular/core": "^10.0.5",
"@progress/kendo-angular-common": "^1.2.3",
"@progress/kendo-drawing": "^1.8.1",
"@progress/kendo-angular-pdf-export": "^2.0.4",
"rxjs": "~6.6.0",