Telerik Forums
Kendo UI for Angular Forum
1 answer
103 views

 

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?

Martin Bechev
Telerik team
 answered on 17 Sep 2020
0 answers
1.4K+ views

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.

 

 

 

Ram
Top achievements
Rank 1
 asked on 16 Sep 2020
4 answers
368 views

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:

  1. https://www.telerik.com/kendo-angular-ui/components/pdfexport/content-styling/ indicated that viewencapsulation must be disabled to support styling of the exported content. This is probably unacceptable for us anyway, but just in case, I tried it and added `kendo-pdf-export { color: #2d313b; }` to our report grid component that calls the save method. Removing view encapsulation resulted in the wrong colors for the report itself and no change to the exported PDF file. I also tried placing the element selector in ::ng-deep instead, to no effect.
  2. I attempted adding `kendo-pdf-export { color: #2d313b; }` to a style tag on the index.html file to make sure it was present, but it wasn't helpful.
  3. I tried replacing all var(--font-color-1) in the styles for our report component with currentColor since someone had a similar issue in https://www.telerik.com/forums/chart-colors-on-pdf-export but that seemed to be specific to charts, and didn't help.
Svet
Telerik team
 answered on 16 Sep 2020
2 answers
704 views
I am using an angular-kendo-grid (version 6.14.5) in angular 10.0.3 with a kendoGridCellTemplate to show details.
<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>

The details component has a "Remove" button that is supposed to remove all details for that master row. When the button is pressed, the 'onDelete()' event is emitted back to the masterComponent and the masterComponent removes the row from it's datasource.
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..

Fuzzy
Top achievements
Rank 1
 answered on 15 Sep 2020
1 answer
97 views
Is there any way to adjust the identation of children rows in the TreeList hierarchy? I didn't find any appropriate TreeList attribute for that.
Svet
Telerik team
 answered on 15 Sep 2020
2 answers
289 views

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

nevra
Top achievements
Rank 1
 answered on 11 Sep 2020
1 answer
1.4K+ views
With TreeView I can use the selectionChange-Event to react to selection of a row. But I didn't find anything similar with TreeList. So what is the proper way to react to selection of a new row and to handle the data of this row?
Svet
Telerik team
 answered on 09 Sep 2020
1 answer
1.3K+ views

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"

Hetali
Telerik team
 answered on 09 Sep 2020
2 answers
96 views

Hi,

I try to add resizable table to editor with css. Is there a possible with any other solutions?

nevra
Top achievements
Rank 1
 answered on 08 Sep 2020
3 answers
161 views

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",

 

T. Tsonev
Telerik team
 answered on 08 Sep 2020
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Iron
Iron
Iron
Benjamin
Top achievements
Rank 3
Bronze
Iron
Veteran
Radek
Top achievements
Rank 2
Iron
Iron
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Richard
Top achievements
Rank 4
Bronze
Bronze
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?