Questions on Kendo UI for Angular Forum

6 answers

192 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

43 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

217 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

64 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.2K+ 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.4K+ 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

647 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

4 answers

3.4K+ views

Insert HTML content to Editor

There is no insertHTML command for Angular Kendo Editor.

I tried InsertText, however, it will show all html tag in editor. How to resolve this issue?

Please see code below:

var strResult =  "<p></p>"
    +"<span style='font-weight:bold'>CBC, Manual Diff if Indicated (2020-03-17 13:30:00.000)</span>"
   +"<p></p>"
    +"      [MCH]"
     +" 27.1 N 27.0-32.0 "
    +"<p></p>"
    +"      ["
    +"Platelet Count"
    +"]"
     +"  290 N 150-450";

editor.exec('insertText', { text: strResult});

Editor

answered on 27 May 2020

2 answers

8.5K+ views

[Kendo Angular Grid] - How to get currently selected rows?

Hi,

I am trying to get currently selected rows from a kendo angular grid and perform some operations for selected rows (such as call an external API using information from selected rows).

- user can select one row

- user can select multiple rows using `shift`

- user can select multiple sections using combination of `shift` and `ctrl`

I tried to use `selectionChange` which knows only the current selected rows and not previously selected.Tried to follow this: https://www.telerik.com/forums/how-to-get-the-selected-row-data-item which did not work either.

Please provide a sample get list of selected rows at will from the grid. It is fine even if I can get `id` column for selected rows as I can filter through the original data and get other columns for selected ids.

General Discussions