jQuery UI Widgets Forums Form Data not showing In jqxgrid using vue2

Tagged: 

This topic contains 3 replies, has 3 voices, and was last updated by  admin 6 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • Data not showing In jqxgrid using vue2 #133859

    Sai Surya
    Participant

    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

    Data not showing In jqxgrid using vue2 #133861

    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/

    Data not showing In jqxgrid using vue2 #133958

    Sai Surya
    Participant

    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

    Data not showing In jqxgrid using vue2 #133967

    admin
    Keymaster

    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

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.