[rr_187Participant]

Hello Hristo,

I understood jQWidgets work with Vue 2.

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

Thank you

[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

[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

[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.

[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>

[rr_187Participant]

Hello akashkatakam,

Can you share which js files added in index.html.

Thank you

[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

[Author]

Posts