'jqx' is not defined

[zft1999Participant]

Hello,
i am using the JqxGrid, and i have already import vue_jqxgrid.vue,
‘import JqxGrid from “jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue”;’
but 1 error found when run npm serve.

error: ‘jqx’ is not defined (no-undef) at src\components\UserPanel.vue:35:34:
33 | ],
34 |
> 35 | dataAdapter: new jqx.dataAdapter(this.source),
| ^
36 | }
37 | },
38 |
1 error found.

“dependencies”: {
“@fortawesome/fontawesome”: “^1.1.8”,
“@fortawesome/fontawesome-free-regular”: “^5.0.13”,
“@fortawesome/fontawesome-svg-core”: “^1.2.4”,
“@fortawesome/free-solid-svg-icons”: “^5.3.1”,
“@fortawesome/vue-fontawesome”: “^0.1.1”,
“axios”: “^0.18.0”,
“font-awesome”: “^4.7.0”,
“jqwidgets-scripts”: “^6.1.0”,
“vue”: “^2.5.17”,
“vuex”: “^3.0.1”
},
“devDependencies”: {
“@vue/cli-plugin-babel”: “^3.0.1”,
“@vue/cli-plugin-eslint”: “^3.0.1”,
“@vue/cli-service”: “^3.0.1”,
“vue-template-compiler”: “^2.5.17”
},

Thanks.

[HristoParticipant]

Hello zft1999,

This is only a warning and it does not affect your project to work normally.
This message will be cleared in the next release.
Thank you for the understanding.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[JenkeNgParticipant]

I recently started using the latest version of vue version of jqwidgets, and this error still appears. Note that it is an error, not a warning

24:30 error ‘jqx’ is not defined no-undef

1 problem (1 error, 0 warnings)

[HristoParticipant]

Hello JenkeNg,

You could try to disable this rule for checking at the place where you use the jqx object.
Please, take a look at this code snippet:

// eslint-disable-next-line
dataAdapter: new jqx.dataAdapter(this.source)

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[rr_187Participant]

Hey Hristo,

I am getting same error, which rule has to be disable?

I am using following version
node – v14.16.0
npm – 7.8.0

Can please share in detail.

Thank you

[HristoParticipant]

Hello rr_187,

Could you clarify your case?
Also, you could read my previous post where is provided a code snippet.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[rr_187Participant]

Hello Hristo,

I am trying to implement JqxGrid control in Vue JS 3.0 + .Net Web API project in Visual Studio 2019 with npm version 7.8.0 and node version 14.16.0,
Vue Cli version 4.5.12.
Error
ERROR Failed to compile with 1 errors
error in ./src/components/App.vue

Module Error (from ./node_modules/eslint-loader/index.js):

~\VueJSDotnet51\VueJSDotnet51\ClientApp\src\components\App.vue
26:34 error ‘jqx’ is not defined no-undef

Below is the Component code.
<template>
<h1>JQ Widgets Grid</h1>
<p>This component demonstrates jQ widgets grid.</p>
<div>
<JqxGrid :width=”width” :theme=”‘material'” :source=”dataAdapter” :columns=”columns”
:pageable=”true” :autoheight=”true” :sortable=”true” :filterable=”true”
:altrows=”true” :enabletooltip=”true” :editable=”true”
:selectionmode=”‘multiplecellsadvanced'”>
</JqxGrid>
</div>
</template>

<script>
import JqxGrid from ‘jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue’

export default {
name: “App”,
components: {
JqxGrid
},
data() {
return {
width: 850,
dataAdapter: new jqx.dataAdapter(this.source),
columns: [
{ text: ‘Contact Name’, datafield: ‘ContactName’, width: 240 },
{ text: ‘Contact Title’, datafield: ‘Title’, width: 240 },
{ text: ‘City’, datafield: ‘City’, width: 150 },
{ text: ‘Country’, datafield: ‘Country’ }
]
}
},
beforeCreate: function () {
this.source = {
localdata: [
[‘Maria Anders’, ‘Sales Representative’, ‘Berlin’, ‘Germany’],
[‘Ana Trujillo’, ‘Owner’, ‘Mxico D.F.’, ‘Mexico’],
[‘Antonio Moreno’, ‘Owner’, ‘Mxico D.F.’, ‘Mexico’],
[‘Thomas Hardy’, ‘Sales Representative’, ‘London’, ‘UK’],
[‘Christina Berglund’, ‘Order Administrator’, ‘Lule’, ‘Sweden’],
[‘Hanna Moos’, ‘Sales Representative’, ‘Mannheim’, ‘Germany’],
[‘Frdrique Citeaux’, ‘Marketing Manager’, ‘Strasbourg’, ‘France’],
[‘Martn Sommer’, ‘Owner’, ‘Madrid’, ‘Spain’],
[‘Owner’, ‘Marseille’, ‘France’],
[‘Elizabeth Lincoln’, ‘Accounting Manager’, ‘Tsawassen’, ‘Canada’],
[‘Victoria Ashworth’, ‘Sales Representative’, ‘London’, ‘UK’],
[‘Patricio Simpson’, ‘Sales Agent’, ‘Buenos Aires’, ‘Argentina’],
[‘Francisco Chang’, ‘Marketing Manager’, ‘Mxico D.F.’, ‘Mexico’],
[‘Yang Wang’, ‘Owner’, ‘Bern’, ‘Switzerland’],
[‘Pedro Afonso’, ‘Sales Associate’, ‘Sao Paulo’, ‘Brazil’],
[‘Elizabeth Brown’, ‘Sales Representative’, ‘London’, ‘UK’],
[‘Sven Ottlieb’, ‘Order Administrator’, ‘Aachen’, ‘Germany’],
[‘Janine Labrune’, ‘Owner’, ‘Nantes’, ‘France’],
[‘Ann Devon’, ‘Sales Agent’, ‘London’, ‘UK’],
[‘Roland Mendel’, ‘Sales Manager’, ‘Graz’, ‘Austria’]
],
datafields: [
{ name: ‘ContactName’, type: ‘string’, map: ‘0’ },
{ name: ‘Title’, type: ‘string’, map: ‘1’ },
{ name: ‘City’, type: ‘string’, map: ‘2’ },
{ name: ‘Country’, type: ‘string’, map: ‘3’ }
],
datatype: ‘array’
};
}
}
</script>

<style>
</style>

[HristoParticipant]

Hello rr_187,

Please, take a look at this code snippet:

<template>
    <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns"
             :columnsresize="true" :sortable="true">
    </JqxGrid>
</template>
<script>
    // import { JqxGrid, jqx } from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
	import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue";
	
    export default {
        components: {
            JqxGrid
        },
        data: function () {
            return {
                getWidth: 650,	// getWidth('grid'),
				// eslint-disable-next-line
                dataAdapter: new jqx.dataAdapter(this.source),
                columns: [
                    { text: 'Company Name', datafield: 'CompanyName', width: 200 },
                    { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                    { text: 'Contact Title', datafield: 'Title', width: 100 },
                    { text: 'Address', datafield: 'Address', width: 100 },
                    { text: 'City', datafield: 'City', width: 100 },
                    { text: 'Country', datafield: 'Country' }
                ]
            }
        },
        beforeCreate: function () {
            this.source = {
                localdata: [
                    ['Alfreds Futterkiste', 'Maria Anders', 'Sales Representative', 'Obere Str. 57', 'Berlin', 'Germany'],
                    ['Ana Trujillo Emparedados y helados', 'Ana Trujillo', 'Owner', 'Avda. de la Constitucin 2222', 'Mxico D.F.', 'Mexico'],
                    ['Antonio Moreno Taquera', 'Antonio Moreno', 'Owner', 'Mataderos 2312', 'Mxico D.F.', 'Mexico'],
                    ['Around the Horn', 'Thomas Hardy', 'Sales Representative', '120 Hanover Sq.', 'London', 'UK'],
                    ['Berglunds snabbkp', 'Christina Berglund', 'Order Administrator', 'Berguvsvgen 8', 'Lule', 'Sweden'],
                    ['Blauer See Delikatessen', 'Hanna Moos', 'Sales Representative', 'Forsterstr. 57', 'Mannheim', 'Germany'],
                    ['Blondesddsl pre et fils', 'Frdrique Citeaux', 'Marketing Manager', '24, place Klber', 'Strasbourg', 'France'],
                    ['Blido Comidas preparadas', 'Martn Sommer', 'Owner', 'C/ Araquil, 67', 'Madrid', 'Spain'],
                    ['Bon app', 'Laurence Lebihan', 'Owner', '12, rue des Bouchers', 'Marseille', 'France'],
                    ['Bottom-Dollar Markets', 'Elizabeth Lincoln', 'Accounting Manager', '23 Tsawassen Blvd.', 'Tsawassen', 'Canada'],
                    ['B\'s Beverages', 'Victoria Ashworth', 'Sales Representative', 'Fauntleroy Circus', 'London', 'UK'],
                    ['Cactus Comidas para llelet', 'Patricio Simpson', 'Sales Agent', 'Cerrito 333', 'Buenos Aires', 'Argentina'],
                    ['Centro comercial Moctezuma', 'Francisco Chang', 'Marketing Manager', 'Sierras de Granada 9993', 'Mxico D.F.', 'Mexico'],
                    ['Chop-suey Chinese', 'Yang Wang', 'Owner', 'Hauptstr. 29', 'Bern', 'Switzerland'],
                    ['Comrcio Mineiro', 'Pedro Afonso', 'Sales Associate', 'Av. dos Lusadas, 23', 'Sao Paulo', 'Brazil'],
                    ['Consolidated Holdings', 'Elizabeth Brown', 'Sales Representative', 'Berkeley Gardens 12 Brewery', 'London', 'UK'],
                    ['Drachenblut Delikatessen', 'Sven Ottlieb', 'Order Administrator', 'Walserweg 21', 'Aachen', 'Germany'],
                    ['Du monde entier', 'Janine Labrune', 'Owner', '67, rue des Cinquante Otages', 'Nantes', 'France'],
                    ['Eastern Connection', 'Ann Devon', 'Sales Agent', '35 King George', 'London', 'UK'],
                    ['Ernst Handel', 'Roland Mendel', 'Sales Manager', 'Kirchgasse 6', 'Graz', 'Austria']
                ],
                datafields: [
                    { name: 'CompanyName', type: 'string', map: '0' },
                    { name: 'ContactName', type: 'string', map: '1' },
                    { name: 'Title', type: 'string', map: '2' },
                    { name: 'Address', type: 'string', map: '3' },
                    { name: 'City', type: 'string', map: '4' },
                    { name: 'Country', type: 'string', map: '5' }
                ],
                datatype: 'array'
            };
        }
    }
</script>

<style>
</style>

<style src='./assets/styles/jqwidgets/jqx.base.css'></style>
<style src='./assets/styles/jqwidgets/jqx.material-green.css'></style>

Also, I would like to suggest you look at this tutorial (there you could find a lot of useful information).
Please, let me know if you have trouble with this.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[rr_187Participant]

Hello Hristo,

Now error is not coming.

But grid results in blank page with square border.

Code is same as above.

Thank you.

[HristoParticipant]

Hello rr_187,

Please, try to include the styles folder in the assets folder.
You could find it in the node_modules folder in the node_modules\jqwidgets-scripts\jqwidgets path.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[rr_187Participant]

Hello Hristo,

I already included styles folder in the assets folder.

But didn’t got succeed.

If possible can you share file where you are including css & js files (like index.html)

Thank you

[HristoParticipant]

Hello rr_187,

The styles folder is added in the following \my-app\src\assets\styles path.
Also, I would like to mention that I use this tutorial as a base.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[rr_187Participant]

Hello Hristo,

All the tutorials provided are of Vue version – 2.6.0

Have ever tried with Vue 3.0 or above version, is it working for them?

Jqwidget controls where databinding is there, it is having problem, otherwise it’s working fine.
For eg. – JqxGrid, JqxBarGauge having problem, JqxButton is working fine

Thank you

[HristoParticipant]

Hello rr_187,

I would like to mention that the jQWidgets work with the Vue 2.
Please, let me know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[rr_187Participant]

Hello Hristo,

I understood jQWidgets work with Vue 2.

I want jQWidgets to implement in Vue 3, will it work?

Thank you

[Author]

Posts