Branched query from #6 (comment)

A quick question. Devexpress have a fantastic control called Filter Builder. Which can be linked to the grid or used to create sql commands. This might be something you want to look at. You can see it here. We are Syncfusion devotees but are considering buying Devexpress just for this control. https://demos.devexpress.com/ASPxEditorsDemos/ASPxFilterControl/FilterBuilder.aspx

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.

The latest schedule package v16.3.22 is having some problem with the css I guess and the toolbar is not showing correctly.
At first, I thought I was missing something in my project but then I checked at the documentation and it has the same problem.

Check the example at this page.
https://ej2.syncfusion.com/angular/documentation/schedule/getting-started.html#initialize-the-schedule

hello, im tring to follow the documentaion on customizing the theme by importing the sass file like these
@import "~@syncfusion/ej2-ng-calendars/styles/material.scss";
but i getthe next build error

ERROR in ./src/modules/shared/components/data-range-selector/data-range-selector.component.scss
Module build failed: 
@import 'ej2-base/styles/material.scss';
^
      File to import not found or unreadable: ej2-base/styles/material.scss.
Parent style sheet: /project/node_modules/@syncfusion/ej2-ng-calendars/styles/calendar/material.scss
      in /project/node_modules/@syncfusion/ej2-ng-calendars/styles/calendar/material.scss (line 1, column 1)
Error: 
@import 'ej2-base/styles/material.scss';
^
      File to import not found or unreadable: ej2-base/styles/material.scss.
Parent style sheet: /Volumes/DATA/Work/logisfleet/taskme/lds-ngx/node_modules/@syncfusion/ej2-ng-calendars/styles/calendar/material.scss
      in /project/node_modules/@syncfusion/ej2-ng-calendars/styles/calendar/material.scss (line 1, column 1)
    at options.error (/project/lds-ngx/node_modules/node-sass/lib/index.js:291:26)
 @ ./src/modules/shared/components/data-range-selector/data-range-selector.component.ts 71:21-68
 @ ./src/modules/shared/shared.module.ts
 @ ./src/app/app.module.ts
 @ ./src/main.ts
 @ multi webpack-dev-server/client?http://0.0.0.0:0 ./src/main.ts

im using ej2-ng-calendar with angualr 5. thanks

I am using typescript ej-grid with column menu and create custom template for filter. The clear filter button throw's error when used with column menu, but it is work proper without column menu functionality
For more reference click on this link (http://plnkr.co/edit/GLDuR6ZYCPUA7TXivOlY?p=preview)

Below is my column menu.

And below is error which i am getting when i pressing clear button.

,

There is a discrepancy between documentation for the RecurrenceEditor between javascript and Asp.Net Core (the Javascript version being the correct one, but still inconsistent).

If you read the documentation for Asp.Net Core in the very first section, you can see that the 5 default frequencies contain the value Never. If you go down in the example code, you can see the frequencies being set as such:
scheduleObj.eventWindow.recurrenceEditor.frequencies = ['never', 'daily', 'weekly'];

If you compare this very same page documented for Javascript, the list of default frequencies is the same, but in the example, we can ready this:
scheduleObj.eventWindow.recurrenceEditor.frequencies = ['none', 'daily', 'weekly'];
Pay attention to the first option none, not never

So the problems are:

1. Inconsistent documentation between flavors of the controls
2. Even in Javascript documentation (which is the correct one according to the code), the option being listed for the frequency is Never, yet the code expects none, this should also be clarified.

Thanks in advance and have a great day!

Check your template please.
https://ej2.syncfusion.com/demos/#/material/listview/templates.html

Scroll down in the list.
Click the last item and you see that the scrollPosition is not reset.
Must be standard.

Hello,

With treeview is it possible to find the same unfolded opening state of items when arriving on the tree?
Like a cache of the state.
Thank you

When initial filtering is set for a boolean or number column type; default query is constructed as if the column is string. When using odata binding, the produced query contains toLower(booleanColumn)...

When using the recurrence editor and calling .getRecurrenceDates(new Date(), recurrenceRule, null, 1), it completely crashes if the passed recurrenceRule would end up with an invalid date.

For example, calling it like so:
getRecurrenceDates(new Date(), 'FREQ=YEARLY;BYMONTHDAY=30;BYMONTH=2;INTERVAL=1', null, 1) crashes the app as the date it would result in would be february 30th, which is invalid.

You created great example for SyncFusion JavaScript version:
http://js.syncfusion.com/demos/web/dashboard/webmail/default.html
is it possible to prepare such example for ej2, please?
What I mean is to create example where all components are responsive and visible on all devices, something like http://guillaumebiton.github.io/HackerNews7/
Thank you!

Hi, have you evaluated or planned the release of a blazor compatible version of ej2?

while trying to do npm install for ej2, I am getting error for the latest version...even though i downgrade it to lower version...it is giving error...as No matching version found for @syncfusion/ej2-buttons@~17.1.50...please suggest...

The npm download Version 16.1.28 doesn't work with Internationalization.

When we recovert a older directory (@syncfusion) of Version 16.1.28 from a backup, the Internationalization works. When we install the Version over npm download it doesn't work.

We searched one day for errors to find out that there is a broken version on the npm server. That's the second time. What's going on there??

Regards
j.nord

Since asp.net core 2.0 have added possibility to have razor ui view / pages in separate .net standard class library, have you planned release of .netstandard version of ej2 controls library?

While using the Vue adapter of the ej2-schedule components, I came across an issue where I could not use the resizeStart event hook to override the default interval settings for the event.

After some digging into the source code (@syncfusion/[email protected], per package.json) I found the problem within src/schedule/actions/resize.js, at line 324.

var isTimeViews = ['TimelineDay', 'TimelineWeek', 'TimelineWorkWeek'].indexOf(this.parent.currentView) > 0 &&
            this.parent.activeViewOptions.timeScale.enable;

It seems that it should probably be > -1. Manually modifying it and testing seems to prove that the fix works.

Hi, supporters,
I just wanna filter only "ShipCity" column, and other columns do not filter, but it not has the option to support that.

let grid: Grid = new Grid({
dataSource: data,
allowFiltering: true,
columns: [
{ field: 'OrderID.text', headerText: 'Order ID', textAlign: 'right', width: 100 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 100 },
{ field: 'ShipName', headerText: 'Ship Name', width: 100 }
],
height: 273
});

Please show me what I need to do to implement filtering in this case, many thanks

Hello,

I was checking the forums and all of the threads seemd a bit outdated since the topic in them was ej1-grid.
So i am asking if there is a neater way of saving the curent grid state in ej2-grid.

what i am trying to do is that when ever user logs-in.. the grid has the same state as when he left the site. Meaning that the column arangment and column width and all other stuff gets saved as lets say json string.

It would be really helpful if you could provide me with an example in typescript that shows how to get this "gridState" object and then later how to load it in the grid itself.

Thank you for your awesome work.
Best regards,
Nino Petrovič

It appears that EJ2 uses "http://fonts.googleapis.com/css?family=Roboto:400,500"
This is creating a problem when developing from chrome with a https schema.

I would think that Https will always work, while http will not.

After update to this version, crud operation all fails, the problem is the data can't bind with the model (becoming null)

NOTE : Working fine in previous version

rich-text-editor and images

Im trying to figure out the best way to save content and load same content later.
Would be nice to hear how you use it, with images..

When column type is boolean and filter type is Menu, filtering values do not appear as True, False. Instead, [Object object] appears and filtering does not work.
Thanks.

I am getting issue in consuming response using DataManager with OData4Adaptor, Is it some kind of limitation in Syncfusion that it only consumes data from OData WebApi, not the plain WebAPI.

Below is working:

Api response:
{
"@odata.context": "http://localhost:32097/odata/$metadata#Movies",
"@odata.count": 30,
"value": [
{
"Id": 1,
"Title": "StarWars - The Force Awakens",
"ReleaseDate": "2015-10-25T00:00:00+05:30",
"Rating": "FiveStar",
"LastModifiedOn": "2017-12-20T16:43:14.3413207+05:30"
}
]
}

Below is not working:

Api response:

{
"count": 15,
"message": "",
"value": [
{
"code": "asdf",
"description": "Test ASDF",
"createdBy": "SA        ",
"createdDate": "2017-12-13T06:53:30.183"
}
]
}

Behavior

when building the app for production (npm run prod or npm run build),
I got the error below :

Uncaught (in promise) TypeError: Object prototype may only be an Object or null: undefined
    at setPrototypeOf (<anonymous>)

But when I build for the dev server (npm start) no error everything work fine

Version

the detail of verion are in the gist below (see package.json), but i give a quick view

    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "@syncfusion/ej2-react-diagrams": "^16.4.48",

How to reproduce

I create a gist to this link
simply copy the file and do npm i && npm run prod to install dependencies and run the prod server

./node_modules/@syncfusion/ej2-grids/src/grid/renderer/render.js
Attempted import error: 'blazorTemplates' is not exported from '@syncfusion/ej2-base'.

As developer, I want to use a custom font and external icon such as Font awesome, Material icon.
However, I see ej2 used builtin Roboto Font and ej-icons. This is the reason why the css file is large.
By removing all builtin, this will reduces the package size, and allow developer uses any icon for all components.

Hi,

after change to version 15.4.17 to version 15.4.20 the german cultur doesn't wok.

code from the app.module.ts:

import { loadCldr, setCulture, setCurrencyCode } from '@syncfusion/ej2-base';
loadCldr(
    require('cldr-data/main/de/ca-gregorian.json'),
    require('cldr-data/main/de/timeZoneNames.json'),
    require('cldr-data/main/de/numbers.json'),
    require('cldr-data/supplemental/numberingSystems.json'),
    require('cldr-data/main/de/currencies.json')
)

// Syncfusion
setCulture("de");
setCurrencyCode('EUR');

Why??

Regards

j.nord

Hi!

I use syncfusion grid in Angular app. Can you explain how to set filtering operator on column with FilterBar type filtering. Setting

gridFilterSettings: FilterSettingsModel = {
    type: 'FilterBar', mode: 'Immediate', immediateModeDelay: 500,
    columns: [
      { field: 'full_name', matchCase: false, operator: 'contains', predicate: 'and', value: '', },
    ]
  };

change only initial filtering for full_name column. I want to use contains operator, but it seems to be startsWith.

Thanks.

Easy to reproduce:
https://stackblitz.com/edit/syncfusion-treeview-refresh-bug?file=index.tsx

• Click "Change container state"

Unexpected behaviors:

• Drag & drop has duplicate labels
• Expand animation is played for the whole tree on every render

Thank you

Hello
I did
npm install
and then
npm run build
but there are some errors:
`c:\web\ej>npm run build

@syncfusion/[email protected] build c:\web\ej
gulp build

[11:14:02] Using gulpfile c:\web\ej\gulpfile.js
[11:14:02] Starting 'scripts'...
[11:14:02] Finished 'scripts' after 596 ms
[11:14:02] Starting 'styles'...
error TS2688: Cannot find type definition file for 'jasmine'.
error TS2688: Cannot find type definition file for 'jasmine-ajax'.
error TS2688: Cannot find type definition file for 'requirejs'.
[11:14:07] TypeScript: 3 options errors
[11:14:07] TypeScript: emit succeeded (with errors)
[11:14:07] Finished 'styles' after 4.97 s
[11:14:07] Starting 'build'...
[11:14:07] Finished 'build' after 6.42 us`

also, is there any ready demos (to download)?
Thank you

I'm using Angular + "@syncfusion/ej2-angular-inputs": "^17.1.47", and this tooltip appear on page load.

<ejs-slider type="MinRange" [min]='minDuration' [max]='maxDuration' [tooltip]='timetooltip' (tooltipChange)='tooltipChangeHandler($event)' (changed)="onChanged($event)" [(ngModel)]="value"></ejs-slider>

tooltipChangeHandler(args: SliderTooltipEventArgs): void { if (!this.value) { return; } const zero = this.secondsToDurationPipe.transform(0); const value = this.secondsToDurationPipe.transform(this.value * 60); args.text = value && zero &&${zero} - ${value} || ''; }

I've just noticed that the canvas rendering option on the chart component is dropped since upgrading to ej2. Unfortunately we have some massive data charts which are now lacking in performance. Are there any plans to reimplement the HTML canvas option?

Thanks and regards!

Hello
how to test the demo on mobile device?
For example, if I run this demo:
http://ej2.syncfusion.com/15.4.23/javascript/demos/samples/grid/autowrap/index.html
I see example like in desktop browser but small. Does it not need to adopt to mobile device screen?

Sample
https://ej2.syncfusion.com/angular/demos/?_ga=2.104063817.870766079.1557510387-1284100634.1556915390#/material/grid/over-view

If I select row number 1 and 2 and sort the grid. I still have the same rows selected, even though the data is not the same. This feels very wrong and weird.
Is it possible to pass in unique ID column so it can use that and a set for keeping correct rows selected?

Before sort

After sort:

TreeGrid aggregate is not working in IE at all - it show error: "Object.keys: argument is not an Object"
It even does not work on official documentation in IE here (Preview tab): https://ej2.syncfusion.com/javascript/documentation/treegrid/aggregates/#child-aggregate

My IE version is 11.0.9600.19155

Hello,

I'm using ejs-treeview from ej2-ng-navigations and in ng-tamplate I cannot get my (click) event to work on my tag nor on .btn.
I am trying to add a button to my child elements in treeview to download or delete data from site.

Hello
do you have plans to include Drawer (http://js.syncfusion.com/demos/web/#!/office-365/navigationdrawer/defaultfunctionalities)
Thank you.

Hello
is there option to "autohide" column when displaying on mobile device?
For example, if client is desktop, displayed are 6 grid columns and on iPad displayed are only 4 columns and on iPhone only 2 columns.
Thank you.

Contains Filter operator creates query with "substringof " which does not support in web API2 OData
below is my url which is not working:
http://localhost:51793/api/getCustomers/?$inlinecount=allpages&$filter=substringof(%27st%27,Code)&$orderby=Code&$skip=0&$top=12

Actual url should have been like :
http://localhost:51793/api/agetCustomers/?$inlinecount=allpages&$filter=contains(%27st%27,Code)&$orderby=Code&$skip=0&$top=12

I have noticed that not specifying a width results in the width being set to the width of the contain which is great.

However the vertical positoin apprears to be set to something fixed. can I suggest that the default (i.e. no height provided results in the dialog being centered vertically. FYI an option to make it full height of the container would also be useful.

Hi supporters,

If the value is containing the "a" tag with a href link like below screenshot then the filter will not working. Because the value that the grid understand now is including the "a" tag, href and the value, not only the value.

image

Regards,
Son

I would like to start using ej2 in an existing project. I would therefore like to generate js files so I can use this library without typescript as we progesively update the site. How can I do this can I use the umd files? Do I need to add the ts file and build inside VS2017? If I use ts for new pages how do I reference tj2?

Thanks

Hi
I was checking your components, and I noticed must of them (mainly grid) does not support RTL,
I checked your road map and you did not mention RTL in the upcoming release, So do you have any plan to support RTL?

thanx

Problem:

If the property array files is empty the following error is thrown.

vue.esm.js:628 [Vue warn]: Error in updated hook: "TypeError: Cannot read property 'size' of undefined"

Source File:

Browsing through the source I believe this empty element is for an uploaded file before a user selects one.

Minimal Vue Example:

<ejs-uploader :files='[]' />

Use Case:

When a user returns back to the page it would be useful to show the user what was uploaded.

<ejs-uploader>
    <e-files>
        <e-uploadedfiles 
            v-for="file of myFiles" 
            :key='file.name' 
            :name='file.name' 
            :type='file.type' 
            :size='file.size' />
    </e-files>
</ejs-uploader> 

Workaround

Add empty object or one e-uploadedFiles element for the files property.

<ejs-uploader :files='[{}]' />

I can't seem to get multiple (discontinuous) selection inside the grid to work. This affects probably other list-like controls as well, as control-click interferes with the Mac default contextual menu display.

Dear Dev Team,

We have evaluated the Scheduler but noticed an innate limitation that prohibited a use case that we required, that is allowing "arbitrary start & end date" for Timeline Month view.

To simply put, our use case required the UI to show a "moving window" of a month, always centered at today. But the currently limitation would totally prohibit this approach & we'll end up with say Today is Aug 30th so we have only 1 day ahead & all days in the past.

Would you please consider allowing this? Then Timeline Month would be so much more useful. Thanks very much for your consideration.

Hi supporters,

Ex I have the source data is like:
export let data: Object[] = [ { OrderID: {"value":10248, "text": "SonId"}, CustomerID: 'VINET', EmployeeID: 5, OrderDate: new Date(8364186e5), ShipName: 'Vins et alcools Chevalier', ShipCity: 'Reims', ShipAddress: '59 rue de l Abbaye', ShipRegion: 'CJ', ShipPostalCode: '51100', ShipCountry: 'France', Freight: 32.38, Verified: !0 }, { OrderID: {"value":10249, "text": "SonAnother"}, CustomerID: 'TOMSP', EmployeeID: 6, OrderDate: new Date(836505e6), ShipName: 'Toms Spezialitäten', ShipCity: 'Münster', ShipAddress: 'Luisenstr. 48', ShipRegion: 'CJ', ShipPostalCode: '44087', ShipCountry: 'Germany', Freight: 11.61, Verified: !1 }];

The data is having OrderId in this format OrderID: {"value":10248, "text": "SonId"}. And in the Grid I just wanna show the "text" only:
columns: [ { field: 'OrderID.text', headerText: 'Order ID', textAlign: 'right', width: 100 }, { field: 'CustomerID', headerText: 'Customer ID', width: 120 }, { field: 'ShipCity', headerText: 'Ship City', width: 100 }, { field: 'ShipName', headerText: 'Ship Name', width: 100 } ],

I have enable filter function for that grid. The filter is working fine for another fields but not for OrderID.text field.

Please show me what I need to do to implement filtering in this case, many thanks

Please see below for the Plunker:
http://plnkr.co/edit/51NTyHlSX3LmZKdw3HwG?p=preview

Behavior

We get NaN value in svg element ( rect, rotation )

Version

    "react": "^16.3.2",
    "react-dom": "^16.4.0",
    "@syncfusion/ej2-data": "^16.3.34",
    "@syncfusion/ej2-react-diagrams": "^16.3.34",

Step To Reproduce

• data file

import React, { Component, Fragment } from 'react';
import {
    DataManager
} from '@syncfusion/ej2-data';
import {
    DiagramComponent,
    ComplexHierarchicalTree,
    DataBinding,
    DiagramTools,
    HierarchicalTree,
    LayoutAnimation,
    Inject,
} from '@syncfusion/ej2-react-diagrams';

function getNode(node) {
    const { data: { id } } = node;
    const obj = {
        width: 75,
        height: 75,
        shape: { shape: 'Ellipse' },
        style: { fill: '#37909A', strokeColor: '#024249' },
        annotations: [
            {
                content: `${id}`,
                margin: { left: 10, right: 10 },
                style: {
                    color: 'white',
                    fill: 'none',
                    strokeColor: 'none',
                    bold: true
                }
            }
        ],
    };
    return obj;
}

const layoutSettings = {
    type: 'ComplexHierarchicalTree',
    horizontalSpacing: 20,
    verticalSpacing: 20,
    enableAnimation: true,
    margin: { left: 10, right: 0, top: 50, bottom: 0 }
};

class App extends Component {
    render() {
        const dataSettings = {
            id: 'id',
            parentId: 'parent',
            dataManager: new DataManager(data),
        };

        return <Fragment>
            <div className='row justify-content-center align-items-center'>
                <DiagramComponent id='diagram-relation'
                    dataSourceSettings={dataSettings}
                    tool={DiagramTools.ZoomPan}
                    snapSettings={{ constraints: 0 }}
                    layout={layoutSettings}
                    height={800}
                    getConnectorDefaults={(connector) => {
                        //Sets the default values of connector
                        connector.type = 'Orthogonal';
                        connector.cornerRadius = 7;
                        connector.targetDecorator.height = 7;
                        connector.targetDecorator.width = 7;
                        connector.style.strokeColor = '#6d6d6d';
                    }}
                    getNodeDefaults={getNode}
                    width='100%' >
                    <Inject services={[
                        ComplexHierarchicalTree,
                        HierarchicalTree,
                        RadialTree,
                        LayoutAnimation,
                        DataBinding,
                    ]} />
                </DiagramComponent>
            </div>
        </Fragment>;
    }
}

export default App;

We would like to use this library in multipage MVC. I am looking mininise the javascript loaded. eg. one page may only need the toolbar, another may onlu need buttons and imputs.

I and guessing that the /dist/es6 diretories include the javascript for the individual components and that the can be loaded one after the other? Is this correct? If so, do you have the dependancies listed anythere or are their none? For eg does the dropdown depend on popups?

Dear Team,
Thank you for the nice toolkit, I fee the Vision / Roadmap is very nice. Will there be any possibility to include Pivot Grid to the controls list. The Tree-Grid & Pivot-Grid's are very useful to play with data in run-time.

thank you
-nm