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

5 posts, 0 answers
  1. Krishnan
    Krishnan avatar
    7 posts
    Member since:
    May 2016

    Posted 27 Jun Link to this post

    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?

  2. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 30 Jun Link to this post

    Hello Krishnan,

    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
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 11 Oct in reply to Stefan Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    264 posts

    Posted 12 Oct Link to this post

    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.
     
  6. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 12 Oct in reply to Stefan Link to this post

    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

Back to Top
Kendo UI is VS 2017 Ready