[GaryParticipant]

Martin,

I put together a small demo showing how I went about configuring the use of VUEX as a data source for jqxGrid.

Just click on the following link:
CodeSandbox JQWidgets jxGrid demo

Let me know if you have any questions.

Best Regards,
Gary

[GaryParticipant]

Peter,

Thanks….

Gary

[GaryParticipant]

Martin,

I have the use of VUEX (state Management) working with JQXGrid.

For me, it came down to a timing issue between the Vuex Dispatch to retrieve backend data and time to populate data into the VUEX store. Thus when the store data was available to rebind (datebounddata) back to the grid data source.

The fix for me was doing research on how to watch for a VUEX state change and ensuring that I then updatebounddata back to the grid.
I’m in the process of cleaning up my code and putting in some comments so I can post what works for me.

When time permits on your side, maybe a code review makes sense to ensure what I have working is in line with what you would find acceptable. As we all know there are always many ways to make the code work. I just want to ensure other code users have the best experience possible.

Best Regards,
Gary

[GaryParticipant]

Hello Martin,

Tested the async parameter and that made no difference.

I will make a sample and send over later.

Thanks for your help.

Best Regards,
Gary

[GaryParticipant]

Peter,

The code I copied can be found in the section Documentation – Get Started – App.vue.

Gary

[GaryParticipant]

Hello Martin,
I just spent several days taking on trying to get NGRX/Entity observable output work as input to jqxGrid.

I believe the difference exists with the Observable design of RX/JS and how JQWIDGETS define an observable. I did some research on Knockout vs. RX/JS, and clearly some similarities but different approached to the observable structure. Might be better to say Knockout is a framework with bells and whistles to UI management. Were as RX/JS is an observable establishing data stream management. If I couple the RX/ JS, NG/RX/Store, and NG/RX/Entity and UI feature capabilities provided by Angular 6, I can start to see a closer relationship between Knockout and let’s say Angular Store solution.

However, to take a pure RX/JS Observable and plug it in for a data source for jqxGrid it did not cause an error but, just no data appeared in the grid.

Here is the definition I used for source:

// Accounts$: Observable<Account[]>;  RX/js observable

// localdata: this.accounts$,
// datatype: ‘obserableArray,
// datafields: [
// {name: ‘AcctName’, type: ‘string’},
// {name: ‘AcctCategory’, type: ‘string’},
// {name: ‘AcctType’, type: ‘string’},
// {name: ‘AcctNumber’, type: ‘string’},
// {name: ‘AcctOpenDate’, type: ‘date’},
// {name: ‘AcctDescription’, type: ‘string’},
// {name: ‘AcctBalance’, type: ‘number’},
// {name: ‘AcctStatus’, type: ‘bool’}
// ],
// id: ‘_id’,

If I can provide you with something, let me know.

I’ll put in a formal request to add RX/JS as an observable data source for jqxGrid, jqxChart and, jqxPivotGrid etc.…. for a future release.

Thanks,
Gary

[GaryParticipant]

Martin,

Thanks for such a quick response.

Adding the file made it work.

Is this a standard needed now using JQWIDGETS or just a workaround for now?

Gary

[GaryParticipant]

Peter,

Have error with createComponent with PivotGrid. I copied the code from the example under PivotGrid GetStarted for createComponent.

I get the following message from Typescript:

Error:(23, 9) TS2322: Type ‘{ width: number; heigth: number; theme: string; source: null; multipleSelectionEnabled: true; tre…’ is not assignable to type ‘PivotGridOptions’.
Object literal may only specify known properties, and ‘width’ does not exist in type ‘PivotGridOptions’.

After looking around jqwidgets.ts for PivotGridOptions I don’t see the definitions. I compared to GridOptions and not built out the same.

pivotGridSettings: jqwidgets.PivotGridOptions = {
width: 800,
heigth: 400,
theme: ‘energyblue’,
source: this.pivotDataSource,
multipleSelectionEnabled: true,
treeStyleRows: true,
autoResize: false,
};

When I said it was working before I did something that worked but, not what you had recommended above. The following code works if I place in the
Angular Lifecycle ngAfterViewInit(). Clearly not what you recommended. :))

ngAfterViewInit(): void {
this.pivotGrid1.setOptions({
theme: ‘energyblue’
});
}

Regards,
Gary

[GaryParticipant]

Peter,

Works.

Thanks,
Gary

[GaryParticipant]

Ivo,

Made recommended changes and it works for me.

Thanks,
Gary

[GaryParticipant]

I ran into the same problem as above.

To work around it I added all the jqx modules definitions into app.module.ts under section @NgModule({declarations…. and it worked.
Clearly, I don’t think this is how it should work. I would like to see the modules brought in based upon import statements in components.
At least only the JQX components, I use in the application.

Used the following build commands with angular-cli:

ng serve -dev
ng serve -prod
ng serve -prod -aot

Between Development and production build mode the total size went from 21MB to 2.08MB it looks like the tree-shaking capabilities are working.
Still looking at my builds.

Gary

[GaryParticipant]

Ivo,

I was just checking before making the update.

I’ll let you know if I experience any issue.

Thanks,
Gary

[GaryParticipant]

Hello Ivo,

I created the two PNG files and added to Images and the errors went away and I can use the Theme Builder.

I still have the warnings but, got what I needed. This will give you time to look into the other issues around warnins.

Thanks,
Gary

[GaryParticipant]

Hello Ivo…

I placed custom.css in the src/assets directory and then add an import to styles.css and got the following errors below.
I was looking at the error messages and see that we are getting two kinds. One is warnings and the other is errors.

I have no idea what the warnings are saying but the error messages are looking for PNG files that are not in the JQWIDGETS IMAGE directory.

C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png doesn’t exist
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png doesn’t exist

*** ERROR OUTPUT ***

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:120:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:120:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:138:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:138:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:156:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:156:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:210:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:210:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:211:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:211:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:222:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:222:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:237:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:237:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:238:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:238:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:249:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:249:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:264:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:264:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:265:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:265:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:276:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:276:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:290:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:290:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:305:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:305:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:320:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:320:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:39:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:39:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:67:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:67:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

WARNING in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
(Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:85:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
NonErrorEmittedError: (Emitted value instead of an instance of Error) autoprefixer: C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\custom.css:85:5: Gradient has outdated direction syntax. New syntax is like to left instead of right.
at Object.emitWarning (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\webpack\lib\NormalModule.js:117:16)
at result.warnings.forEach (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:49)
at Array.forEach (<anonymous>)
at postcss.process.then (C:\Users\Gary\WebstormProjects\GaryTest50\node_modules\postcss-loader\lib\index.js:149:27)
at <anonymous>
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css 3:10-173
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

ERROR in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
Module not found: Error: Can’t resolve ‘./images/icon-bottom.png’ in ‘C:\Users\Gary\WebstormProjects\GaryTest50\src\assets’
resolve ‘./images/icon-bottom.png’ in ‘C:\Users\Gary\WebstormProjects\GaryTest50\src\assets’
using description file: C:\Users\Gary\WebstormProjects\GaryTest50\package.json (relative path: ./src/assets)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: C:\Users\Gary\WebstormProjects\GaryTest50\package.json (relative path: ./src/assets)
using description file: C:\Users\Gary\WebstormProjects\GaryTest50\package.json (relative path: ./src/assets/images/icon-bottom.png)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png doesn’t exist
.ts
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png.ts doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png.js doesn’t exist
as directory
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png doesn’t exist
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png]
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png.ts]
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png.js]
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-bottom.png]
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css 6:17500-17535 6:18232-18267 6:18976-19011
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css
ERROR in ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css
Module not found: Error: Can’t resolve ‘./images/icon-search.png’ in ‘C:\Users\Gary\WebstormProjects\GaryTest50\src\assets’
resolve ‘./images/icon-search.png’ in ‘C:\Users\Gary\WebstormProjects\GaryTest50\src\assets’
using description file: C:\Users\Gary\WebstormProjects\GaryTest50\package.json (relative path: ./src/assets)
Field ‘browser’ doesn’t contain a valid alias configuration
after using description file: C:\Users\Gary\WebstormProjects\GaryTest50\package.json (relative path: ./src/assets)
using description file: C:\Users\Gary\WebstormProjects\GaryTest50\package.json (relative path: ./src/assets/images/icon-search.png)
no extension
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png doesn’t exist
.ts
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png.ts doesn’t exist
.js
Field ‘browser’ doesn’t contain a valid alias configuration
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png.js doesn’t exist
as directory
C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png doesn’t exist
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png]
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png.ts]
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png.js]
[C:\Users\Gary\WebstormProjects\GaryTest50\src\assets\images\icon-search.png]
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”plugins”:[null,null,null],”sourceMap”:false}!./src/assets/custom.css 6:25956-25991
@ ./node_modules/css-loader?{“sourceMap”:false,”importLoaders”:1}!./node_modules/postcss-loader/lib?{“ident”:”postcss”,”sourceMap”:false}!./src/styles.css
@ ./src/styles.css
@ multi ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.base.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.energyblue.css ./node_modules/jqwidgets-framework/jqwidgets/styles/jqx.darkblue.css ./src/styles.css

[GaryParticipant]

Peter,

I found my error. I had embedded jQXGrid inside JQXTab. The Height in JQXTAB was set wrong and JQXGrid was getting 100% of what JQXTAB had allocated.
My error.

Best regards,
Gary

[Author]

Posts