Integrated latest changes at 11-21-2024 10:30:18 PM

Author: SyncfusionBuild

ej2-angular/code-snippet/schedule/data-bind-cs1/src/app.component.ts

@@ -3,7 +3,7 @@ import { BrowserModule } from '@angular/platform-browser'
 import { ScheduleModule } from '@syncfusion/ej2-angular-schedule'
 import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
 import { Component } from '@angular/core';
-import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService } from '@syncfusion/ej2-angular-schedule';
+import { EventSettingsModel, DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService } from '@syncfusion/ej2-angular-schedule';
 
 @Component({
 imports: [

ej2-angular/code-snippet/schedule/default-cs22/src/app.component.ts

@@ -6,7 +6,7 @@ import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
 
 
 import { Component, ViewChild } from '@angular/core';
-import { ScheduleComponent, EventSettingsModel, ActionEventArgs, DayService, WeekService, WorkWeekService, MonthService, EventFieldsMapping, AgendaService } from '@syncfusion/ej2-angular-schedule';
+import { ScheduleComponent, EventSettingsModel, ActionEventArgs, DayService, WeekService, WorkWeekService, MonthService, EventFieldsMapping, AgendaService, MonthAgendaService } from '@syncfusion/ej2-angular-schedule';
 import { scheduleData } from './datasource';
 
 @Component({

ej2-angular/code-snippet/schedule/default-cs23/src/app.component.ts

@@ -6,7 +6,7 @@ import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
 
 
 import { Component, ViewEncapsulation } from '@angular/core';
-import { View, DayService, WeekService, TimelineViewsService, MonthService, WorkWeekService, AgendaService  } from '@syncfusion/ej2-angular-schedule';
+import { View, DayService, WeekService, TimelineViewsService, MonthService, WorkWeekService, AgendaService, MonthAgendaService  } from '@syncfusion/ej2-angular-schedule';
 
 @Component({
 imports: [

ej2-angular/code-snippet/schedule/event-cs17/src/app.component.ts

@@ -14,7 +14,6 @@ import {
 
 @Component({
 imports: [
-        
         ScheduleModule,
         TimePickerModule
     ],
@@ -25,7 +24,7 @@ providers: [DayService,
                 MonthService,
                 AgendaService,
                 MonthAgendaService,
-                TimelineViewsService, TimelineMonthService]],
+                TimelineViewsService, TimelineMonthService],
 standalone: true,
     selector: 'app-root',
     // specifies the template string for the Schedule component

ej2-angular/code-snippet/schedule/header-bar-cs1/src/app.component.ts

@@ -23,7 +23,6 @@ providers: [DayService,
                 MonthAgendaService],
 standalone: true,
     selector: 'app-root',
-    providers: [DayService, WeekService, WorkWeekService],
     // specifies the template string for the Schedule component
     template: `<ejs-schedule width='100%' height='550px' [selectedDate]='selectedDate' [views]='views'[eventSettings]='eventSettings' [showHeaderBar]='showHeaderBar'>
     </ejs-schedule>`

ej2-angular/code-snippet/schedule/localization-cs2/src/app.component.ts

@@ -39,7 +39,6 @@ providers: [DayService,
                 MonthAgendaService],
 standalone: true,
   selector: 'app-root',
-  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService],
   // specifies the template string for the Schedule component
   template: `<ejs-schedule width='100%' height='550px' locale='fr-CH' [selectedDate]='selectedDate'[eventSettings]='eventSettings' [views]='views'></ejs-schedule>`
 })

ej2-angular/code-snippet/schedule/multiple-level-resource-cs1/src/app.component.ts

@@ -7,7 +7,7 @@ import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
 
 import { Component } from "@angular/core";
 import {
-  WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService,DayService,MonthAgendaService,WorkWeekService
+  WeekService, MonthService, AgendaService, TimelineViewsService, TimelineMonthService,DayService,MonthAgendaService,WorkWeekService,
   EventSettingsModel, GroupModel } from "@syncfusion/ej2-angular-schedule";
 import { resourceData } from "./datasource";
 @Component({

ej2-angular/code-snippet/schedule/recur-editor-cs3/src/app.component.ts

@@ -29,7 +29,8 @@ standalone: true,
   <ejs-recurrenceeditor #recurrenceObj [value]="value" (change)="onChange($event)"></ejs-recurrenceeditor>`
 })
 export class AppComponent {
-    @ViewChild('recurrenceObj') public recObject: RecurrenceEditor;
+    @ViewChild('recurrenceObj') public recObject: RecurrenceEditor =
+    new RecurrenceEditor();
     public value = 'FREQ=DAILY;INTERVAL=1';
     public dateArray: string[] = [];
     public selectRule: string = 'Select Rule';

ej2-angular/code-snippet/schedule/resource-grouping-cs4/src/app.component.ts

@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core'
 import { BrowserModule } from '@angular/platform-browser'
 import { ScheduleModule } from '@syncfusion/ej2-angular-schedule'
 import { TimePickerModule } from '@syncfusion/ej2-angular-calendars'
-import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaServicem,  DragAndDropService, View, ScheduleComponent, EventSettingsModel, GroupModel,} from '@syncfusion/ej2-angular-schedule'
+import { DayService, WeekService, WorkWeekService, MonthService, AgendaService, MonthAgendaService,  DragAndDropService, View, ScheduleComponent, EventSettingsModel, GroupModel,} from '@syncfusion/ej2-angular-schedule'
 
 
 

ej2-angular/code-snippet/schedule/weekend-cell-color/src/app.component.ts

@@ -17,7 +17,7 @@ imports: [
     ],
 standalone: true,
   selector: 'app-root',
-  providers: [View, DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService],
+  providers: [DayService, WeekService, WorkWeekService, MonthService, AgendaService, ResizeService, DragAndDropService],
   // specifies the template string for the Schedule component
   template: `<ejs-schedule width='100%' height='650px' cssClass='schedule-cell-customization' [selectedDate]="selectedDate" [eventSettings]="eventSettings"
   [(currentView)]="currentView" (renderCell)="onRenderCell($event)"></ejs-schedule>`,

ej2-angular/code-snippet/tooltip/ajax-content-cs1/package.json

@@ -14,6 +14,7 @@
     "@angular/platform-browser": "17.1.2",
     "@angular/platform-browser-dynamic": "17.1.2",
     "@syncfusion/ej2-angular-popups": "*",
+    "@syncfusion/ej2-angular-lists": "*",
     "@syncfusion/ej2-base": "*",
     "@syncfusion/ej2-angular-base": "*",
     "@angular/animations": "17.1.2",

ej2-angular/code-snippet/tooltip/ajax-content-cs1/src/app.component.ts

@@ -1,26 +1,21 @@
-import { NgModule } from '@angular/core'
-import { BrowserModule } from '@angular/platform-browser'
-import { HttpClientModule } from '@angular/common/http'
-import { TooltipModule } from '@syncfusion/ej2-angular-popups'
+/**
+ * Loading ajax content sample
+ */
 
+import { Component, ViewChild, ViewEncapsulation, Inject } from '@angular/core';
+import {
+  TooltipComponent,
+  TooltipModule,
+} from '@syncfusion/ej2-angular-popups';
+import { TooltipEventArgs } from '@syncfusion/ej2-popups';
+import { HttpClient } from '@angular/common/http';
 
-
-import { Component, ViewChild, Inject } from '@angular/core';
-import { TooltipComponent, TooltipEventArgs } from '@syncfusion/ej2-angular-popups';
-import { HttpClient, HttpClientModule } from '@angular/common/http';
-
+import { ListViewModule } from '@syncfusion/ej2-angular-lists';
+import { HttpClientModule } from '@angular/common/http';
 
 @Component({
-imports: [
-        
-        HttpClientModule,
-        TooltipModule
-    ],
-
-
-standalone: true,
-    selector: 'my-app',
-    template: `
+  selector: 'my-app',
+  template: `
         <div id="tool">
         <h4>National Sports</h4>
         <ejs-tooltip #tooltip id="tooltip" class="e-prevent-select" content='Loading...' target="#countryList [title]"
@@ -39,67 +34,57 @@ standalone: true,
         </ejs-tooltip>
         </div>
         `,
-    styles: [`
-        #countryList {
-          padding: 5px;
-        }
-
-        #countryList ul {
-          list-style-type: none;
-          margin: 0;
-          padding: 0;
-          width: 100px;
-          border: 1px solid #c4c4c4;
-        }
-
-        #countryList li {
-          padding: 10px;
-        }
-
-        #countryList li:hover {
-          background-color: #ececec;
-        }
-
-        .contentWrap {
-          padding: 3px 0;
-          line-height: 16px;
-        }
-
-        .def {
-          float: right;
-        }
-        #tool {
-          width: 350px;
-          position: relative;
-          left: 50%;
-          transform: translateX(-25%);
-        }
-        `]
+  encapsulation: ViewEncapsulation.None,
+  standalone: true,
+  imports: [TooltipModule, ListViewModule, HttpClientModule],
 })
-
 export class AppComponent {
-    @ViewChild('tooltip')
-    public tooltipControl: TooltipComponent | any ;
-    constructor( @Inject(HttpClientModule) public http: HttpClient) { }
-
-    onBeforeRender(args: TooltipEventArgs) {
-        (this as any).http.get('tooltipdata.json')
-            .map((res: { json: () => any; }) => res.json())
-            .subscribe(
-            (result: any) => {
-                for (let i: number = 0; i < result.length; i++) {
-                    if (result[i].Id === args.target.getAttribute('data-content')) {
-                        this.tooltipControl!.content = "<div class='contentWrap'><div class='def'>" + result[i].Sports + "</div></div>";
-                    }
-                }
-                this.tooltipControl!.dataBind();
-            },
-            (err: Response) => {
-                this.tooltipControl!.content = err.statusText;
-                this.tooltipControl!.dataBind();
-            });
-    }
+  //Define an Array of JSON data
+  public listViewData: { [key: string]: Object }[] = [
+    { id: '1', text: 'Australia' },
+    { id: '2', text: 'Bhutan' },
+    { id: '3', text: 'China' },
+    { id: '4', text: 'Cuba' },
+    { id: '5', text: 'India' },
+    { id: '6', text: 'Switzerland' },
+    { id: '7', text: 'United States' },
+  ];
+
+  //Map appropriate columns to fields property
+  public fields: Object = { text: 'text', tooltip: 'id' };
+
+  @ViewChild('tooltip')
+  public tooltipControl!: TooltipComponent;
+
+  constructor(@Inject(HttpClient) public http: HttpClient) {}
+
+  /**
+   * Process tooltip ajax content.
+   */
+
+  onBeforeRender(args: TooltipEventArgs) {
+    this.tooltipControl.content = 'Loading...';
+    this.tooltipControl!.dataBind();
+    this.http.get('assets/tooltipdata.json').subscribe(
+      (result: any) => {
+        for (let i: number = 0; i < result.length; i++) {
+          if (result[i].Id === args.target.getAttribute('data-content')) {
+            /* tslint:disable */
+            this.tooltipControl.content =
+              "<div class='contentWrap'><span class=" +
+              result[i].Class +
+              "></span><div class='def'>" +
+              result[i].Sports +
+              '</div></div>';
+            /* tslint:enable */
+          }
+        }
+        this.tooltipControl!.dataBind();
+      },
+      (err: Response) => {
+        this.tooltipControl.content = err.statusText;
+        this.tooltipControl!.dataBind();
+      }
+    );
+  }
 }
-
-
-

ej2-angular/code-snippet/tooltip/ajax-content-cs1/src/tooltipdata.json renamed to ej2-angular/code-snippet/tooltip/ajax-content-cs1/src/assets/tooltipdata.json

@@ -1,4 +1,39 @@
 
 @import 'node_modules/@syncfusion/ej2-base/styles/material.css';
 @import 'node_modules/@syncfusion/ej2-angular-popups/styles/material.css';
-@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
+
+#countryList {
+    padding: 5px;
+}
+
+#countryList ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    width: 100px;
+    border: 1px solid #c4c4c4;
+}
+
+#countryList li {
+    padding: 10px;
+}
+
+#countryList li:hover {
+    background-color: #ececec;
+}
+
+.contentWrap {
+    padding: 3px 0;
+    line-height: 16px;
+}
+
+.def {
+    float: right;
+}
+#tool {
+    width: 350px;
+    position: relative;
+    left: 50%;
+    transform: translateX(-25%);
+}