syncfusion / ej2-angular-ui-components

Syncfusion Angular UI components library offer more than 50+ cross-browser, responsive, and lightweight angular UI controls for building modern web applications.

Syncfusion Angular UI Components Library (Essential JS 2)

Syncfusion Angular UI Components library has been built from the ground up to be lightweight, responsive, modular and touch friendly. It offers 70+ UI components that every applications will ever need.

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA (https://www.syncfusion.com/eula/es/). To acquire a license, you can purchase one at https://www.syncfusion.com/sales/products or start a free 30-day trial here (https://www.syncfusion.com/account/manage-trials/start-trials).

A free community license (https://www.syncfusion.com/products/communitylicense) is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Resources

• Getting Started
• View Online Demos
• Product Page

Framework highlights

Lightweight and user friendly

The entire library is built from scratch to be lightweight and modular. Its footprint can be reduced further by including only the specific components and features your application requires.

Modular architecture

All components have been built as modules to enable selective referencing, so only the components and features you need are included in your application.

Built for performance

Performance is critical for delivering a good user experience. We ensure that all our components are designed and built to achieve the best performance possible.

Responsive and touch friendly

All the components are touch friendly and render adaptively based on the device they are on to provide optimal usage experience on phones, tablets and desktops.

Stunning built-in themes

Pixel-perfect built-in themes are available in material, bootstrap and fabric design. In addition, it comes with Accessible high-contrast theme and an online tool "Theme Studio" to customize the provided built-in themes.

Globalization simplified

Easily build applications to be used by a global audience in various language and culture settings.

Stay current

With our commitment to at least four major updates per year, you receive the most up-to-date functionality and new components in addition to monthly service packs and bug fixes. Custom patches are available as needed.

Control List

Grids

Data Grid		Source	Live demo	Documentation
Pivot Table		Source	Live demo	Documentation
Spreadsheet		Source	Live demo	Documentation
Tree Grid		Source	Live demo	Documentation

Editors

In-place Editor		Source	Live demo	Documentation
Rich Text Editor		Source	Live demo	Documentation
Word Processor		Source	Live demo	Documentation

Dropdowns

AutoComplete		Source	Live demo	Documentation
ComboBox		Source	Live demo	Documentation
Dropdown List		Source	Live demo	Documentation
Dropdown Tree		Source	Live demo	Documentation
List Box		Source	Live demo	Documentation
MultiSelect Dropdown		Source	Live demo	Documentation

Inputs

Checkbox		Source	Live demo	Documentation
Radio Button		Source	Live demo	Documentation
Toggle Switch Button		Source	Live demo	Documentation
Color Picker		Source	Live demo	Documentation
File Upload		Source	Live demo	Documentation
Input Mask		Source	Live demo	Documentation
Numeric Textbox		Source	Live demo	Documentation
Range Slider		Source	Live demo	Documentation
TextBox		Source	Live demo	Documentation
Signature		Source	Live demo	Documentation

Data Visualization

Barcode Generator		Source	Live demo	Documentation
Circular Gauge		Source	Live demo	Documentation
Diagram		Source	Live demo	Documentation
HeatMap Chart		Source	Live demo	Documentation
Kanban		Source	Live demo	Documentation
Linear Gauge		Source	Live demo	Documentation
Maps		Source	Live demo	Documentation
TreeMap		Source	Live demo	Documentation
Bullet Chart		Source	Live demo	Documentation
Charts		Source	Live demo	Documentation
Range Selector		Source	Live demo	Documentation
Smith Chart		Source	Live demo	Documentation
Sparkline Charts		Source	Live demo	Documentation
Stock Chart		Source	Live demo	Documentation

Calendars

Calendar		Source	Live demo	Documentation
DatePicker		Source	Live demo	Documentation
DateRangePicker		Source	Live demo	Documentation
DateTime Picker		Source	Live demo	Documentation
TimePicker		Source	Live demo	Documentation
Gantt Chart		Source	Live demo	Documentation
Scheduler		Source	Live demo	Documentation

Navigation

Accordion		Source	Live demo	Documentation
Breadcrumb		Source	Live demo	Documentation
Carousel		Source	Live demo	Documentation
Context Menu		Source	Live demo	Documentation
Menu Bar		Source	Live demo	Documentation
Sidebar		Source	Live demo	Documentation
Tabs		Source	Live demo	Documentation
Toolbar		Source	Live demo	Documentation
TreeView		Source	Live demo	Documentation
File Manager		Source	Live demo	Documentation

Buttons

Button		Source	Live demo	Documentation
Chips		Source	Live demo	Documentation
Button Group		Source	Live demo	Documentation
Dropdown Menu		Source	Live demo	Documentation
Progress Button		Source	Live demo	Documentation
Split Button		Source	Live demo	Documentation

Layout

Avatar		Styles	Live demo	Documentation
Card		Styles	Live demo	Documentation
Dashboard Layout		Source	Live demo	Documentation
Splitter		Source	Live demo	Documentation
Dialog		Source	Live demo	Documentation
Tooltip		Source	Live demo	Documentation
ListView		Source	Live demo	Documentation

Notification

Badge		Styles	Live demo	Documentation
Toast		Source	Live demo	Documentation
Progress Bar		Source	Live demo	Documentation

Forms

Query Builder UI

Source

Live demo

Documentation

Viewer

PDF Viewer

Source

Live demo

Documentation

Supported Frameworks

The Syncfusion Essential JS 2 is also offered in following list of frameworks.

• JavaScript
• React
• Vue.js
• ASP.NET Core
• ASP.NET MVC

Showcase Applications

• Diagram Builder
• Expense Tracker
• Loan Calculator
• Stock Chart
• Web Mail

Support

Product support is available for through following mediums.

• Creating incident in Syncfusion Direct-trac support system or Community forum.
• New GitHub issue.
• Ask your query in Stack Overflow with tag syncfusion and ej2.

License

Check the license detail here.

Changelog

Check the changelog here © Copyright 2022 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.

ej2-angular-ui-components's Issues

Change the days format from 'Su' to 'Sun'

Hello Team,

I want to change the current day's format(Su, Mo, Tu, We, Th, Fr, Sa) to (Sun, Mon, Tue, Wed, Thu, Fri, Sat).

Please help ASAP.

Thanks in advance.

DataGrid .getPersistData() makes editing broken

public getGridPersistData() {
    const persistData = this.gridObj.getPersistData();
    this.persistData = JSON.parse(persistData);
    console.log('getPersistData', JSON.parse(persistData));
 }

After i call this function and I double-click on grid row to edit it I get this error:

If I comment the row: this.gridObj.getPersistData(); everything seems to work fine.

Date range selected without click on "Apply" button

Hello Team,

My date was selected if I select the date range and clicked outside the date range picker. Is there any method so that my date will be select only when I press apply button.

Please response ASAP. I got stuck into this.

Thanks in Advance.

Getting this error after deleting node modules and reinstall.

ERROR in node_modules/@syncfusion/ej2-splitbuttons/src/split-button/split-button.d.ts(85,5): error TS2424: Class 'DropDownButton' defines instance member function 'click', but extended class 'SplitButton' defines it as instance member property.

partial object node data on event or getNode methode (treeview)

Hi all,

I have found a bug or an evolution with the angular version of Treeview. When i set inside tree the fields value to display my node inside a tree, i can used extra stuff set inside field bject in the ng-template (first code), but when the node select event is fire, inside the controller with the methode $event.nodeData the bject return contains only the field attribute, it's partial :/. i have try with get tree with @viewchield and use the method getNode("id") got i get the same result like nodeSelect event nodeData.

It's possible to get the all valued node inside the controller ?

 <ejs-treeview #uniteTree class="tree-light col-4" id="checkbox" [showCheckBox]='false'
            [allowMultiSelection]='false' (nodeSelected)="activate($event)"
            (dataSourceChanged)="changeDataSource($event)">
            <ng-template #nodeTemplate="" let-data="">   

<!-- full object node like defined in controller -->

                <span [ngSwitch]="data.type" *ngIf="data.active">
                    <fa-icon *ngSwitchCase="'UNITE'" [icon]="'users'" class="icon-success"></fa-icon>
                    <fa-icon *ngSwitchCase="'ENTREPRISE'" [icon]="['far','building']" class="icon-success"></fa-icon>
                    <fa-icon *ngSwitchCase="'ETABLISSEMENT'" [icon]="'building'" class="icon-success"></fa-icon>
                </span>

                <span [ngSwitch]="data.type" *ngIf="!data.active">
                    <fa-icon *ngSwitchCase="'UNITE'" [icon]="'users'" class="icon-danger"></fa-icon>
                    <fa-icon *ngSwitchCase="'ENTREPRISE'" [icon]="['far','building']" class="icon-danger"></fa-icon>
                    <fa-icon *ngSwitchCase="'ETABLISSEMENT'" [icon]="'building'" class="icon-danger"></fa-icon>
                </span>
                <span>{{ data.label }}</span>
            </ng-template>

@ViewChild('uniteTree') public treeObj: TreeViewComponent;

create field with some extra value
this.field = {
                dataSource: this.nodes,
                id: 'uniteId',
                text: 'label',
                child: 'children',
                type: 'type',
                labelParent: 'labelParent',
                active: 'active'
            };
            this.treeObj.fields = this.field;


activate($event) {
        this.selectedNode = $event.nodeData;  // => partial object node with field attribute only
        //some stuff

this.treeObj.getNode("1"); // => partial object node with field attribute only
    }

ejs-dashboardlayout panel content

Hello team,

Is there any way to add angular component as a panel content ?

for example like this:

let panel: PanelModel[] = [{
    'id': this.count.toString(), 'sizeX': 1, 'sizeY': 1, 'row': 0, 'col': 0,
    content: CounterComponent
}];
this.dashboard.addPanel(panel[0]);

if not, is there another way ? I want to add component when user click on bottom

Best Regards

when opening word document in document editor I got this message Failed to load the file

Show cross icon when date picker field is not focued

Hello Team,

I need to disable the date picker text but the user can open the date picker when they click on the calendar icon. Cross icon will also show in the text field when the date is selected in the read-only mode. Please reply ASAP.

Thanks in advance.

this.parent.dataSource.values is undefined on Angular Pivot View when getting remote data

Typescript Version: 3.2.4
Angular version: ^7.2.15
Syncfusion Version: ^17.1.49
Pivot Grid Version: ^17.1.39

The code below is my onInit method which is taken straight from the demo. This was working as of 17.1.41 but now has magically stopped working. This issue is also on the StackBlitz example.

ngOnInit() {
    let data: DataManager;
    data = new DataManager({
      url: this._controllerUrl + "/billing/extract",
      adaptor: new WebApiAdaptor(),
      crossDomain: true,
      headers: [
        {
          "Content-Type": "application/json",
          Accept: "application/json",
          Authorization: "Bearer " + this.token
        }
      ]
    });

    this.dataSource = {
      enableSorting: true,
      columns: [{ name: "Year" }, { name: "Month" }],
      values: [{ name: "Cost", caption: "Cost (GBP)" }],
      data: data,
      rows: [{ name: "ServiceId" }],
      formatSettings: [],
      expandAll: false,
      filters: []
    };
    this.button = new Button({ isPrimary: true });
    this.button.appendTo("#export");

    this.button.element.onclick = (): void => {
      this.pivotGridObj.excelExport();
    };
  }

Here is the full error in Firefox:

ERROR Error: "Uncaught (in promise): TypeError: this.parent.dataSource.values is undefined
./node_modules/@syncfusion/ej2-pivotview/src/common/grouping-bar/axis-field-renderer.js/AxisFields.prototype.createPivotButtons@http://localhost:4200/views-billing-billing-module.js:197167:17
./node_modules/@syncfusion/ej2-pivotview/src/common/grouping-bar/axis-field-renderer.js/AxisFields.prototype.render@http://localhost:4200/views-billing-billing-module.js:197143:14
./node_modules/@syncfusion/ej2-pivotview/src/common/grouping-bar/grouping-bar.js/GroupingBar.prototype.appendToElement@http://localhost:4200/views-billing-billing-module.js:197347:49
./node_modules/@syncfusion/ej2-base/src/observer.js/Observer.prototype.notify@http://localhost:4200/views-billing-billing-module.js:10781:25
./node_modules/@syncfusion/ej2-base/src/component.js/Component.prototype.notify@http://localhost:4200/views-billing-billing-module.js:5505:32
./node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js/PivotView.prototype.renderPivotGrid@http://localhost:4200/views-billing-billing-module.js:204990:18
./node_modules/@syncfusion/ej2-base/src/observer.js/Observer.prototype.notify@http://localhost:4200/views-billing-billing-module.js:10781:25
./node_modules/@syncfusion/ej2-base/src/component.js/Component.prototype.notify@http://localhost:4200/views-billing-billing-module.js:5505:32
./node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js/PivotView.prototype.initEngine@http://localhost:4200/views-billing-billing-module.js:206000:14
./node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js/PivotView.prototype.executeQuery@http://localhost:4200/views-billing-billing-module.js:206047:14
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:7688:26
onInvoke@http://localhost:4200/vendor.js:82616:33
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invoke@http://localhost:4200/polyfills.js:7687:52
./node_modules/zone.js/dist/zone.js/</Zone.prototype.run@http://localhost:4200/polyfills.js:7447:43
scheduleResolveOrReject/<@http://localhost:4200/polyfills.js:8186:34
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:7720:31
onInvokeTask@http://localhost:4200/vendor.js:82607:33
./node_modules/zone.js/dist/zone.js/</ZoneDelegate.prototype.invokeTask@http://localhost:4200/polyfills.js:7719:60
./node_modules/zone.js/dist/zone.js/</Zone.prototype.runTask@http://localhost:4200/polyfills.js:7492:47
drainMicroTaskQueue@http://localhost:4200/polyfills.js:7898:35
./node_modules/zone.js/dist/zone.js/</ZoneTask.invokeTask@http://localhost:4200/polyfills.js:7799:21
invokeTask@http://localhost:4200/polyfills.js:9041:14
globalZoneAwareCallback@http://localhost:4200/polyfills.js:9067:17

Here is the full error in Chrome/Edge

core.js:15724 ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'length' of undefined
TypeError: Cannot read property 'length' of undefined
    at AxisFields.push../node_modules/@syncfusion/ej2-pivotview/src/common/grouping-bar/axis-field-renderer.js.AxisFields.createPivotButtons (axis-field-renderer.js:45)
    at AxisFields.push../node_modules/@syncfusion/ej2-pivotview/src/common/grouping-bar/axis-field-renderer.js.AxisFields.render (axis-field-renderer.js:21)
    at GroupingBar.push../node_modules/@syncfusion/ej2-pivotview/src/common/grouping-bar/grouping-bar.js.GroupingBar.appendToElement (grouping-bar.js:142)
    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:89)
    at PivotViewComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:188)
    at PivotViewComponent.push../node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js.PivotView.renderPivotGrid (pivotview.js:881)
    at Observer.push../node_modules/@syncfusion/ej2-base/src/observer.js.Observer.notify (observer.js:89)
    at PivotViewComponent.push../node_modules/@syncfusion/ej2-base/src/component.js.Component.notify (component.js:188)
    at PivotViewComponent.push../node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js.PivotView.initEngine (pivotview.js:1891)
    at PivotViewComponent.push../node_modules/@syncfusion/ej2-pivotview/src/pivotview/base/pivotview.js.PivotView.executeQuery (pivotview.js:1938)
    at resolvePromise (zone.js:831)
    at zone.js:896
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17290)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:502)
    at invokeTask (zone.js:1744)
    at XMLHttpRequest.globalZoneAwareCallback (zone.js:1770)

The weird thing about this, is that if I use a subset of the data that is coming back from the server and set it locally, it all works.

Here is an image of the request that I am making with the response and the data. I'm not sure if this is something that I can fix as this may be a bug with the DataManager.

I have tried reverting back to the previous version that I used, but there still seems to be the same problem.

Grid does not reflect template changes

What is the expected behavior?

Grid component should reflect angular template changes

What is the current behavior?

Grid markup is broken after its template has been changed

What are the steps to reproduce?

https://stackblitz.com/edit/angular-zywrxz

Package versions:

"@syncfusion/ej2-angular-grids": "^16.4.44",
"@angular/animations": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0",

ej2-angular-dropdowns": "^17.1.49" `change` event bug

Version: "@syncfusion/ej2-angular-dropdowns": "^17.1.49"

Replicated Version: https://stackblitz.com/edit/angular-4dy9dk

Replication Steps:
open select modal, select a country, press outside, check console.logs you shall see changed!

open select modal, select a country, and press ON the MULTI-SELECT FIELD

Expected: console.logs should show changed!

Currently Occuring: nothing in console.logs, change event not triggered / detected

Multiselect Dropdown groupTemplate not working

query 1: How can i achieve that when using CheckBox mode AND grouping in Multiselect-dropdown component.. I would see check-boxes also on group items. So that when I select a grouping item the component will select all of the items in that group. (this was possible in ej1)

query 2: If query 1 cannot be achieved then I would like to use groupTemplate. I tried it and it doesnt seem to work..

example:

<ejs-multiselect
  #xyzMultiselectDropdown
  [dataSource]='dataSource'
  [fields]='fields'
  [value]="value"
  [mode]='mode'
  [placeholder]='placeholder'
  [popupHeight]="popupHeight"
  [closePopupOnSelect]="false"
  [showSelectAll]="showSelectAll"

  (select)="select($event)"
  (change)="change($event)"
  (blur)="blur($event)"
  (removed)="removed($event)"
  (actionComplete)="actionComplete($event)"
>
  <!--TEMPLATES-->
  <ng-template #groupTemplate="" let-data="">
    <span (click)="myFunction();">{{data.name}}</span>
  </ng-template>

</ejs-multiselect>

STOP ADVERTISING ON VISUAL STUDIO

You are corrupt. You are exploiting the search system in the Visual Studio Extensions and Updates window to advertise these crap products.

Searching for "react", for example, in Visual Studio, gives you 3 pages full of these garbage, polluting the results on purpose.

Change the date format

Hello Team,

I'm using below code to change the format of start and end date in date range picker, but it doesn't work. Please guide me on what's going wrong.

HTML:

<ejs-daterangepicker
#ejDatePicker
id="dateRangePicker"
[format]="dateFormat"
placeholder="Filter by date range"
formControlName="daterange"
name="daterange">

TS:
this.dateFormat = 'EEE, MMM d';

Note: I want 'Thu, Apr 18' (EEE, MMM d) format.

Thanks in advance.

Pivot Grid - Caluculated Field - Display 0 by default

Hi Team,
Pivot Grid is showing empty by default in CalculatedFields when there is no appropriate value.

Example: Sales: 2000 and Locations: 2500 (Format: C0)
Calculated Field: SUM(Sales) / SUM (Locations)
Expected Value: 0 (because format is C0)

Actual Value: empty

thank you

How to fix Drag-Drop styling?

Hello, I included a rowDDservice into GRID and set "allowRowDragAndDrop" to TRUE but the styling just doesn't work for me like in your examples.
my Case:

As you can see in the first column the dotts are missing and in row that is being edited the columns are not aligned the right way.

If I disable drag and drop everything looks alright.

Schedule readonly appointments should not be deleted with Delete key

Expected behavior:
According to the documentation, readonly appointments should not be able to be altered by any CRUD action.

Current behavior:
On pressing Delete key the normal delete popup shows which enables you to delete the readonly appointment.

I have made the following workaround:

public onPopupOpen(args: PopupOpenEventArgs): void {
    // Cancel the delete popup event if the event is readonly
    let data: any = args.data;
    if (args.type == "DeleteAlert") {
      if (data.event["IsReadonly"]) {
        args.cancel = true;
      }
    }
  }

ej2-angular-schedule: 16.4.55

Can we expect this being added in the future updates, or is this workaround the expected thing to do?

Usage of ejs-grid component leads to memory leak

There is a leaky problem

Here is example: https://stackblitz.com/edit/angular-ejs-grid-memleak

Clicking on button toggles HelloComponent init/destroy (which may be seen in devtools console). HelloComponent template includes ejs-grid:

<h2>Grid here</h2>
<ejs-grid></ejs-grid>

Number on button (count of HelloComponent initializations) is the same as number of class instances in heap snapshot (garbage was preliminarily collected):

Scroll the screen when date-range picker open

Hello Team,

I want to scroll the screen when the date-range picker is open. Below is the sample link of my requirement. Please note that I'm using the date-range picker not date picker.
date-range-picker.mov.zip

Thanks in Advance.

material-dark CSS Theme

Your shipped material-dark CSS theme does not work.
node_modules/@syncfusion/ej2-layouts/styles/material-dark.css
Declares white backgrounds for the .e-card Class.

My Version is: "@syncfusion/ej2-layouts": "^16.4.47",

Draggable dialog with target inside scrollable area

It seems that drag functionality for dialogs breaks when they're attached to certain target area that's placed inside a scrollable (and scrolled) parent.

Example:

https://stackblitz.com/edit/angular-f88pgc

Can't update @syncfusion/ej2-angular-pdfviewer

Currently I have installed version 17.1.47,
when trying to update to 17.1.50 I get this error:

yarn upgrade @syncfusion/ej2-angular-pdfviewer

yarn upgrade v1.16.0
[1/4] Resolving packages...
error Couldn't find package "@syncfusion/ej2-drawings@~undefined" required by 
"@syncfusion/[email protected]" on the "npm" registry.

Need to show two consecutive months in date-range picker

Hello Team,

I want to show two consecutive months in the date-range picker. Please let me know how I can achieve this. I also attached my requirement.

Thanks in Advance.

Dropdown list inside scrollable area

When scrolling the parent of a dropdown list in open state, the list moves to follow the anchor element. It keeps moving when anchor is scrolled out of visible area which looks bad.

Shouldn't it disappar/close in such case? Or maybe behave like native select element where list disappears on scroll?

Example:

https://stackblitz.com/edit/angular-qkainc

<ejs-textbox> focus handling not working

Please note, that following is not working:

<ejs-textbox
        [formControlName]="'someControlName'"
        [floatLabelType]="'Always'"
        [placeholder]="'Placeholder text'"
        [type]="'text'"
        (focus)="alert('focused')"
></ejs-textbox>

Focus event is not firing alert.

documenteditor top ribbon right and left arrows are not working in RTL

Add chevron icon when open date-range picker

Hello Team,

I added the chevron icon when the date range picker open. It looks ok when the date range picker opens below the filter button but it does not look ok when the date range picker opens above the filter button. I added two images for your reference.

Your quick response is highly appreciated.

I want chevron icon at the bottom when date range picker will open above the filter button.

Thanks in advance.

Pager Bar position

Please tell me how to customize the Pager bar position on top in react.

Cannot access 'Node' before initialization

I am trying to use diagram-builder but although compilation is successful I am getting this error on browser:

Cannot access 'Node' before initialization - ej2-diagrams.es2015.js:8680

at Module @syncfusion/ej2-diagrams/dist/es6/ej2-diagrams.es2015.js

I am using version of:
Angular CLI: 8.1.2
Node: 10.15.1

date-picker not popup calendar on focus element

DropdwonList moves on page-scrolling

Expected Behaviour:
The Dropdownlist sticks to the input-field you opened it from, while scrolling the page

Actual Behaviour:
The Dropdownlist moves with the whole page while scrolling

Live-behaviour from a gif:

I noticed it was the css "top" property, which caused it to stick while scrolling, but I could not get a solution to this, as the top-property gets set by your controls i think.

I also checked and made a comparison with your following demo:
https://ej2.syncfusion.com/angular/demos/#/material/multi-select/checkbox

CSS looks exactly alike in both examples.

Call renderDayCell on API success

Hello Team,

I want to call the method for renderDayCell on API success. Please suggest me how I can achieve it?

<ejs-datepicker (renderDayCell)="onLoad($event)">

I want to call "onLoad" method on API success so that I can disable any specific date of any specific month in any specific year.

Thanks in advance.

Regards,
Anoop

ej2-angular-pivotview with Angular 8

Hi,
ej2-angular-pivotview functionality has been broken with Angular 8, you can validate the same in your demos as well (stackblitz)

thank you

<ejs-textbox> incorrect [cssClass] handling

Example code:

<ejs-textbox
        [formControlName]="'someControlName'"
        [floatLabelType]="'Always'"
        [placeholder]="'Placeholder text'"
        [type]="'text'"
        [cssClass]="hasError(formGroup.someFieldName) ? 'e-error' : ''"
></ejs-textbox>

Expected behaviour:
Add e-error class when hasError() returns true, remove it when hasError() returns false

Actual behaviour:
e-error is added to/removed from
e-error is added to/NOT removed from <div class=".e-control-wrapper"> which holds &

Disable all the Sat and Sun from today in date picker calendar

Hello Team,

I need to disable all the Sat and Sun from today onwards. So please help me out for this how I can achieve it?

Note: I'm using date picker in angular 7.

Thanks in advance.

<ejs-richtexteditor> inline mode error when color property is displayed in mobile view.

When we have the inline rich text editor with a color property('Background', 'FontColor'), and try to open it in a mobile view(We need to use a device or Device emulation in Chrome), the component errors out and displays the color picker opened as follows:

In the console we get the following error stack trace:

ERROR TypeError: Cannot read property 'id' of undefined
    at e.renderColorPickerDropDown (constant.js:31)
    at eval (constant.js:31)
    at Array.forEach (<anonymous>)
    at n.renderColorPickerInput (constant.js:31)
    at n.renderColorPicker (constant.js:31)
    at t.notify (dom.js:256)
    at RichTextEditorComponent.r.notify (dom.js:256)
    at n.checkToolbarResponsive (constant.js:31)
    at n.renderToolbar (constant.js:31)
    at t.notify (dom.js:256)

Please find the modified StackBlitz from the demo example here:
https://stackblitz.com/edit/angular-ughe4q

To reproduce the error:

1. Open the preview in a new window
2. Open the developer tools and inspect it as a mobile device
3. Reload the page

ej2-angular-richtexteditor build --prod

the component richtexteditor works in the development environment, but when he built the production this fails

the error is:

ERROR TypeError: Cannot read property 'editorManager' of undefined

i'm building with ng build --prod --aot

the version is

    "@syncfusion/ej2-angular-richtexteditor": "^17.2.36",
    "@agm/core": "1.0.0-beta.5",
    "@angular/animations": "8.0.0",
    "@angular/cdk": "8.0.0",
    "@angular/common": "8.0.0",
    "@angular/compiler": "8.0.0",
    "@angular/core": "8.0.0",
    "@angular/flex-layout": "8.0.0-beta.26",
    "@angular/forms": "8.0.0",
    "@angular/material": "8.0.0",
    "@angular/material-moment-adapter": "8.0.0",
    "@angular/platform-browser": "8.0.0",
    "@angular/platform-browser-dynamic": "8.0.0",
    "@angular/router": "8.0.0",

Update ej2 components for angular 8.3.0 compatibility

ej2-filemanager is not working in production built on angular 8.3.0. thus in the production build, the default values are not passed which give lots of errors.

The current version is only supportive to angular 7 only.

Bug: DateTime on y-axis in line chart, enable tooltip shows getDate of undefined

use DateTime valueType on Y-AXIS in LineChart, and enable tooltip also,
then navigate mouse to chart, tooltip will not be visible & F12 will say, cannot read property getDate() of undefined.
Please look into this bug.

DataGrid edit mode 'Batch' not working

editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, newRowPosition: 'Top', mode: 'Batch'};

<ejs-grid
  #someGrid
  [dataSource]="dataSource"
  [columns]="columns"
  [gridLines]="gridLines"

  [allowFiltering]="allowFiltering"
  [filterSettings]="filterSettings"
  [allowGrouping]="allowGrouping"
  [groupSettings]="groupSettings"
  [toolbar]='toolbar'
  [editSettings]="editSettings"

  (created)="created($event)"
  (load)=load($event);
  (dataBound)="onDataBound($event)"

  (queryCellInfo)="this.helper.queryCellInfo($event)"
  (rowDataBound)="this.helper.rowDataBound($event)"
>
</ejs-grid>

Grid is still in default editing mode.

Grid column reordering with custom header template

What is the expected behavior?

Reordering should work with custom header template

What is the current behavior?

a.headerTemplate.indexOf is not a function

What are the steps to reproduce?

https://stackblitz.com/edit/angular-sh2e7k

Package versions:

"@syncfusion/ej2-angular-grids": "^16.3.34",
"@angular/animations": "^7.1.0",
"@angular/common": "^7.1.0",
"@angular/compiler": "^7.1.0",
"@angular/core": "^7.1.0",
"@angular/forms": "^7.1.0",
"@angular/http": "^7.1.0",
"@angular/platform-browser": "^7.1.0",
"@angular/platform-browser-dynamic": "^7.1.0",
"@angular/router": "^7.1.0",

Multiselect with mode 'Checkbox' mousedown event-listener

Hi team,

I'm using the multiselect-dropdown control with mode 'checkbox' and it seems that there is something wrong with adding and removing the 'mousedown' event listener of the control.

Module CheckBoxSelection
File: "node_modules\@syncfusion\ej2-dropdowns\src\multi-select\checkbox-selection.js"

During initialization of the control, the mousedown event listener gets registered on 'document' level but after the component where the control is used gets destroyed, the listener won't be removed.
this.parent.isDestroyed is always true:

CheckBoxSelection.prototype.removeEventListener = function () { if (this.parent.isDestroyed) { return; }

following code will never get executed:
EventHandler.remove(document, 'mousedown', this.onDocumentClick);

And because the listener is registered on document level, other listeners like 'click'-events' won't work because of that.

Used Packages:
"@syncfusion/ej2-angular-base": "^17.2.39",
"@syncfusion/ej2-angular-calendars": "^17.2.36",
"@syncfusion/ej2-angular-dropdowns": "^17.2.40",
"@syncfusion/ej2-angular-lists": "^17.2.34",
"@syncfusion/ej2-angular-navigations": "^17.2.40",
"@syncfusion/ej2-angular-pdfviewer": "^17.2.40",
"@syncfusion/ej2-angular-popups": "^17.2.35",
"@syncfusion/ej2-base": "^17.2.40",
"@syncfusion/ej2-buttons": "^17.2.35",
"@syncfusion/ej2-dropdowns": "^17.2.40",
"@syncfusion/ej2-inputs": "^17.2.34",
"@syncfusion/ej2-pdfviewer": "^17.2.34",
"@syncfusion/ej2-popups": "^17.2.35",

• NodeJS: 12.6.0
• AngularCLI: 8.1.2

DataGrid changing types of objects in its datasource

My data in grid is for example of type Task ...but when I stop editing the row, grid somehow looses the object type.. and some of the data.
screenshots:
-begin with editing - everything OK


-end editing (even with no changes made) - edited Task is now regular object


-after if i try to edit again.. rowData in "actionBegin" event has no type and is mising some of my data.. in this case its mising user's name and some other stuff.


-it only happens when I edit stuff.. if i just set sorting on one column all the data is again OK...
this is a huge problem for me. and i just started using the Grid so i have very little code behind it.. mostly console.logs for events.

ej2-angular-schedule

package: "@syncfusion/ej2-angular-schedule": "^16.4.44"
I had to user WebApiAdaptor for using CRUD web API

`
import { WebApiAdaptor } from "@syncfusion/ej2-data";
import { Timezone } from "@syncfusion/ej2-angular-schedule";

export class CustomAdaptor extends WebApiAdaptor {
processResponse(): Object {
let timezone: Timezone = new Timezone();
let original: Object[] = super.processResponse.apply(this, arguments);

for (let data of original["data"]) {
  let event: { [key: string]: Object } = data as {
    [key: string]: Object;
  };
  event.StartTime = timezone.removeLocalOffset(<Date>event.StartTime);
  event.EndTime = timezone.removeLocalOffset(<Date>event.EndTime);
  event.Id = event.id;
}

return original["data"];

}
}
`
every thing is fine but when try to delete an event there is an error because the original variable (in the code snippet) changes it's value to an empty array.

Error when setting tsconfig target to ES6.

I'm getting the following error when I set my tsconfig.json to "target": "es6" :

 Class constructor DocumentEditorContainer cannot be invoked without 'new'
    at new DocumentEditorContainerComponent

That happens when I instanciate a component that uses the Document editor

Define columns from component

Can i define columns from component since i am loading those columns via api, also, each column has different template such as SVG, numbers, texts, dates...

DataGrid row drag and drop error (converting circular structure)

Hello,

We are using circular objects within our application.. which is pretty often in lets say advanced apps... So the problem here happens when I try to drag and drop row:
TypeError: Converting circular structure to JSON
It doesn't happen all the time but only if I drag 2 or more together.. or if I leave the grid container with my ghost/clone object on mouse cursor. What really upsets me that e1-Grid didn't have this problems with the same circular structure objects. That's why i'm asking you if you can take a deep look into this problem and prepare a solution... because this problem will go into TreeGrid and Gantt component as well.

full error img:

Br. Nino

Event for Cancel and Apply button

Hello Team,

Is there any click event for cancel and apply button in date-range picker?

Change the place of date-range picker

Hello Team,

I want to change the place of date-range picker when it's open. I also attached the link of the screenshot of the issue.

Link: https://www.screencast.com/t/6bip4XK3bQ

Thanks in Advance.

Change the label of 'Start Date' and 'End Date'

Hello Team,

I'm using the date-range picker and I want to change the label of 'Start Date' and 'End Date' to 'Send on' and 'Deliver by' respectively. So please guide me how I can do this?

Your quick response is much appreciated.

Thanks in advance.