Questions on Kendo UI for Angular Forum

5 answers

5.8K+ views

Grid sorting, filtering, paging not working properly

Hi,

I am not sure what I'm doing wrong. I pass my data to the grid this way: [data]="rowData$ | async". I define this in my component as such:

rowData$: Observable<any>;

ngOnInit() {this.rowData$ = this.requestService.getData}

I would not want to modify this code, or my service code, so I need to know how to use the grid features when passing the data to the grid this way.

Also in the grid I have the following:

[sortable]="true"
[pageable]="true"
[filter]="state.filter"
[filterable]="true"
(dataStateChange)="dataStateChange($event)"

For filtering, I can see the filters textfields and filter buttons but when I type something, the data does not change.

For sorting, nothing happens when I click in the column header.

For paging, I see the number of pages and items at the bottom but the functionality does not work. I set to have only 12 items per page, and I see '1-12 items of 17' but all items are shown on the 1st page. I see the grid has 2 pages, but clicking on page 2 does not work, probably because all items are already displayed in the 1st page.

Also, I need to have a column with a filter always set, unless the user removes it. My idea was to use a kendo-switch to switch between group 1 and group 2, but this is not working for me either. Is it possible to have longer text instead of on/off?

I'm guessing my problem is coming from not understanding how to handle the data after the grid is initialized.

Thanks in advanced,

Carla

General Discussions

answered on 20 Sep 2018

1 answer

858 views

Dynamic Width kendo-angular chart

How i set the dynamic width for chart?

I'd like to get the dynamic horizontal scrollable

<kendo-chart #chart renderAs="canvas" (seriesClick)="onSeriesClick($event)">

<kendo-chart-title text="APP"></kendo-chart-title>

<kendo-chart-legend position="bottom"></kendo-chart-legend>

<kendo-chart-tooltip [shared]="true"></kendo-chart-tooltip>

<kendo-chart-series>

<kendo-chart-series-item

*ngFor="let item of DataList"

[data]="item.worked_hours_month"

[name]="item.worker"

field="worked_hours"

categoryField="month">

</kendo-chart-series-item>

</kendo-chart-series>

</kendo-chart>

General Discussions

answered on 20 Sep 2018

5 answers

300 views

Kendo column chart labels

Hi,

I am working with the kendo chart , I need to add the label for each column ( vertically because horizontally it may not get enough space).

I have seen one example https://demos.telerik.com/kendo-ui/bar-charts/local-data-binding (similar need with angular and need axis also)

I have attached one image also, I am checking similar option to represent the chart with kendo angular

Thanks

General Discussions

answered on 19 Sep 2018

1 answer

181 views

[Solved] Spring Boot REST API integration

Hello,

I'm trying to integrate the Kendu UI Grid to a Spring Boot REST API. I have it working okay, but when I try to enable sorting and filtering I am running into issues. Spring Boot requires the params for paging to be called "page" and "size" instead of the Kendo "skip" and "take". I was able to work around this, but filtering is much more complex. I found toDataSourceRequestString which converts the state to a format for ASP.NET MVC. Is there any such integration for Spring Boot? Has anyone run into this and found a reasonable work around?

Thanks.

General Discussions

answered on 19 Sep 2018

24 answers

2.8K+ views

[Solved] Grid ToolTip in Angular 5 Typescript

Is there an example of adding tooltips to a select set of columns in a grid in angular 5? All of the examples I have seen are for jquery or older versions of angular without typescript.

General Discussions

answered on 18 Sep 2018

1 answer

283 views

[Solved] kendo-pdf-export add header and footer

Hi,

I am working on pdf export , As I am using

https://www.telerik.com/kendo-angular-ui/components/pdfexport/

By placing the content in the <kendo-pdf-export> component.

How I can add header and footer (with page number)?

Thanks

Amit

General Discussions

answered on 17 Sep 2018

5 answers

148 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

350 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

746 views

[Solved] 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