[Sai SuryaParticipant]

Hi @svetoslav_borislavov, I have made the changes according to the documentation so far not getting any errors also not any data
here is my source code:

<template>
    <div>
      <JqxGrid :width="width" :source="dataAdapter" :pagesize="pagesize" :columns="columns"
             :pageable="true" :autoheight="true" :sortable="true"
             :altrows="true" :enabletooltip="true" :editable="true" ref="mygrid" />
    </div>
  </template>

<script>
import { mapGetters, mapActions } from 'vuex';
import JqxGrid from '../jqScripts/jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

export default {
  components: {
        JqxGrid
      },
      data() {
        return {
          SelectedPageSize: 10,
          pagenumber: 1,
          pagesize: 0,
            width: "100%",
            dataAdapter: new jqx.dataAdapter(this.source),
        columns: [
        { text: "ID", datafield: "document_id", width: "10%" },
    { text: "Parent-ID", datafield: "parent_document_id", width: "10%" },
    { text: "Family-ID", datafield: "family_id", width: "10%" },
    { text: "Path", datafield: "Path", width: "30%" },
    { text: "ONE-PageCount", datafield: "ONE_PgCount", width: "30%" } ,
    { text: "Inserted Date", datafield: "Sys_DateLoaded", width: "30%" },
    { text: "PageCount", datafield: "PageCount", width: "30%" },
    { text: "Custodian", datafield: "Custodian", width: "20%" },
    { text: "All Custodian", datafield: "All Custodian", width: "20%" },
    { text: "Type", datafield: "DocType", width: "20%" },
    { text: "Description", datafield: "FileDescription", width: "20%" },
    { text: "Exetenion", datafield: "DocExt", width: "20%" },
    { text: "Source", datafield: "SourceAPP", width: "20%" },
    { text: "Name", datafield: "FileName", width: "20%" },
    { text: "Size", datafield: "FileSize", width: "20%" },
    { text: "Conversation", datafield: "Conversation", width: "20%" },
    { text: "ConversationIndex", datafield: "ConversationIndex", width: "20%" },
    { text: "Client", datafield: "MailClient", width: "20%" },
    { text: "Store", datafield: "MailStore", width: "20%" },
    { text: "Subject", datafield: "MailSubject", width: "20%" },
    { text: "From", datafield: "From", width: "20%" },
    { text: "TO", datafield: "TO", width: "20%" },
    { text: "CC", datafield: "CC", width: "20%" },
    { text: "BCC", datafield: "BCC", width: "20%" },
    { text: "Count", datafield: "AttachCount", width: "20%" },
    { text: "Attached", datafield: "Attach", width: "20%" },
    { text: "Importance", datafield: "Importance", width: "20%" },
    { text: "Sensitivity", datafield: "Sensitivity", width: "20%" } 
        ],
        };
      },
  computed: {
    ...mapGetters(['getGridData','getTotalRecordSize']),
  },
  beforeCreate(){
    this.source= {
            datatype: "json",
        datafields: [
          { name: "document_id", type: "number" },
          { name: "parent_document_id", type: "string" },
          { name: "family_id", type: "string" },
          { name: "Path", type: "string"},
          { name: "ONE_PgCount", type: "string" },
          { name: "Sys_DateLoaded", type: "string" },
          { name: "PageCount", type: "number" },
          { name: "Custodian", type: "string" },
          { name: "All Custodian", type: "string" },
          { name: "DocType", type: "string" },
          { name: "FileDescription", type: "string" },
          { name: "DocExt", type: "string" },
          { name: "SourceAPP", type: "string" },
          { name: "FileName", type: "string" },
          { name: "FileSize", type: "number" },
          { name: "Conversation", type: "string" },
          { name: "ConversationIndex", type: "string" },
          { name: "MailClient", type: "string" },
          { name: "MailStore", type: "string" },
          { name: "MailSubject", type: "string" },
          { name: "From", type: "string" },
          { name: "TO", type: "string" },
          { name: "CC", type: "string" },
          { name: "BCC", type: "string" },
          { name: "AttachCount", type: "number" },
          { name: "Attach", type: "string" },
          { name: "Importance", type: "string" },
          { name: "Sensitivity", type: "string" }, 
        ],
        actualdata : [],
        id: "document_id",
          }
  },
  methods: {
    ...mapActions(['GetGridResponse']),

    async initializeGrid() {
      console.log(1);
      await this.GetGridResponse({PageNumber: this.pagenumber,SelectedPageSize: this.SelectedPageSize,FilterEvent:null,SortInfo:null});//,this.sorting,this.filters
      this.source.actualdata = this.GetGridData
      const desiredPageSize = Math.min(this.SelectedPageSize, this.getTotalRecordSize);
      this.pagesize = desiredPageSize;
      this.$refs.mygrid.updatebounddata();
      console.log(2);
},

    async onPageSizeChange(event) {
      this.SelectedPageSize = event.args.pagesize;
      this.pagenumber = 1;
      await this.initializeGrid()
    },
  },
  async mounted() {
    await this.initializeGrid();
  }
}
</script>

use the above sample data as it is and please help me with this

[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

[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

[Author]

Posts