Data not showing In jqxgrid using vue2

[Sai SuryaParticipant]

Hi there I Am Using Vue.js version 2 and Just Started JqWidgets (jqx-grid) in this, I am facing issues like I got the expected data as my response but that’s not showing in the grid here’s the source code of my app

Vue component:

<template>
    <div>
      <JqxGrid :gridoptions="gridoptions" :autoheight="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,
          filters: null,
          sorting: null,
          gridoptions: {
            width: "100%",
        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%" }
        ],
        pageable: true,
        filterable: true,
        sortable: true,
        pagerheight: 26,
        pagesize: 10,
          },
          dataSource: {
            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",
          },
        };
      },
  computed: {
    ...mapGetters(['getGridData','getTotalRecordSize']),
  },
  methods: {
    ...mapActions(['GetGridResponse']),

    async initializeGrid() {
      await this.GetGridResponse({PageNumber: this.pagenumber,SelectedPageSize: this.SelectedPageSize,FilterEvent: this.filters,SortInfo: this.sorting});
      this.dataSource.actualdata = this.getGridData; 
      this.gridoptions.source = this.dataSource.actualdata;
      const desiredPageSize = Math.min(this.SelectedPageSize, this.getTotalRecordSize);
      console.log(this.dataSource.actualdata.length)
      this.gridoptions.pagesize = desiredPageSize;
      this.deletedVariables();  
      this.$refs.mygrid.setOptions(this.gridoptions);
      this.$refs.mygrid.updatebounddata();
},
  },
  async mounted() {
    await this.initializeGrid();
  }
}
</script>

sample data:
{"document_id":977,"parent_document_id":"NULL","family_id":977,"Path":"brawner, sadnra\\sandra_brawner_000.pst\\Archive PST Store\\brawner-s\\Brawner, Sandra F\\Brawner, Sandra F\\'Sent Mail","ONE_PgCount":1,"Sys_DateLoaded":"2023-02-09T03:03:47.83","PageCount":1,"Custodian":"brawner, sadnra","All Custodians":"brawner, sadnra","DocType":"EMAIL","FileDescription":"MS Outlook Message","DocExt":"msg","SourceApp":"Microsoft Outlook","FileName":"NULL","FileSize":36864,"Conversation":"Apology","ConversationIndex":"01C0C7CAFC80F217ED185DEE479EB672BB344674E9C6","MailClient":"Microsoft Outlook","MailStore":"sandra_brawner_000.pst","MailSubject":"RE: Apology","From":"Sandra F Brawner <Sandra F Brawner>","TO":"Jeffrey A Shankman <Jeffrey A Shankman/ENRON@enronXgate@ENRON>","CC":"NULL","BCC":"NULL","AttachCount":0,"Attach":"NULL","Importance":"Normal","Sensitivity":"Normal"},{"document_id":978,"parent_document_id":"NULL","family_id":978,"Path":"brawner, sadnra\\sandra_brawner_000.pst\\Archive PST Store\\brawner-s\\Brawner, Sandra F\\Brawner, Sandra F\\'Sent Mail","ONE_PgCount":1,"Sys_DateLoaded":"2023-02-09T03:03:47.83","PageCount":1,"Custodian":"brawner, sadnra","All Custodians":"brawner, sadnra","DocType":"EMAIL","FileDescription":"MS Outlook Message","DocExt":"msg","SourceApp":"Microsoft Outlook","FileName":"NULL","FileSize":36864,"Conversation":"Misc","ConversationIndex":"01C0C893741A0CF4198BDF80496BACD77D98ABA182C6","MailClient":"Microsoft Outlook","MailStore":"sandra_brawner_000.pst","MailSubject":"Misc","From":"Sandra F Brawner <Sandra F Brawner>","TO":"Kennethbrawner <Kennethbrawner@msn.com>","CC":"NULL","BCC":"NULL","AttachCount":0,"Attach":"NULL","Importance":"Normal","Sensitivity":"Normal"}

please help me with this

[svetoslav_borislavovParticipant]

Hi,

Please see grid demos to see how to bind properties to the grid. You cannot pass :gridoptions=”gridoptions” to the element.
Also in the demos you will see how to bind the localdata.
Here are demos with jqxgrid in vue: https://www.jqwidgets.com/vue/vue-grid/#https://www.jqwidgets.com/vue/vue-grid/vue-grid-bindingtojsarray.htm

Best regards,
Svetoslav Borislavov

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

[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

[adminKeymaster]

Hi,

I looked into the provided code, but I could not see any data source added to the Grid. You use a custom variable called actualdata, but we do not use such when defining a data source. If you want to data bind the Grid to a local data source, you should be using source.localdata. Please, take a look at any of the Grid samples available and my suggestion is to first try some of them like binding to a local array and then continue with more complex tasks.

Hope this helps.

Regards,
Peter

[Author]

Posts