jQWidgets Forums

jQuery UI Widgets Forums Angular Scheduler : Cannot read property 'dataAdapter' of undefined

Tagged: ,

This topic contains 1 reply, has 2 voices, and was last updated by  Peter Stoev 8 years, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author

  • Oussama
    Participant

    When trying to integrate the angular_jqxscheduler i got this error : “Cannot read property ‘dataAdapter’ of undefined”.
    those are my files :
    //—————————————————————–
    scheduler.component.ts
    //—————————————————————–
    /// <reference path=”../used/jqwidgets.d.ts” />
    import { Component, ViewChild, AfterViewInit } from ‘@angular/core’;
    import { jqxSchedulerComponent } from ‘../used/angular_jqxscheduler’;

    @Component({
    selector: ‘scheduler-app’,
    template: <jqxScheduler #schedulerReference></jqxScheduler>
    })

    export class SchedulerComponent implements AfterViewInit
    {
    @ViewChild(‘schedulerReference’) scheduler: jqxSchedulerComponent;

    ngAfterViewInit(): void
    {
    this.scheduler.createComponent(this.schedulerSettings);
    this.scheduler.ensureAppointmentVisible(‘id1’);
    }

    generateAppointments(): any
    {
    let appointments = new Array();

    let appointment1 = {
    id: “id1”,
    description: “George brings projector for presentations.”,
    location: “”,
    subject: “Quarterly Project Review Meeting”,
    calendar: “Room 1”,
    start: new Date(2016, 10, 23, 9, 0, 0),
    end: new Date(2016, 10, 23, 16, 0, 0)
    };
    appointments.push(appointment1);
    return appointments;
    }

    source =
    {
    dataType: “array”,
    dataFields: [
    { name: ‘id’, type: ‘string’ },
    { name: ‘description’, type: ‘string’ },
    { name: ‘location’, type: ‘string’ },
    { name: ‘subject’, type: ‘string’ },
    { name: ‘calendar’, type: ‘string’ },
    { name: ‘start’, type: ‘date’ },
    { name: ‘end’, type: ‘date’ }
    ],
    id: ‘id’,
    localData: this.generateAppointments()
    }

    dataAdapter = new $.jqx.dataAdapter(this.source);

    schedulerSettings: jqwidgets.SchedulerOptions =
    {
    date: new $.jqx.date(2016, 11, 23),
    width: 800,
    height: 600,
    source: this.dataAdapter,
    view: ‘weekView’,
    showLegend: true,
    appointmentDataFields:
    {
    from: “start”,
    to: “end”,
    id: “id”,
    description: “description”,
    location: “location”,
    subject: “subject”,
    resourceId: “calendar”,
    },
    resources:
    {
    colorScheme: “scheme05”,
    dataField: “calendar”,
    source: new $.jqx.dataAdapter(this.source)
    },
    views:
    [
    ‘dayView’,
    ‘weekView’,
    ‘monthView’
    ]
    };
    }

    //—————————————————————–
    components-routing.module.ts
    //—————————————————————–
    import { NgModule } from ‘@angular/core’;
    import { Routes, RouterModule } from ‘@angular/router’;
    import { SchedulerComponent } from ‘./scheduler.component’;

    const routes: Routes = [
    {
    path: ”,
    data: {
    title: ‘Components’
    },
    children: [
    {
    path: ‘scheduler’,
    component: SchedulerComponent,
    data: {
    title: ‘Scheduler’
    }
    },
    ]
    }
    ];

    @NgModule({
    imports: [RouterModule.forChild(routes)],
    exports: [RouterModule]
    })
    export class ComponentsRoutingModule {}

    //————————————————
    components.module.ts
    //————————————————
    import { NgModule } from ‘@angular/core’;
    import { ComponentsRoutingModule } from ‘./components-routing.module’;
    import { ModalModule } from ‘ng2-bootstrap/modal’;

    import { SchedulerComponent } from ‘./scheduler.component’;
    import { jqxSchedulerComponent } from “../used/angular_jqxscheduler”;

    @NgModule({
    imports: [
    ComponentsRoutingModule,
    ModalModule.forRoot(),
    TabsModule,
    ],
    declarations: [
    SchedulerComponent,
    jqxSchedulerComponent
    ]
    })
    export class ComponentsModule { }

    //———————————————–
    app.component.ts
    //———————————————–
    import { Component } from ‘@angular/core’;

    @Component({
    selector: ‘body’,
    template: ‘<router-outlet></router-outlet>’
    })
    export class AppComponent { }

    //———————————————–
    app.module.ts
    //———————————————–
    import { NgModule } from ‘@angular/core’;
    import { BrowserModule } from ‘@angular/platform-browser’;
    import { LocationStrategy, HashLocationStrategy } from ‘@angular/common’;
    import { AppComponent } from ‘./app.component’;
    import { AppRoutingModule } from ‘./app.routing’;

    @NgModule({
    imports: [
    BrowserModule,
    AppRoutingModule,
    DropdownModule.forRoot(),
    TabsModule.forRoot(),
    ],
    declarations: [
    AppComponent,
    ],
    providers: [{
    provide: LocationStrategy,
    useClass: HashLocationStrategy
    }],
    bootstrap: [ AppComponent ]
    })
    export class AppModule { }

    //————————————————-
    app.routing.ts
    //————————————————-
    import { NgModule } from ‘@angular/core’;
    import { Routes, RouterModule } from ‘@angular/router’;
    import { FullLayoutComponent } from ‘./layouts/full-layout.component’;

    export const routes: Routes = [
    {
    path: ”,
    redirectTo: ‘home’,
    pathMatch: ‘full’,
    },
    {
    path: ”,
    component: FullLayoutComponent,
    data: {
    title: ‘Accueil’
    },
    children: [
    {
    path: ‘components’,
    loadChildren: ‘./components/components.module#ComponentsModule’
    }
    ]
    }
    ];

    @NgModule({
    imports: [ RouterModule.forRoot(routes) ],
    exports: [ RouterModule ]
    })
    export class AppRoutingModule {}

    //——————————————————-
    index.ts
    //——————————————————-
    export * from ‘./app.component’;
    export * from ‘./app.module’;

    //——————————————————-
    main.ts
    //——————————————————-
    import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
    import { AppModule } from ‘./app.module’;

    const platform = platformBrowserDynamic();
    platform.bootstrapModule(AppModule);

    //——————————————————–
    index.html
    //——————————————————–
    <!doctype html>
    <html>
    <head>
    <base href=”./”>
    <meta charset=”utf-8″>
    </head>
    <body>
    <script>
    window.__theme = ‘bs4’;
    </script>

    <!– App Loading… –>
    </body>
    </html>

    //———————————————-
    main.ts
    //———————————————–
    import ‘./polyfills.ts’;

    import { platformBrowserDynamic } from ‘@angular/platform-browser-dynamic’;
    import { enableProdMode } from ‘@angular/core’;
    import { environment } from ‘./environments/environment’;
    import { AppModule } from ‘./app/’;

    if (environment.production) {
    enableProdMode();
    }

    platformBrowserDynamic().bootstrapModule(AppModule);


    Peter Stoev
    Keymaster

    Hi Oussama,

    That error means that URLs to required files such as jqxdata.js are either missing or wrong.

    Regards,
    Peter Stoev

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.