Questions on Kendo UI for Angular Forum

4 answers

477 views

Angular 5 / Kendo grid memory leaks

Hello,

Currently we're evaluating usage of kendo with angular 5.

I've noticed detached DOM trees when destroying the grids.

Please find attached 2 files:

1. Screencast of the snapshots as the creation/destroy progressing: https://ufile.io/20hfh

2. The app itself (without node modules, you can npm install to run it): https://ufile.io/0eone

Can you provide any input on this one? Is this a known issue or we're missing something?

Thank you

General Discussions

answered on 02 Jun 2020

1 answer

1.0K+ views

DatePicker doesn't open in ionic modal

Hi, I have an DatePicker in an ionic modal.

But for some reason it doesn't open and gives no errors in cosole. It is just a copy and paste from the basic example in the docs.

That is any reason for this to happen?

DatePicker

answered on 02 Jun 2020

1 answer

6.8K+ views

[Solved] rowIndex of an editable grid

I have enable sorting, filtering for Kendo editable grid. When I filtering the grid, and editing any particular row, I want to get the original rowIndex (the index of the binded array) in the called function as a parameter along with the dataItem, default rowIndex values.

Note: I have attached the screenshot of my code, hope that might be helpful to understand my use case

Grid

answered on 02 Jun 2020

6 answers

281 views

Upload animations not appearing correctly.

Wondering if I can get some help here.

I have an upload component that is not showing the progress bar loading animation correctly, nor is it showing the Uploading... spinner.

I have attached an image of what the component looks like after I have initiated an upload:

- the progress bar fills up 100% immediately without waiting for API

- the Uploading... does not spin

When the API response returns to the browser, the progress bar transitions to green and disappears.

I have this working in another project with all animations correct, so I'm confused as to what I have done wrong. I have checked package.json and the projects appear identical in the dependencies installed.

"dependencies": {

"@angular/animations": "~9.1.0",

"@angular/cdk": "^9.1.1",

"@angular/common": "~9.1.0",

"@angular/compiler": "~9.1.0",

"@angular/core": "~9.1.0",

"@angular/forms": "~9.1.0",

"@angular/localize": "^9.1.9",

"@angular/material": "^9.2.2",

"@angular/platform-browser": "~9.1.0",

"@angular/platform-browser-dynamic": "~9.1.0",

"@angular/router": "~9.1.0",

"@progress/kendo-angular-common": "^1.2.2",

"@progress/kendo-angular-l10n": "^2.0.1",

"@progress/kendo-angular-upload": "^5.2.1",

"@progress/kendo-theme-default": "^4.18.2",

"@progress/kendo-theme-material": "^2.3.1",

"rxjs": "~6.5.4",

"tslib": "^1.10.0",

"zone.js": "~0.10.2"

},

template:

<kendo-upload

formControlName="formAttachment0"

[autoUpload]="true"

[saveUrl]="apiUrl"

[removeUrl]="apiUrl"

[restrictions]="restrictions"

[multiple]="true"

[withCredentials]="false"

(upload)="uploadEventHandler($event)"

(success)="successEventHandler($event)">

</kendo-upload>

Hopefully it is something simple.

cheers

Upload

answered on 01 Jun 2020

1 answer

73 views

Whenever Button Group is selected, unnecessary border color is appearing around the button group in Iphone 6+

I tested this issue in Android there it is working fine but when Itested it on Iphone 6, Unknown border color(cyan) is appearing around the button group which makes it so frustating. Please let me know the solution of this Issue. I have also attached the screenshot of issue for more clarification.

ButtonGroup

answered on 29 May 2020

2 answers

249 views

DatePicker highlight in Firefox

Hi, I came across a following problem with DatePicker in Firefox:

I want to highlight the date inside the DatePicker to delete it, but as soon as I let the mouse button go, only the first part of the date stays highlighted and I have to delete the date in three steps - day, month and year. In Google Chrome it works just fine - the whole date stays highlighted and therefore can be deleted at once.

Is there anything I'm missing?

Thanks, Veronika

DatePicker

answered on 29 May 2020

2 answers

87 views

Multi-select (turnoff its multi-select functionality)

https://www.telerik.com/kendo-angular-ui/components/dropdowns/multiselect/filtering/

For reference, please verify above link.

Please find the attached and i want the output like attached.

General Discussions

answered on 28 May 2020

7 answers

1.3K+ views

ColumnResizingService not available in TableDirective

Hello,

When I'm using a simple table, I get the following error.

ERROR Error: Uncaught (in promise): NullInjectorError: StaticInjectorError(AppModule)[TableDirective -> ColumnResizingService]:

StaticInjectorError(Platform: core)[TableDirective -> ColumnResizingService]:

NullInjectorError: No provider for ColumnResizingService!

It seems that there is a TableDirective from kendo where its selector is table tag, and this directive requires ColunResizingService which can not be injected for some reason.

First of all, why kendo team wrote a directive that catches any table? That doesn't sound a good practice to me.

Second, how can I fix this issue? I want a simple table without any process on that.

Best regards,

Mojtaba

General Discussions

answered on 28 May 2020

1 answer

1.5K+ views

Remove a Column Upon Export to Excel

app.component.ts:

import { Component } from '@angular/core';

import { process } from '@progress/kendo-data-query';

import { ExcelExportData } from '@progress/kendo-angular-excel-export';

import { products } from './products';

@Component({

selector: 'my-app',

template: `

<kendo-grid [kendoGridBinding]="products" [height]="400" [pageable]="true" [pageSize]="10">

<ng-template kendoGridToolbarTemplate>

<button type="button" kendoGridExcelCommand icon="file-excel">Export to Excel</button>

</ng-template>

<kendo-grid-column field="ProductID" title="Product ID" [width]="200">

</kendo-grid-column>

<kendo-grid-column field="ProductName" title="Product Name">

</kendo-grid-column>

<kendo-grid-column field="Category.CategoryName" title="Category">

</kendo-grid-column>

<kendo-grid-excel fileName="Products.xlsx" [fetchData]="allData"></kendo-grid-excel>

</kendo-grid>

`

})

export class AppComponent {

public products: any[] = products;

public group: any[] = [{

field: 'Category.CategoryName'

}];

// Bind 'this' explicitly to capture the execution context of the component.

constructor() {

this.allData = this.allData.bind(this);

}

public allData(): ExcelExportData {

const result: ExcelExportData = {

data: process(products, { group: this.group, sort: [{ field: 'ProductID', dir: 'asc' }] }).data,

group: this.group

};

return result;

}

Given the code above, how can I remove a column (Product ID, Product Name or Category) upon exporting it to excel?

General Discussions

answered on 28 May 2020

2 answers

692 views

Grid state persistence

Hello

I thought I would share my github project that I put together help implement grid state consistently in my applications.

The project consists of an Angular Library and example of the implementation. The library can also be installed via NpmJS.

Hopefully you can find this useful?

Github: https://github.com/lucasheight/angular-kendo-grid-state

NpmJs: https://www.npmjs.com/package/@lucasheight/kendo-grid-state

StackBlitz: https://stackblitz.com/edit/angular-kendo-grid-state

kind regards

Lynden

Grid

answered on 27 May 2020