Questions on Kendo UI for Angular Forum

5 answers

124 views

KENDO: Angular Export chart without rendering

I am using kendo chart , Now I want to export the kendo-chart without renedering - I found one similar querion but it is for silverlight https://www.telerik.com/forums/export-chartview-without-rendering. Any way around to achive kendo-angular-chart export without rendering.
Thanks

General Discussions

answered on 17 Sep 2018

1 answer

312 views

Global settings

Is it possible to configure components globally? For example, I want to disable animation for dropdowns globally instead of doing it each time I use that component.

General Discussions

answered on 14 Sep 2018

4 answers

725 views

Angular 6 AOT build fails on Kendo UI Angular modules

I just upgraded my app to Angular 6, and upgraded the Kendo Angular packages to their latest releases. When I build the app in AOT mode in the dev server, I get errors like this:

ERROR in ./src/app/foo/bar/bar.component.ngfactory.js

Module not found: Error: Can't resolve '@package-author/package.ngfactory' in 'C:\dev\myProject\src\app\foo\bar'

resolve '@package-author/package.ngfactory' in 'C:\dev\myProject\src\app\foo\bar'

Parsed request is a module

using description file: C:\dev\myProject\package.json (relative path: ./src/app/foo/bar)

Field 'browser' doesn't contain a valid alias configuration

resolve as module

looking for modules in C:/dev/myProject

using description file: C:\dev\myProject\package.json (relative path: .)

Field 'browser' doesn't contain a valid alias configuration

using description file: C:\dev\myProject\package.json (relative path: ./@package-author/package.ngfactory)

no extension

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\@progress\kendo-angular-grid.ngfactory doesn't exist

.ts

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.ts doesn't exist

.tsx

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.tsx doesn't exist

.mjs

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.mjs doesn't exist

.js

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\@progress\kendo-angular-grid.ngfactory.js doesn't exist

as directory

C:\dev\myProject\@progress\kendo-angular-grid.ngfactory doesn't exist

C:\dev\myProject\src\app\foo\bar\node_modules doesn't exist or is not a directory

C:\dev\myProject\src\app\foo\node_modules doesn't exist or is not a directory

C:\dev\myProject\src\app\node_modules doesn't exist or is not a directory

C:\dev\myProject\src\node_modules doesn't exist or is not a directory

C:\dev\node_modules doesn't exist or is not a directory

C:\node_modules doesn't exist or is not a directory

looking for modules in C:\dev\myProject\node_modules

using description file: C:\dev\myProject\package.json (relative path: ./node_modules)

Field 'browser' doesn't contain a valid alias configuration

using description file: C:\dev\myProject\package.json (relative path: ./node_modules/@package-author/package.ngfactory)

no extension

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory doesn't exist

.ts

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.ts doesn't exist

.tsx

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.tsx doesn't exist

.mjs

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.mjs doesn't exist

.js

Field 'browser' doesn't contain a valid alias configuration

C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory.js doesn't exist

as directory

C:\dev\myProject\node_modules\@progress\kendo-angular-grid.ngfactory doesn't exist

These errors crop up for every one of my app's components that reference a Kendo Angular component. kendo-angular-grid, kendo-angular-chart, and kendo-angular-popup are the most common offenders.

If I build without AOT, it builds fine, but that is not an acceptable solution. Is there some configuration I need to do to make Kendo Angular components work with AOT compilation?

Steps to reproduce:

install Angular CLI v 6 globally: yarn global add @angular/cli@latest
generate a new Angular 6 test app: ng new TestApp
add Kendo Angular Grid: ng add @progress/kendo-angular-grid
create a component and add a Kendo Angular grid to it (the basic component from the docs works fine for this: https://www.telerik.com/kendo-angular-ui/components/grid/#toc-basic-usage)
edit angular.json, set projects.TestApp.architect.build.options.aot to true:

{

  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",

  "version": 1,

  "newProjectRoot": "projects",

  "projects": {

    "TestApp": {

      "root": "",

      "sourceRoot": "src",

      "projectType": "application",

      "prefix": "app",

      "schematics": {},

      "architect": {

        "build": {

          "builder": "@angular-devkit/build-angular:browser",

          "options": {

            "aot": true,

            "outputPath": "dist/TestApp",

            "index": "src/index.html",

            "main": "src/main.ts",

            "polyfills": "src/polyfills.ts",

            "tsConfig": "src/tsconfig.app.json",

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ],

            "styles": [

              {

                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"

              },

              "src/styles.css"

            ],

            "scripts": []

          },

          "configurations": {

            "production": {

              "fileReplacements": [

                {

                  "replace": "src/environments/environment.ts",

                  "with": "src/environments/environment.prod.ts"

                }

              ],

              "optimization": true,

              "outputHashing": "all",

              "sourceMap": false,

              "extractCss": true,

              "namedChunks": false,

              "aot": true,

              "extractLicenses": true,

              "vendorChunk": false,

              "buildOptimizer": true

            }

          }

        },

        "serve": {

          "builder": "@angular-devkit/build-angular:dev-server",

          "options": {

            "browserTarget": "TestApp:build"

          },

          "configurations": {

            "production": {

              "browserTarget": "TestApp:build:production"

            }

          }

        },

        "extract-i18n": {

          "builder": "@angular-devkit/build-angular:extract-i18n",

          "options": {

            "browserTarget": "TestApp:build"

          }

        },

        "test": {

          "builder": "@angular-devkit/build-angular:karma",

          "options": {

            "main": "src/test.ts",

            "polyfills": "src/polyfills.ts",

            "tsConfig": "src/tsconfig.spec.json",

            "karmaConfig": "src/karma.conf.js",

            "styles": [

              {

                "input": "node_modules/@progress/kendo-theme-default/dist/all.css"

              },

              "src/styles.css"

            ],

            "scripts": [],

            "assets": [

              "src/favicon.ico",

              "src/assets"

            ]

          }

        },

        "lint": {

          "builder": "@angular-devkit/build-angular:tslint",

          "options": {

            "tsConfig": [

              "src/tsconfig.app.json",

              "src/tsconfig.spec.json"

            ],

            "exclude": [

              "**/node_modules/**"

            ]

          }

        }

      }

    },

    "TestApp-e2e": {

      "root": "e2e/",

      "projectType": "application",

      "architect": {

        "e2e": {

          "builder": "@angular-devkit/build-angular:protractor",

          "options": {

            "protractorConfig": "e2e/protractor.conf.js",

            "devServerTarget": "TestApp:serve"

          },

          "configurations": {

            "production": {

              "devServerTarget": "TestApp:serve:production"

            }

          }

        },

        "lint": {

          "builder": "@angular-devkit/build-angular:tslint",

          "options": {

            "tsConfig": "e2e/tsconfig.e2e.json",

            "exclude": [

              "**/node_modules/**"

            ]

          }

        }

      }

    }

  },

  "defaultProject": "TestApp"

}
run: ng serve
let the build complete, open the app to verify that it is working
modify the component with the Kendo grid and save the file
observe that the build fails

General Discussions

answered on 14 Sep 2018

5 answers

546 views

ButtonGroup Value

Hi,

is it in any way possible to get the value of a button group? Or at least have a (change) event? I haven't found anything in the docs so far.

Thanks in advance

Regards

Benny

General Discussions

answered on 14 Sep 2018

1 answer

5.2K+ views

Combobox Default Value Selection

How do I imperatively set the default selected value of a kendo angular combobox?

General Discussions

answered on 13 Sep 2018

2 answers

152 views

KENDO-Angular not exporting grid completely

Hi,

I am exporting grid to pdf but it is not exporting complete data some time. bottom rows are missing.

<kendo-grid-pdf fileName="washer.pdf" [allPages]="true" [repeatHeaders]="true" [landscape]="true" [scale]="0.8">
<kendo-grid-pdf-margin top="2cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>
<ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
<div class="page-template">
<div class="header">
<div style="float: right">Page {{ pageNum }} of {{ totalPages }}</div>
Multi-page grid with automatic page breaking
</div>
<div class="footer">
Page {{ pageNum }} of {{ totalPages }}
</div>
</div>
</ng-template>
</kendo-grid-pdf>

and
public exportToPDF(grid: GridComponent): void {
grid.saveAsPDF();
}

How I can make sure the grid is exporting completely.

General Discussions

answered on 12 Sep 2018

1 answer

106 views

DropdownList's Textfield cannot be resetted with the component's reset() method

Hi guys,

When I upgraded the DropdownListModule from 2.x to the latest stable version I encountered a very strange behavior. In the 2.x version the DropDownListComponent's reset() method actually reseted both the value and the textfield but in the latest version this method only resets the valuefield only not the textField. Is this normal behavior or is it a bug?

Example code: https://stackblitz.com/edit/angular-f7dpzf-wzj24n

Thank You Very Much for your time in advance!

General Discussions

answered on 10 Sep 2018

1 answer

188 views

Kendo Radial Gauge dynamic scale range

I have an implementation which requires that the scale range for Kendo Radial Gauge which means the values of [from] and [to] of <kendo-radialgauge-scale-range> tag continuously changes as a continuous stream of inputs is supplied to the gauge.

https://www.telerik.com/kendo-angular-ui/components/gauges/radialgauge/scale-ranges/

However when the values of [from] or [to] changes I have noticed the pointer in the gauge drops to zero first and then returns back to the current value. I want to be able to change the values of [from] and [to] of the scale range without the pointer dropping to zero. Is there a way to achieve this?

General Discussions

answered on 10 Sep 2018

5 answers

209 views

daterange component confusion

I'm a little confused by the date range component. I implement it as follows:

<kendo-daterange #daterange>

<kendo-dateinput kendoDateRangeStartInput format="dd/MM/yyyy" formatPlaceholder="formatPattern"

[(value)]="range.start" [navigateCalendarOnFocus]="true" autoCorrectOn="change"></kendo-dateinput>

<kendo-dateinput kendoDateRangeEndInput format="dd/MM/yyyy" formatPlaceholder="formatPattern"

[(value)]="range.end" [navigateCalendarOnFocus]="true" autoCorrectOn="change"

[max]="maxDate"></kendo-dateinput>

</kendo-daterange>

which is great (though it would be much better to have the formatting handled by a library such as moment.js). The popup appears and I can change dates which is also great.

But to actually apply the the changes to the the range object and call an API I have no event???? I have looked at several methods such as implementing a date range popup and then putting an apply button in the header (there is no footer component which seems strange) and also using the valueChanged event to activate an external component such as a button to apply the date changes and call the API.

Surely the date range component should have a button to apply the date changes and call a method in the component which can then call the API with the new date range.

My question is simple, am I missing something? My date range is driving a chart, the image attached should go some way to explaining.

General Discussions

answered on 07 Sep 2018

3 answers

2.2K+ views

Set columns width when using kendo-grid-column-group

Hi,

I am using the kendo grid with kendo-grid-column-group, when I try adding a width to the grid and to each column, the grid does it own thing, and doesnt set the with of the column according to what I wrote .

It sets other columns, and sometimes hides columns,

What are the rules??

Thanks

<kendo-grid-column-group title=Name" >

<kendo-grid-column field="Name" title="Name" [width]="100">

<ng-template kendoGridCellTemplate let-dataItem>

<span class="whole-cell text-center" )">

{{ Name }}

</span>

</ng-template>

</kendo-grid-column>

</kendo-grid-column-group>