Getting exception TypeError: a.delayedClick is not a function while loading kendogrid in angular2

86 views

angular2

Skip to first unread message

Navaneetha Krishnan S

unread,

Jun 27, 2016, 3:28:15 PM6/27/16

to AngularJS

I am getting a exception in browser console when I try to load a kendogrid wrapped in angular2 component.

The exception is like below

angular2 component. Empty grid is loaded in the browser and in the browser console, I get the exception like below
TypeError: a.delayedClick is not a function
    at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:35:32027)
    at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:36:11080)
    at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:36:27154)
    at init._attachGroupable (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:49:18710)
    at init._groupable (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:49:18349)
    at new init (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:48:16751)
    at HTMLDivElement.<anonymous> (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:26:4054)
    at Function.each (http://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js:2:2881)
    at n.each (http://kendo.cdn.telerik.com/2016.2.504/js/jquery.min.js:2:846)
    at n.e.fn.(anonymous function) [as kendoGrid] (http://kendo.cdn.telerik.com/2016.2.504/js/kendo.all.min.js:26:4031)

Following are the code/typescript which I am using to load the grid

import {Component } from 'angular2/core';
import { Grid } from './grid';
import { CacheDataService } from '../Service/CacheDataService';

declare var kendo: any;

@Component({
    selector: 'kendo-grid',
    templateUrl: './KendoGrid.html',
    directives: [Grid]
})
export class ExtractorGrid {

    info = "Willkommen";
    options: any;

    constructor() {
        console.log("Inside constructor of ExtractorGrid");
        this.setUpGridOptions();
        console.log("after setUpGridOptions in ExtractorGrid constructor");
    }

    private setUpGridOptions() {
        console.log("Inside setUpGridOptions of ExtractorGrid");

        var dataSource = new kendo.data.DataSource({
            //type: "odata-v4",
            transport: {
                read: "http://localhost:23647/api/extractorqueue/"
            },
            error: function (e) {
                // handle data operation error
                alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            },
            pageSize: 5,
            serverPaging: true,
            serverFiltering: true,
            serverSorting: true,
            batch: false,
            schema: {
                model: {
                    name: "queueId",
                    fields: {
                        queueId: { editable: false, nullable: true },
                        applicationName: {},
                        customerId: {},
                        createdBy: {}
                    }
                }
            }

        });
        console.log("After Datasource extraction in setUpGridOptions");
        console.log("Datasource : " + dataSource);

        this.options = {
            dataSource: dataSource,
            columns: [
                { field: "queueId", title: "queueId", width: "40px" },
                { field: "applicationName", title: "applicationName", width: "200px" },
                { field: "customerId", title: "customerId", width: "120px" },
                { field: "createdBy", title: "createdBy", width: "120px" },
            ],
            pageable: true,
            groupable: true,
            sortable: true,
            selectable: true
        }
    }

}

In Grid.ts

 import { Component, Input, Host, ElementRef, AfterViewInit } from 'angular2/core';

    declare var $: any;

    @Component({
        selector: 'k-grid',
        template: '<div></div>'
    })
    export class Grid implements AfterViewInit {
        constructor( @Host() private elm: ElementRef) {
            console.log("in constructor of Grid");
        }

        @Input() options: any;

        ngAfterViewInit() {
            console.log("in ngAfterViewInit of Grid");
            $(this.elm.nativeElement).children().first().kendoGrid(this.options);
            console.log("after assigning to to kendo");
        }
    }

It is crashing when executing the following line

$(this.elm.nativeElement).children().first().kendoGrid(this.options);