Error with Globalize

[saagar.smParticipant]

Hi,

I am just starting out with JQWidgets, in an ASP.net MVC 5 application. I am using a datetimepicker from the latest version of JQWidgets.

During startup I get the below error :

JavaScript runtime error: Unable to get property ‘addCultureInfo’ of undefined or null reference

Any suggestions to correct this would be appreciated.

Thanks
Saagar

[Peter StoevKeymaster]

Hi Saagar,

Please, refer to http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxdatetimeinput/jquery-datetimeinput-getting-started.htm to learn how to use the widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[Sai SuryaParticipant]

Hi there,
I am working in Vue,
I was fascinated to work with jqwidgets especially jqx-grid
while working with that am facing this issue
Uncaught TypeError: Cannot set properties of undefined (setting ‘Globalize’)
at globalize.js?v=734a8b11:58:19
at globalize.js?v=734a8b11:1607:2
please help me to get rid of it

Thanks
Sai Surya

[svetoslav_borislavovParticipant]

Hi,

Please visit the following topic to see how to implement localization with jqxGrid:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-localization.htm?search=

I hope this helps!

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Sai SuryaParticipant]

Hi there,
I am working in Vue.js,
everything showing on the website except the jqx-grid data
particularly am noticed in vue tab on inspecting page jqx-adapter has _source data but not in web page

Grid and Grid data not showing

here is my code:
<template>
<div>
<JqxGrid
ref=”myGrid”
:width=”getWidth”
:source=”dataAdapter”
:columns=”columns”
:columnsresize=”true”
:sortable=”true”
></JqxGrid>
<div style=”margin-top: 20px”>
<div style=”float: left”>
<JqxButton @click=”addRecord()”>Add Record</JqxButton>
<br>
<br>
<JqxButton @click=”updateRecord()”>Update Record</JqxButton>
</div>
</div>
</div>
</template>

<script>
import JqxGrid from “/node_modules/jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue”;
import JqxButton from “/node_modules/jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue”;

export default {
components: {
JqxButton,
JqxGrid
},
data: function() {
return {
getWidth: 400,
dataAdapter: null,
columns: [
{ text: “ID”, datafield: “id”, width: 50 },
{ 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” }
]
};
},
mounted() {
this.source = {
localdata: [
[
“Alfreds Futterkiste”,
“Maria Anders”,
“Sales Representative”,
“Obere Str. 57”,
“Berlin”,
“Germany”,
1001
],
[
“Ana Trujillo Emparedados y helados”,
“Ana Trujillo”,
“Owner”,
“Avda. de la Constitucin 2222”,
“Mxico D.F.”,
“Mexico”,
1002
],
[
“Antonio Moreno Taquera”,
“Antonio Moreno”,
“Owner”,
“Mataderos 2312”,
“Mxico D.F.”,
“Mexico”,
1003
],
[
“Around the Horn”,
“Thomas Hardy”,
“Sales Representative”,
“120 Hanover Sq.”,
“London”,
“UK”,
1004
]
],
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” },
{ name: “id”, type: “number”, map: “6” }
],
datatype: “array”,
id: “id”
};
this.dataAdapter = new jqx.dataAdapter(this.source);
},
methods: {
addRecord: function() {
console.log(“addRow”);
const newRecord = {
CompanyName: “CompanyName Test”,
ContactName: “ContactName Test”,
Title: “Title Test”,
Address: “Address Test”,
City: “City Test”,
Country: “Country Test”
};
this.$refs.myGrid.addrow(1005, newRecord, “last”);
},
updateRecord: function() {
const newRecordUpdates = {
CompanyName: “Berglunds snabbkp”,
ContactName: “Christina Berglund”,
Title: “Order Administrator”,
Address: “Berguvsvgen 8”,
City: “Lule”,
Country: “London”
};
this.$refs.myGrid.updaterow(1005, newRecordUpdates);
}
}
};
</script>
<style>
</style>

please notify me what gets wrong

Thanks & Regards
Sai Surya

[svetoslav_borislavovParticipant]

Hi,

You are setting the data in the mounted() hook, but it should be set in the beforeCreate.
Here is the fixed version:

<template>
<div>
<JqxGrid
ref=”myGrid”
:width=”getWidth”
:source=”dataAdapter”
:columns=”columns”
:columnsresize=”true”
:sortable=”true”
></JqxGrid>
<div style=”margin-top: 20px”>
<div style=”float: left”>
<JqxButton @click=”addRecord()”>Add Record</JqxButton>
<br />
<br />
<JqxButton @click=”updateRecord()”>Update Record</JqxButton>
</div>
</div>
</div>
</template>

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

export default {
components: {
JqxButton,
JqxGrid,
},
data: function () {
return {
getWidth: 400,
dataAdapter: new jqx.dataAdapter(this.source),
columns: [
{ text: ‘ID’, datafield: ‘id’, width: 50 },
{ 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() {
this.source = {
localdata: [
[‘Alfreds Futterkiste’, ‘Maria Anders’, ‘Sales Representative’, ‘Obere Str. 57’, ‘Berlin’, ‘Germany’, 1001],
[
‘Ana Trujillo Emparedados y helados’,
‘Ana Trujillo’,
‘Owner’,
‘Avda. de la Constitucin 2222’,
‘Mxico D.F.’,
‘Mexico’,
1002,
],
[‘Antonio Moreno Taquera’, ‘Antonio Moreno’, ‘Owner’, ‘Mataderos 2312’, ‘Mxico D.F.’, ‘Mexico’, 1003],
[‘Around the Horn’, ‘Thomas Hardy’, ‘Sales Representative’, ‘120 Hanover Sq.’, ‘London’, ‘UK’, 1004],
],
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’ },
{ name: ‘id’, type: ‘number’, map: ‘6’ },
],
datatype: ‘array’,
id: ‘id’,
}
},
methods: {
addRecord: function () {
console.log(‘addRow’)
const newRecord = {
CompanyName: ‘CompanyName Test’,
ContactName: ‘ContactName Test’,
Title: ‘Title Test’,
Address: ‘Address Test’,
City: ‘City Test’,
Country: ‘Country Test’,
}
this.$refs.myGrid.addrow(1005, newRecord, ‘last’)
},
updateRecord: function () {
const newRecordUpdates = {
CompanyName: ‘Berglunds snabbkp’,
ContactName: ‘Christina Berglund’,
Title: ‘Order Administrator’,
Address: ‘Berguvsvgen 8’,
City: ‘Lule’,
Country: ‘London’,
}
this.$refs.myGrid.updaterow(1005, newRecordUpdates)
},
},
}
</script>

Best regards,
Svetoslav Borislavov

jQWidgets Team
https://www.jqwidgets.com/

[Author]

Posts