jQuery UI Widgets Forums Vue(New) 'jqx' is not defined

This topic contains 9 replies, has 4 voices, and was last updated by  Hristo 1 day, 16 hours ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
  • 'jqx' is not defined #102406

    zft1999
    Participant

    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.

    'jqx' is not defined #102409

    Hristo
    Participant

    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

    'jqx' is not defined #113115

    JenkeNg
    Participant

    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)

    'jqx' is not defined #113136

    Hristo
    Participant

    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

    'jqx' is not defined #115039

    rr_187
    Participant

    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

    'jqx' is not defined #115043

    Hristo
    Participant

    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

    'jqx' is not defined #115046

    rr_187
    Participant

    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>

    'jqx' is not defined #115047

    Hristo
    Participant

    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

    • This reply was modified 5 days, 15 hours ago by  Hristo.
    'jqx' is not defined #115053

    rr_187
    Participant

    Hello Hristo,

    Now error is not coming.

    But grid results in blank page with square border.

    Code is same as above.

    Thank you.

    • This reply was modified 5 days, 11 hours ago by  rr_187.
    'jqx' is not defined #115059

    Hristo
    Participant

    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

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.