[ANGULAR] How to Export SchedulerPRO Data as json

[NARESH.RAI]

Hi,

How could we export scheduler data as JSON and import again in scheduler Pro component.
Which includes events / assignments / resources / dependencies etc..

Thanks

[saki]

For both flat stores or tree stores it is possible to retrieve the data of all records in JSON format:

const jsonString = store.json; // returns string
// or
const jsonArray = store.toJSON(); // returns JavaScript object

To plug the JSON data back in later:

store.data = JSON.parse(jsonString);
// or
store.data = jsonArray;

In Angular, you can also bind properties of the wrapper such as events, resources, dependencies, assignments, etc. in Angular template. Therefore, it is easy to use Angular default way to get and parse data from the server and set it as local/class variables to get the Bryntum components populated.

There is an Angular demo (angular-7) that demonstrates this approach in Calendar 4.0.0-beta-2. Although this is demo for Calendar, the approach would be same for SchedulerPro.

The simplified app.component.ts of that demo is:

interface CalendarData {
  success: boolean;
  events: { rows: Array<Object> };
  resources: { rows: Array<Object> };
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent implements AfterViewInit {
  @ViewChild(CalendarComponent) calendar: CalendarComponent;

  // calendar configuration
  calendarConfig = calendarConfig;

  // events and resources bound to in template
  events: Array<Object>;
  resources: Array<Object>;

  // inject HttpClient
  constructor(private http: HttpClient) {}

  /**
   * Called after View is initialized
   */
  ngAfterViewInit(): void {
    this.http
      .get<CalendarData>('assets/data/data.json')
      .subscribe((data: CalendarData) => {
        this.resources = data.resources.rows;
        this.events = data.events.rows;
      });
  }
}

and simplified app.component.html:

<bry-calendar
  [events]              = "events"
  [resources]           = "resources"
  [eventTooltipFeature] = "calendarConfig.features.eventTooltip"
  [date]                = "calendarConfig.date"
  [modes]               = "calendarConfig.modes"
></bry-calendar>

[NARESH.RAI]

Hello,

Trying to get json import / export on scheduler Pro using below code

const jsonData = this.scheduler.schedulerInstance.eventStore.json;
 this.scheduler.schedulerInstance.eventStore.data = JSON.parse(jsonData);

I am able to export json data but its not working when i am importing same data again.

[fabio.mazza]

Hi Naresh,

To try reproduce the problem I have tested on our resource-histogram demo on Scheduler Pro changing method onZoonIn on line 37 of the file SchedulerPro/examples/frameworks/angular/resource-histogram/src/app/app.component.ts to:

onZoomIn = ({ source: button }) => {
    const jsonData = this.scheduler.schedulerInstance.eventStore.json;
    this.scheduler.schedulerInstance.eventStore.data = JSON.parse(jsonData);
  };

Then when I click on button Zoom In (+) on top header app, it load the data without problem and no problem visually.

Do you have a specific test case to reproduce it if your is little different of the demo quoted above?

Thank you!