telerik/kendo-angular

Issue tracker - Kendo UI for Angular

Kendo UI for Angular

Kendo UI for Angular uses GitHub Issues as an official bug tracker.

This repository is intended to support users by providing information on available support options and by storing the sample projects that are referred to from the official Kendo UI for Angular documentation.

This repository does not contain the actual source code of the components.

In This Article

• Available Support Options
  • Information on How to Use Specific Features
  • Queries on Future Releases
  • Bug Discovery
  • Bug Reports
  • Tailor-Made Solutions
• Sample Projects and Applications

Support Options

Kendo UI for Angular provides the following support options.

How do I...?

1. Check out the Components ↗, or the FAQ ↗ and Troubleshooting ↗ pages.
2. Browse the kendo-ui-angular2 ↗ questions on Stack Overflow. If you haven't found what you are looking for there, pose a question for the Stack Overflow community to follow or answer.
3. Use our official support channel and submit a support ticket ↗.

When do you plan on releasing Feature X?

1. Check the Roadmap for the planned items.
2. If the item you need is not present there, check our feedback portal. If someone has already posted it there, you can upvote it. If nobody has requested it so far, you can post a new idea.

I think I found a bug

1. Review the issues in the Issue Tracker ↗. Maybe someone has already reported it and it will be fixed soon.
2. The problem might have also been fixed. In this case, you will find the issue in the closed issues list ↗.
3. If you cannot find your issue, follow the reproduction steps guide below. We will look into it.

I want to report a bug

1. Find an example in the documentation that looks similar to your case.
2. Open it in StackBlitz by using the Edit in StackBlitz button.
3. Modify the example, so that the issue is reproducible in it. Try to include the minimum possible amount of code.
4. Save the example by using the blue Fork button at the top.
5. Copy the link from the address bar of the browser.
6. Open a new issue and add the StackBlitz link in the description.
7. Provide any additional information necessary for us to reproduce the problem—for example, browser version, steps to perform, etc.

We might not be able to act on issues without a runnable demo.

If you need assistance on troubleshooting or isolating a problem, you can request a remote assistance session through our Support Ticket system. Remote Assistance is included in the DevCraft Ultimate subscription.

I need a tailor-made solution

Our aim is to provide the most versatile and proven set of application building blocks. Still, depending on the functionality you desire, some assembly is required.

The Progress Services team is available to assist in building functional blocks or complete applications according to your specification. They will help you make the most of Kendo UI while freeing you to work on the real business problems.

Sample Projects

The kendo-angular repository is a single storing place for all sample applications that are referred in the [official Kendo UI for Angular documentation]. All currently available sample applications are located under the following folders:

• examples/projects/
• examples-standalone

kendo-angular's Issues

ngc: Error: Unexpected value 'ChartsModule' imported by the module 'AppModule'

When compiling my ionic2 app for android, I get this error:

ngc: Error: Unexpected value 'ChartsModule' imported by the module 'AppModule'

If I only build it using ionic serve (bypassing angular2 AOT) then it builds and runs fine.

I believe this error is due to the lack of metatdata.json file in the Telerik charts bundle (I only use the charts but I guess there's the same issue for other components).

Other vendors have the same problem, see ticket here: angular/angular#11262

Could this be fixed ?

(I've reported this issue on StackOverflow but I thought I should open an issue here instead)

Enabled [selectable]="true" but unable to wire event

I have been able to get sorting, filtering, paging and most of what is needed in a grid to work properly via builtin in actions or via inputs that are processed in the ngDoCheck Event. So far I have found this to be a flexible grid, with the caveat being that I have to do all my filtering in the component instead of using pipes on the grid data in the markup.

However now I need the grid to output information based on a selected row so I enabled Selectable, [selectable]="true". Based on my reading of the documentation I should be able to have an event to process the index returned. It does not ever get to the event handler. Any help would be appreciated.

import {GridDataResult, PageChangeEvent, SortDescriptor, SelectionEvent, orderBy} from '@progress/kendo-angular-grid';

...
export class KendoTest {
@output() selectedfirmnumber = new EventEmitter();

...

protected selectionChange(event: SelectionEvent): void {
console.log(event.index);
}

Kendo breaks Bootstrap inside their widgets?

Hello,
I'm using a KendoTabstrip in my project and the content of a tab, which was previously not inside your widget, broke. I noticed this style:
.k-widget, .k-widget *, .k-widget *::before { box-sizing: content-box; }
Since Bootstrap defaults to border-box for everything... does it mean we can't use Bootstrap inside your widgets without manually adjusting the CSS?

ComboBoxComponent giving popup error

I've tried installing the ComboBoxComponent but when I press the selector it gives me the following errors related to the popup:

EXCEPTION: Error in ./ComboBoxComponent class ComboBoxComponent - inline template:19:8 caused by: kendo_popup_common_1.position is not a function core.

ORIGINAL EXCEPTION: kendo_popup_common_1.position is not a function

Error: Error in ./ComboBoxComponent class ComboBoxComponent - inline template:19:8 caused by: kendo_popup_common_1.position is not a function

Any advice on solving this? I can't see any difference between my code and that in the Plunkr.

Additionally, it seems that the ComboBox examples on the documentation website don't function properly either. The search functionality doesn't seem to work, making it no better than a dropdownlist. I don't know if this is a known issue.

Support for AoT Compilation

We're currently working on supporting Ahead-of-Time Compilation for all components.
An updated release will include the necessary metadata.

State of readiness (not necessary available via npm package yet):

• @progress/kendo-angular-buttons
• @progress/kendo-angular-charts
• @progress/kendo-angular-sortable
• @progress/kendo-angular-dropdowns
• @progress/kendo-angular-scrollview
• @progress/kendo-angular-dialog
• @progress/kendo-angular-grid
• @progress/kendo-angular-inputs
• @progress/kendo-angular-intl
• @progress/kendo-angular-layout
• @progress/kendo-angular-popup
• @progress/kendo-angular-upload

ScrollView Component

Scenarios

The developer wants to display a list of entities in a horizontal scrollable container. The UI is suitable for image galleries or large promo stripes.

Reference Implementation — Kendo UI ScrollView

Requirements

• Touch friendly, should respond to drag and swipe with mouse and fingers
• Should display pager (dots), that respond to clicks
• Pager display should be optional for larger sets
• “Infinite” mode. Scrolling to the last image should move back to the first
• Should support binding to Angular RxJS observables
• Support for arbitrary content through Angular template

Kendo Grid pageSize property broken

It appears that the pageSize property of the kendo-grid is broken. Page size value changes from the UI are not reflected being reflected in the bound component variable.

This can be tested in the sandbox environment provided here: http://www.telerik.com/kendo-angular-ui/components/grid/#paging.

Getting Started Error (using ng2 quickstart)

I used the getting start code from: https://github.com/angular/quickstart

Followed the "getting started" instructions from the docs.

And this is the error I get.

> [email protected] start /Users/Lindley/Downloads/quickstart-master                      
> tsc && concurrently "tsc -w" "lite-server"                                                      

node_modules/@progress/kendo-angular-buttons/dist/npm/js/button-group.component.d.ts(23,14): error
 TS1005: '=' expected.                                                                            
node_modules/@progress/kendo-angular-buttons/dist/npm/js/button-group.component.d.ts(23,18): error
 TS1005: ';' expected.                                                                            
node_modules/@progress/kendo-angular-buttons/dist/npm/js/button.directive.d.ts(47,14): error TS100
5: '=' expected.                                                                                  
node_modules/@progress/kendo-angular-buttons/dist/npm/js/button.directive.d.ts(47,23): error TS100
5: ';' expected.                                                                                  

npm ERR! Darwin 15.6.0                                                                            
npm ERR! argv "/usr/local/bin/node" "/usr/local/bin/npm" "start"                                  
npm ERR! node v6.3.1                                                                              
npm ERR! npm  v3.10.3                                                                             
npm ERR! code ELIFECYCLE                                                                          
npm ERR! [email protected] start: `tsc && concurrently "tsc -w" "lite-server" `           
npm ERR! Exit status 2                                                                            
npm ERR!                                                                                          
npm ERR! Failed at the [email protected] start script 'tsc && concurrently "tsc -w" "lite-
server" '.                                                                                        
npm ERR! Make sure you have the latest version of node.js and npm installed.                      
npm ERR! If you do, this is most likely a problem with the angular2-quickstart package,           
npm ERR! not with npm itself.                                                                     
npm ERR! Tell the author that this fails on your system:                                          
npm ERR!     tsc && concurrently "tsc -w" "lite-server"                                           
npm ERR! You can get information on how to open an issue for this project with:                   
npm ERR!     npm bugs angular2-quickstart                                                         
npm ERR! Or if that isn't available, you can get their info via:                                  
npm ERR!     npm owner ls angular2-quickstart                                                     
npm ERR! There is likely additional logging output above.                                         

npm ERR! Please include the following file with any support request:                              
npm ERR!     /Users/Lindley/Downloads/quickstart-master/npm-debug.log                             
bash-3.2$

No clear event on kendo-upload

There is a remove event in the upload control that fires when clicking on an individual file (1). Is it possible to execute this event when clicking on "Clear" button (2) or triggering a clear event because I would also like to know if the files are removed using that button.

Also a workaround how to add an event on that button would be appreciated :-)

This cannot be a serious candidate without the date picker

Thanks :)

Kendo Grid Filter Row?

When can we expect a Kendo Grid Filter Row. Now the Grid does not contain's a filetering possibility.

Grid Component

We should define the basic feature set / scope of the initial preview.

CC: @rkonstantinov @rusev

Scrollable and closable tabstrip

Scrollable and closable tabstrip

DataViz Suite Preview Release

Given the broad topic DataViz is, I think that we will need to come up with some more concrete details on our initial plan.

Owned by @danielkaradachki @tsvetomir

Keyboard navigation and RTL support in grid control

Hi,

JQuery version of Kendo grid has a “Navigatable” flag that is used to enable keyboard navigation. It seems the current version of NG2 grid control doesn't support the flag. Do you have a timeline when this will be added? It's a high priority request as part of accessibility support.

Also needed is proper RTL language support. In current implementation the grid header and content are misaligned under RTL.

Thanks.

Upload (R & D)

We should check if Angular 2 does not do something specific when it comes to file uploads. If not - can we define the initial feature set? Please notice that this is not part of our initial preview milestone, unless something changes.

Kendo for Angular 2: Grid styling using headerClass, class or footerClass do not work

Kendo for Angular 2: Grid styling using headerClass, class or footerClass do not work.
The documentation example for Styling uses headerStyle, style, footerStyle and seems to work.
http://www.telerik.com/kendo-angular-ui/components/grid/

But if I switch the example to use headerClass, class, or footerClass, the styles do not apply.

See plunker example: http://plnkr.co/edit/Vy8ztuercRsR4ESXbCPU?p=preview

Dialog

I love the feature set which @gyoshev chose for the initial react counterpart release - https://github.com/telerik/kendo-react-dialog

Kendo UI For Angular 2 (nativescript renderer) [Question]

As i can tell, this components library is for the web platform (Browser Renderer / HTML).

Is there any plan to release Kendo UI For Angular 2 with Nativescript or should i call Kendo UI For Nativescript or even Kendo UI For Angular Native?

Error with Grid component: Unexpected token < in JSON at position 0

Hi,

Im trying to add the grid component but Im getting an error. This only happens with grid component, I can install perfectly the button component. And I dont know what it is happening.
Need help pls.
Thanks!

ComboBox custom values

In its nature, the ComboBox should allow the user to enter a text that is not present in the provided dataset. There are, however, scenarios that need to be handled a bit differently, otherwise some unexpected results might occur. Let's take a look at the following configuration:

//pseudo code
<kendo-combobox
    [data]="items"
    [textField]="'text'"
    [valueField]="'value'"
    [valuePrimitive]="true"
    [(ngModel)]="item"
>

export class AppComponent` {
    public item: number = 1;
    public items: any[] = [
        { text: "Item 1", value: 1 },
        { text: "Item 2", value: 2 },
        { text: "Item 3", value: 3 }
    ];
}

Scenario

1. The component is initialized and successfully resolves the initial value to "Item 1"
2. The user now enters "Item 999" into the input and presses Enter.
3. The ComboBox component does not find a match in the dataset, but should pass the "Item 999" text to the App, thus allowing the custom value to be used.

Problem

Passing the custom text to the App might look like the simplest approach, however it will result in updating the model with a value of different type. As seen in the example, the item is of type number, however we'll update it with a string. This is probably not what the users might want or expect. Passing null or undefined makes even less sense.

Solutions

1️⃣

Ask developers to subscribe to the ComboBox's ngModelChange event and handle the custom values as they wish.
➖ Requires too much effort on the user's end for handling basic and relatively common scenario

2️⃣

Introduce [allowCustom] configuration option. Unless explicitly specified, the ComboBox will ignore custom values and will not trigger the ngModelChange event. This is complimentary to 1️⃣
➕ Require custom handling only when option is enabled.
➖ Both custom and existing values pass through the custom handler

3️⃣
Introduce [ignoreCustom] configuration option. Same as 2️⃣, but enables custom values by default.
➖ Still requires the custom handling (from 1️⃣) by default
➖ Both custom and existing values pass through the custom handler

4️⃣
Introduce (onCustomValue) event, triggered instead of the ngModelChange when custom value is detected.
➕ Allows handling of custom values only
➖ Unclear what the default action should be if the event is not handled - clear the text or keep it. This could be complimented well by the [ignoreCustom] option.

Do you see any other available options or possible pitfalls? Any input is greatly appreciated.
Feel free to vote using the 1️⃣ 2️⃣ 3️⃣ 4️⃣ emojis.

jQuery rowTemplate equivalent for GridComponent

Hi,

first of all great work guys! Very excited about KendoUI coming to angular2.

Is an equivalent of Grid jQuery rowTemplate available? Current AngularUI GridComponent seems limited with respect to jQuery but having at least "basic" API hooks would allow to sidestep many current limitations. If there isn't I hope there will soon be as it's really limiting on what can you render (and it's actually blocking us from further use).

Thanks

P.S.

I've found another (unanswered) "request" for this skimming through Stackoverflow KendoUI Angular2 questions:

http://stackoverflow.com/questions/39735422/kendo-ui-angular-2-rowtemplate

Popup

A basic abstraction, we need it for the #3 (dropdowns) package.

Layouts

The Layout package includes the beloved TabStrip and PanelBar components. I think that we need some careful research on the data-bound scenarios here - please follow-up with some specs.

Kendo DropDownList- random crash when switching tabs

Im using Kendo DropDownList in a tab control and sometimes (20% of the time) there is this exception in the console when I change the tab and try to comeback to the orignal tab.

this.ddlDataSource = [
{ Id: 1, Display: "2016/9/28 - 2016/10/14" },
{ Id: 2, Display: "2016/10/14 - 2016/10/31" },
{ Id: 3, Display: "2016/11/01 - 2016/11/14" },
{ Id: 4, Display: "2016/11/28 - 2016/12/14" },
{ Id: 5, Display: "2016/9/28 - 2016/10/14" },
{ Id: 6, Display: "2016/10/14 - 2016/10/31" },
{ Id: 7, Display: "2016/11/01 - 2016/11/14" },
{ Id: 8, Display: "2016/11/28 - 2016/12/14" },
{ Id: 9, Display: "2016/9/28 - 2016/10/14" },
{ Id: 10, Display: "2016/10/14 - 2016/10/31" },
{ Id: 11, Display: "2016/11/01 - 2016/11/14" },
{ Id: 12, Display: "2016/11/28 - 2016/12/14" },
{ Id: 13, Display: "2016/9/28 - 2016/10/14" },
{ Id: 14, Display: "2016/10/14 - 2016/10/31" },
{ Id: 15, Display: "2016/11/01 - 2016/11/14" },
{ Id: 16, Display: "2016/11/28 - 2016/12/14" }];

core.umd.js:3462 EXCEPTION: Error in ./DropDownListComponent class DropDownListComponent - inline template:18:93 caused by: Expression has changed after it was checked. Previous value: '300px'. Current value: '0px'.ErrorHandler.handleError @ core.umd.js:3462
core.umd.js:3464 ORIGINAL EXCEPTION: Expression has changed after it was checked. Previous value: '300px'. Current value: '0px'.ErrorHandler.handleError @ core.umd.js:3464
core.umd.js:3467 ORIGINAL STACKTRACE:ErrorHandler.handleError @ core.umd.js:3467
core.umd.js:3468 Error: Expression has changed after it was checked. Previous value: '300px'. Current value: '0px'.
at ExpressionChangedAfterItHasBeenCheckedError.Error (native)
at ExpressionChangedAfterItHasBeenCheckedError.BaseError as constructor
at new ExpressionChangedAfterItHasBeenCheckedError (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5545:20)
at checkBinding (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:5689:23)
at DebugAppView._View_DropDownListComponent4.detectChangesInternal (DropDownListComponent.ngfactory.js:714:7)
at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)
at DebugAppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9671:48)
at DebugAppView.AppView.detectContentChildrenChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9584:23)
at DebugAppView._View_DropDownListComponent0.detectChangesInternal (DropDownListComponent.ngfactory.js:228:8)
at DebugAppView.AppView.detectChanges (http://localhost:3000/node_modules/@angular/core/bundles/core.umd.js:9566:18)ErrorHandler.handleError @ core.umd.js:3468
core.umd.js:3471 ERROR CONTEXT:ErrorHandler.handleError @ core.umd.js:3471
core.umd.js:3472 DebugContextErrorHandler.handleError @ core.umd.js:3472
zone.js:140 Uncaught Error: Error in ./DropDownListComponent class DropDownListComponent - inline template:18:93 caused by: Expression has changed after it was checked. Previous value: '300px'. Current value: '0px'.

Kendo UI Grid - Row Detail + Scrolling bug

See this example
http://plnkr.co/edit/v5JpVghrstxNUTNzIz2I?p=preview

If u open detail of the row and scroll it does not work. In my application The rows ger render correctly but the detail does not change. Does Telerik give a discount/free licence on kendo UI for angular 2 for beta testers that provide alot of feeback?

Can't import GridModule with Angular 2.0.1

Hi,

after upgrading to Angular 2.0.1 from Angular 2.0.0, the following error is thrown in the browser by the Angular compiler when GridModule is imported:

Uncaught Error: Unexpected value 'GridModule' imported by the module 'AppModule'

My dependencies:

...
  "dependencies": {
    "@angular/common": "2.0.1",
    "@angular/compiler": "2.0.1",
    "@angular/core": "2.0.1",
    "@angular/forms": "2.0.1",
    "@angular/http": "2.0.1",
    "@angular/platform-browser": "2.0.1",
    "@angular/platform-browser-dynamic": "2.0.1",
    "@angular/router": "3.0.1",
    "@progress/kendo-angular-grid": "0.3.2"
  }
...

Any ideas?

Inputs Preview Release

The inputs package includes the Switch, Slider, NumericTextBox, MaskedTextBox and ColorPicker components. The initial preview release may be limited to the Switch and the Slider.

ahead-of-time compilation timeframe

Hi Guys,

Great work on the beta so far!
I've just read in this issue #16 - that ahead-of-time compilation is not yet supported.

Is this something that may be supported soon?

Thanks,
Nick

Kendo Styling / SCSS

On the site there stands:
There are several ways to include the Kendo UI theme in your project. We recommend Webpack and its Sass loader, which allows the customization of the Kendo UI theme by using Sass variables.

But how and where do I link them?

I've now for example linked with Webpack (angular cli) to this:
      "styles": [
        "styles/main.scss",
        "../node_modules/@progress/kendo-angular-inputs/dist/npm/css/main.css",
        "../node_modules/@progress/kendo-angular-grid/dist/npm/css/main.css"
      ],

But I want the SCSS files and also the Bootstrap variant, this exists right?
You've the option for the Kendo styling or Bootstrap 4 styling?

So I want SCSS and the Bootstrap 4 Styling, is there somewhere a Guide or something simular howto?

Webpack problem

Hi,

after long time waiting for the Angular2 Kendo UI Beta, we just try to add it to our project. But it seems that there is a problem, while building with webpack. The console of the browser shows the following error:

Unexpected value 'ButtonsModule' imported by the module 'AppModule' (compiler.umd.js:14126)

We also tried the quickstart from this link:

https://github.com/telerik/kendo-angular2-quickstart

As soon as we converted the sample project to build by webpack, the same error occurs. Does anybody have an idea what to do?

Thanks for your replies!

Internationalization

Background

The @telerik/kendo-intl package provides the basic support for internationalization functions - parsing, formatting and calendars.

The locale data comes from the cldr-data package. Kudos to @ggkrustev and @danielkaradachki for taming this monster data set.

Integration w/Angular

Goals

• Built-in i18n that just works for the default en-US locale
• Loading additional locales should be easy
• Custom implementations should be easy to plug-in

Implementation

We start by defining an abstract class IntlService class that defines our service interface. We're not using a TypeScript interface as the Angular DI requires a concrete type.

import { DateFormatOptions, DateFormatNameOptions, NumberFormatOptions }
  from '@telerik/kendo-intl';

export abstract class IntlService {
  public abstract format(format: string, ...values: any[]): string;

  public abstract toString(value: string, format: string): string;

  public abstract formatDate(
    value: Date,
    format: String | DateFormatOptions
  ): string;

  public abstract parseDate(
    value: string,
    format?: string | DateFormatOptions | string[] | DateFormatOptions[]
  ): Date;

  public abstract parseNumber(
    value: string,
    format?: string | NumberFormatOptions
  ): number;

  public abstract formatNumber(
    value: number,
    format: string | NumberFormatOptions
  ): string;

  public abstract dateFormatNames(options: DateFormatNameOptions): any;

  public abstract firstDay(): number;
}

This class is inherited and fully implemented by the CldrIntlService default implementation.
Both classes will be made available as part of the @progress/kendo-angular-intl package.

Scenario: Load data for additional locales

• Install cldr-data

  npm install --save cldr-data

• For Webpack, configure json-loader. See loaders.

  npm install --save json-loader

• Load the desired locales

import { NgModule, LOCALE_ID } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';

import { load } from '@telerik/kendo-intl';
load(
  require(`json!cldr-data/main/bg/numbers.json`),
  require(`json!cldr-data/main/bg/currencies.json`),
  require(`json!cldr-data/main/bg/ca-gregorian.json`),
  require(`json!cldr-data/main/bg/timeZoneNames.json`)
);

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule],
    providers:    [{ provide: LOCALE_ID, useValue: 'bg-BG' }]
})
export class AppModule {
}

Scenario: Custom localization service

• Inherit IntlService or CldrService and implement/override its memebers

import { IntlService } from '@progress/kendo-angular-intl';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule],
    providers: [{
      provide: IntlService,
      useClass: MyIntlService
    }]
})
export class AppModule {
}

Scenario: Use localization service in a component

• Add CldrService as a provider to your module
• Inject it in your component
• Optionally, load CLDR data for the desired locales. By default only en-US will work.

import { CldrService } from '@progress/kendo-angular-intl';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule],
    providers: [CldrService]
})
export class AppModule {
}

import { CldrService } from '@progress/kendo-angular-intl';

@Component({
  providers: [CldrService],
  selector: 'my-component',
  template: `
    {{ intl.formatNumber(42, "c") }}
  `
})
export class MyComponent {
  constructor(public intl: CldrIntlService) {
  }
}

Questions

• How do we handle missing locale information. Do we throw an error or use the default locale?

/cc @Underlog @rkonstantinov @danielkaradachki @rusev @KirilNN

Using Kendo Switch in Kendo Grid - Switch Animation not working

Problem with kendo-switch in Kendo-grid-colum. The switch animation doest not work until u scroll the grid.

import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';

import {Http, Response} from '@angular/http';
import {Observable} from "rxjs/Observable";
// Statics
import 'rxjs/Rx';
import 'rxjs/add/observable/throw';

// Operators
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/debounceTime';
import 'rxjs/add/operator/distinctUntilChanged';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/toPromise';

import * as _ from 'lodash';

import { ValidationViewType } from '../_core/enums';
import { VirtuoPageBodyComponent } from '../_core/directives/virtuo-page-body.component';

import { FormsModule } from '@angular/forms';

import {
GridDataResult,
PageChangeEvent
} from '@progress/kendo-angular-grid';

@component({
templateUrl: "app/modules/employe/employe-detail.component.html"
})

export class EmployeDetailComponent {

private pageSize: number = 20;
private skip: number = 0;

@ViewChild(VirtuoPageBodyComponent) basePage: VirtuoPageBodyComponent;

private gridView: GridDataResult;
private data: any[] = [];
private ddlDataSource: any[] = [];

user: any = {};

constructor(
private router: Router,
private http: Http) {

var count = 1;

for (var i = 0; i < 5000; i++) {

  var item: any = {
    "Id": 1,
    "ProductName": "Aniseed Syrup",
    "UnitPrice": 10.0000,
    "Discontinued": false,
    "Category": {
      "CategoryID": 2,
      "CategoryName": "Condiments",
      "Description": "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
  }

  item.Id = i;
  item.isAutorise = false;

  this.data.push(item)
}

this.loadProducts();

this.getData();

this.ddlDataSource = [
  { Id: 1, Display: "2016/9/28 - 2016/10/14" },
  { Id: 2, Display: "2016/10/14 - 2016/10/31" },
  { Id: 3, Display: "2016/11/01 - 2016/11/14" },
  { Id: 4, Display: "2016/11/28 - 2016/12/14" },
  { Id: 5, Display: "2016/9/28 - 2016/10/14" },
  { Id: 6, Display: "2016/10/14 - 2016/10/31" },
  { Id: 7, Display: "2016/11/01 - 2016/11/14" },
  { Id: 8, Display: "2016/11/28 - 2016/12/14" },
  { Id: 9, Display: "2016/9/28 - 2016/10/14" },
  { Id: 10, Display: "2016/10/14 - 2016/10/31" },
  { Id: 11, Display: "2016/11/01 - 2016/11/14" },
  { Id: 12, Display: "2016/11/28 - 2016/12/14" },
  { Id: 13, Display: "2016/9/28 - 2016/10/14" },
  { Id: 14, Display: "2016/10/14 - 2016/10/31" },
  { Id: 15, Display: "2016/11/01 - 2016/11/14" },
  { Id: 16, Display: "2016/11/28 - 2016/12/14" }];

}

getData (): any {
// return this.http.get("http://localhost:56872/api/test/mockups/1")
// .map(response => response.json())
// .subscribe(data => {
// var test = data;
// });
}

onKey(event: any) {
this.user.name = event.target.value;
}

// Commands

executeEdit(item) {

}

executeDelete(item) {
this.gridView.data = _.filter(this.gridView.data, function (product) {
return product.Id !== item.Id;
});
}

protected pageChange(event: PageChangeEvent): void {
this.skip = event.skip;
this.loadProducts();
}

private loadProducts(): void {
this.gridView = {
data: this.data.slice(this.skip, this.skip + this.pageSize),
total: this.data.length
};
}

executeSave() {
this.bind();
}

canExecuteSave() {
return true;
}

bind() {

var validationItems: Array<any> = [
  { description: "Nom requis", type: ValidationViewType.Error },
  { description: "Age requis", type: ValidationViewType.Error },
  { description: "Description requise", type: ValidationViewType.Warning }
];

this.basePage.load(validationItems);

}

executeReturnList() {
this.router.navigate(['/usager']);
}
}

Readme.MD, both links are not working.

Readme.MD, both links are not working.

Kendo Datasource

Hi,

is it planned to implement Kendo Datasources like in the Kendo UI version, especially to support Odata-V4? If so, when to expect it?

Best Regards

Helmut

node_modules directory is being included with npm packages

The node_modules directory is being included in the npm packages.

Grid widget could support more events

Additional mouse events would be useful for the grid widget. Those are useful for implementing custom tool tips, context menus etc. Some examples might be,

• Right click event on rows/cells.
• Hover/unhover events on row/cells.
• Hover/unhover events on header cells.

npm ERR! 404 no such package available : @telerik/kendo-inputs-common

Error happens when attempting to install kendo-angular-inputs.

npm ERR! 404 no such package available : @telerik/kendo-inputs-common
npm ERR! 404
npm ERR! 404 '@telerik/kendo-inputs-common' is not in the npm registry.
npm ERR! 404 You should bug the author to publish it (or use the name yourself!)
npm ERR! 404 It was specified as a dependency of '@progress/kendo-angular-inputs
```'

Panelbar not working when Panelbar Items are used by *ngFor in a separate component.

I created a component that uses a panel bar and another separate component that uses the panel bar item as a template. Then when I put it inside the panel bar directive, it did not work.
Component 1 (Header)
<kendo-panelbar> <wafe-panel-sidebar-item [pages]="pages"> </wafe-panel-sidebar-item> </kendo-panelbar>
Component 2 (Details)
<kendo-panelbar-item *ngFor='let page of pages' title='{{page.name}}'> </kendo-panelbar-item>

Typescript Source?

Will this be available in the commercial offering? We are commercial clients and were hoping to start using Kendo on our new Angular2 project but we definitely need access to the source in order to do that.

Tabstrip should use ng-if instead of opacity to show tab content

Is it possible to use ng-if instead of opacity to show tabstrip content. For heavy UI it will be slow with the current approach. This is an exemple from angular material (1 and 2). They both use ng-if to trigger tab content.

Require @angular packages as peer dependency

Description

Currently, Kendo UI components for Angular 2 requires Angular modules as dependencies with strict version, e.g.

"dependencies": {
    "@angular/core": "2.0.0",
    "@angular/common": "2.0.0",
...

Those packages should be peer dependencies:

"peerDependencies": {
    "@angular/core": "~2.0.0",
    "@angular/common": "~2.0.0"
 },
 devDependencies: {
   //move here other @angular packages that are needed only for development
   "zone.js": "",
   "core-js": "",
   ...
 }

important: use [email protected] or newer

important: use [email protected] or newer

Button and ButtonGroups

We should match the react counterpart -
http://github.com/telerik/kendo-react-buttons

Sortable Component

Scenarios

The developer needs an UI to allow the user to sort records (usually from a relational table). Reference implementation — http://demos.telerik.com/kendo-ui/sortable/index . Developed by @valchev (ask him for implementation details).

Requirements

• Data-bound + template mode only. Reordering happens with re-rendering.
• Event that allows the developer to sort the data (should not happen automatically).
• Touch friendly, should respond to drags with mouse and fingers
• Handlers
• Disabled Items
• Axis and container restrictions

Out of scope/next version

• Linked lists

Dropdowns Initial Release

The DropDown Component Family includes a DropDownList, ComboBox, AutoComplete, and MultiSelect. I guess that we can cover the ComboBox and the DropDownList, initially.

How to access the index in the Sortable data loop?

<kendo-sortable [data]="data">
    <template let-item="item" let-i="i">
        <span>{{ i }}</span>
    </template>
</kendo-sortable>

This would render a span with nothing in it. I also tried let-i="index" with no success.

How can I access the index?

Thanks.

Kendo DropDownList - Slow opening

If u compare with previous kendo component:
http://demos.telerik.com/kendo-ui/dropdownlist/virtualization

DropDownList opening animation could be faster and more fluid.

Using kendo for jquery css missing styles

For example I'm using the css files provided from the kendo for jquery and for the ng2 grid, the style k-grid is missing the display block style. Adding this style fixed te the issue but it seems there are a few styles missing for the ng2 version.

Why is the Sortable element stopping the propagation of the drag events?

This means that any drag and drop operation on a children component that necessitates the mouse position coordinates (e.clientX) won't work in Firefox. In order to get the mouse position during a drag event in Firefox, you need to listen to the document's dragover event and get the data from there, as a drag event on any other element than the document in Firefox returns e.clientX to 0.

Is it required to stop the propagation of the drag events?

Kendo DropDownsModule breaks

@Underlog : I've been following the guide "Getting Started" to setup a DropDownList component from the documentation, (and yesterday it did work), but since this morning, I get the following SystemJS XHR Error :

zone.js:203 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:39351/node_modules/@progress/kendo-dropdowns-common/dist/npm/js/bundle.js

Looking a bit more into the error, it seems it's coming from the ComboBox Component :

Error loading http://localhost:39351/node_modules/@progress/kendo-dropdowns-common/dist/npm/js/bundle.js as "@telerik/kendo-dropdowns-common/dist/npm/js/bundle" from http://localhost:39351/node_modules/@progress/kendo-angular-dropdowns/dist/npm/js/combobox.component.js

As a matter of facts, the combobox example plunker you provide from your documentation is broken as well :

Doc link : http://www.telerik.com/kendo-angular-ui/components/dropdowns/combobox/
Plunker link (didn't edit anything) : http://plnkr.co/edit/NFjHlaiZwJMmo7e2ECel?p=preview