jQWidgets Forums
jQuery UI Widgets › Forums › Angular › Scheduler : Cannot read property 'dataAdapter' of undefined
This topic contains 1 reply, has 2 voices, and was last updated by Peter Stoev 8 years, 1 month ago.
-
Author
-
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);
Hi Oussama,
That error means that URLs to required files such as jqxdata.js are either missing or wrong.
Regards,
Peter Stoev -
AuthorPosts
You must be logged in to reply to this topic.