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
I can assume that this is a duplicate of the ticket that was sent through our support system.
As the answer was already received on that ticket, I will consider this forum thread as resolved.
Let me know if my assumption is not correct.
Regards,
Stefan
Telerik
Rank 2
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
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.
Stefan
Telerik by Progress
Rank 2
Hi Stefan,
Thanks for the reply. I resolved my issue. There appears to be a conflict between javascript in Telerik's WebResource.axd for this control and Knockout.js. In my case, I had a reference to knockout on the page, but did not need it. Removing this reference fixed the error.
Thanks,
Mark