This is a migrated thread and some comments may be shown as answers.

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

4 Answers 791 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Krishnan asked on 27 Jun 2016, 05:59 PM

I am getting a exception in browser console when I try to load a kendogrid using

angular2 component. Empty grid is loaded in the browser and in the browser console, I get the exception like below ypeError: 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);

any ideas why this exceptions is happening?

4 Answers, 1 is accepted

answered on 11 Oct 2016, 03:35 PM

What was the answer? I'm getting the same error message while trying to load the Telerik Gantt control.

Uncaught TypeError: A.delayedClick is not a function in /Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsm_TSM&compress=1&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a7dd8b7c5-dd18-48e6-97c2-5a5a060b2752%3aea597d4b%3ab25378d2%3bTelerik.Web.UI%2c+Version%3d2016.2.607.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3afb63f838-b932-4810-8e72-f1ca43eff960%3a16e4e7cd%3aed16cbdc%3a33715776%3af7645509%3a24ee1bba%3a1e771326%3ac128760b%3a88144a7a%3a78b9daca%3ae330518b%3a2003d0b8%3ac8618e41%3ae4f8f289%3a1a73651d%3a333f8d94%3af46195d3%3a874f8ea2%3ab2e06756%3a92fe8ea0%3a19620875%3afa31b949%3a4877f69a%3a490a9d4e%3abd8f85e4%3a8e6f0d33%3a1f3a7489%3a4cd1fec6%3ac442ac3f%3aec7335e%3ad944e0f6%3a2e4adfe5%3ab4bec146%3a1611ddf4%3a71188da4%3a91601014%3adf33a150%3ab8838b3a%3a3faf1394%3a69667591%3ac147153f%3a70355d8a%3adf920fbf%3aa4c22f0d%3a45bb9805%3abbd55634%3a2f872eeb%3ae933cde3%3a34270c50%3adc8713c7%3adf12185d%3afc0998fb%3aa7e79140%3a9151b61d%3acda80b3%3a11a04f7e%3ae524c98b%3a58366029%3addbfcb67%3a7938962c%3a6d43f6d9%3a52af31a4%3a5fa37e7e

answered on 12 Oct 2016, 10:08 AM

Hello Mark,

The mentioned error can be caused by different factors, in the mentioned scenario it was related to the Kendo UI Grid and the implementation had to be changed in general in order to achieve the desired result.

Please have in mind that Kendo UI for Angular 2 is a new and separate product, currently in beta stage and free for use and community preview. We will release a commercial offering in 2017 and that will also include dedicated support service.

In the meantime, the Community & Support page outlines the available options to receive technical assistance via StackOverflow or Telerik Professional Services, or report issues and provide feedback in our kendo-angular2 GitHub repository.

Stay tuned and keep an eye on our Kendo UI for Angular 2 site and the roadmap, the Telerik blogs (specifically, the Kendo UI Product Manager posts) and GitHub repository for updates.

Regards,
Stefan
Telerik by Progress

Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.