Reply To: Data not showing In jqxgrid using vue2

[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