jQuery UI Widgets Forums Vue jqxgrid didn't work in vue3

This topic contains 1 reply, has 2 voices, and was last updated by  Martin 1 year, 6 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • jqxgrid didn't work in vue3 #114240

    gy.lee
    Participant

    hello. I use Vue3. when i use grid, jqwidgets can not get data.
    dataAdapter do not anything
    this is my code.and log show nothing

    
        <div id="gridTest">
          <testgrid></testgrid>
        </div>
        <script type="text/x-template" id="port-templates">
          <JqxGrid :width="getWidth" :source="dataAdapter" :columns="columns" :columnsresize="true">
          </JqxGrid>
        </script>
        <script type="module">
          import JqxGrid from "/resources/js/jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.js";
          const testH = Vue.createApp({});
    
          testH.component('testgrid',{
            components: {
                JqxGrid
            },
            template: '#port-templates',
            data: function () {
                return {
                    getWidth: '100%',
                    dataAdapter: new jqx.dataAdapter(this.source),
                    columns: [
                        { text: 'Company Name', datafield: 'CompanyName', width: 250 },
                        { text: 'Contact Name', datafield: 'ContactName', width: 150 },
                        { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
                        { text: 'City', datafield: 'City', width: 120 },
                        { text: 'Country', datafield: 'Country' }
                    ]
                }
            },
            beforeCreate: function () {
                const data = '[{ "CompanyName": "Alfreds Futterkiste", "ContactName": "Maria Anders", "ContactTitle": "Sales Representative", "Address": "Obere Str. 57", "City": "Berlin", "Country": "Germany" }, { "CompanyName": "Ana Trujillo Emparedados y helados", "ContactName": "Ana Trujillo", "ContactTitle": "Owner", "Address": "Avda. de la Constitucin 2222", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Antonio Moreno Taquera", "ContactName": "Antonio Moreno", "ContactTitle": "Owner", "Address": "Mataderos 2312", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Around the Horn", "ContactName": "Thomas Hardy", "ContactTitle": "Sales Representative", "Address": "120 Hanover Sq.", "City": "London", "Country": "UK" }, { "CompanyName": "Berglunds snabbkp", "ContactName": "Christina Berglund", "ContactTitle": "Order Administrator", "Address": "Berguvsvgen 8", "City": "Lule", "Country": "Sweden" }, { "CompanyName": "Blauer See Delikatessen", "ContactName": "Hanna Moos", "ContactTitle": "Sales Representative", "Address": "Forsterstr. 57", "City": "Mannheim", "Country": "Germany" }, { "CompanyName": "Blondesddsl pre et fils", "ContactName": "Frdrique Citeaux", "ContactTitle": "Marketing Manager", "Address": "24, place Klber", "City": "Strasbourg", "Country": "France" }, { "CompanyName": "Blido Comidas preparadas", "ContactName": "Martn Sommer", "ContactTitle": "Owner", "Address": "C\/ Araquil, 67", "City": "Madrid", "Country": "Spain" }, { "CompanyName": "Bon app\'", "ContactName": "Laurence Lebihan", "ContactTitle": "Owner", "Address": "12, rue des Bouchers", "City": "Marseille", "Country": "France" }, { "CompanyName": "Bottom-Dollar Markets", "ContactName": "Elizabeth Lincoln", "ContactTitle": "Accounting Manager", "Address": "23 Tsawassen Blvd.", "City": "Tsawassen", "Country": "Canada" }, { "CompanyName": "B\'s Beverages", "ContactName": "Victoria Ashworth", "ContactTitle": "Sales Representative", "Address": "Fauntleroy Circus", "City": "London", "Country": "UK" }, { "CompanyName": "Cactus Comidas para llevar", "ContactName": "Patricio Simpson", "ContactTitle": "Sales Agent", "Address": "Cerrito 333", "City": "Buenos Aires", "Country": "Argentina" }, { "CompanyName": "Centro comercial Moctezuma", "ContactName": "Francisco Chang", "ContactTitle": "Marketing Manager", "Address": "Sierras de Granada 9993", "City": "Mxico D.F.", "Country": "Mexico" }, { "CompanyName": "Chop-suey Chinese", "ContactName": "Yang Wang", "ContactTitle": "Owner", "Address": "Hauptstr. 29", "City": "Bern", "Country": "Switzerland" }, { "CompanyName": "Comrcio Mineiro", "ContactName": "Pedro Afonso", "ContactTitle": "Sales Associate", "Address": "Av. dos Lusadas, 23", "City": "Sao Paulo", "Country": "Brazil" }, { "CompanyName": "Consolidated Holdings", "ContactName": "Elizabeth Brown", "ContactTitle": "Sales Representative", "Address": "Berkeley Gardens 12 Brewery", "City": "London", "Country": "UK" }, { "CompanyName": "Drachenblut Delikatessen", "ContactName": "Sven Ottlieb", "ContactTitle": "Order Administrator", "Address": "Walserweg 21", "City": "Aachen", "Country": "Germany" }, { "CompanyName": "Du monde entier", "ContactName": "Janine Labrune", "ContactTitle": "Owner", "Address": "67, rue des Cinquante Otages", "City": "Nantes", "Country": "France" }, { "CompanyName": "Eastern Connection", "ContactName": "Ann Devon", "ContactTitle": "Sales Agent", "Address": "35 King George", "City": "London", "Country": "UK" }, { "CompanyName": "Ernst Handel", "ContactName": "Roland Mendel", "ContactTitle": "Sales Manager", "Address": "Kirchgasse 6", "City": "Graz", "Country": "Austria"}]';
                this.source = {
                    datatype: 'json',
                    datafields: [
                        { name: 'CompanyName', type: 'string' },
                        { name: 'ContactName', type: 'string' },
                        { name: 'ContactTitle', type: 'string' },
                        { name: 'Address', type: 'string' },
                        { name: 'City', type: 'string' },
                        { name: 'Country', type: 'string' }
                    ],
                    localdata: data
                };
            }
          });
    
          testH.mount('#gridTest');
    

    this is vue_jqxgrid.js

    
    import '../jqwidgets/jqxcore.js';
    import '../jqwidgets/jqxdata.js';
    import '../jqwidgets/jqxdata.export.js';
    import '../jqwidgets/jqxbuttons.js';
    import '../jqwidgets/jqxbuttongroup.js';
    import '../jqwidgets/jqxscrollbar.js'
    import '../jqwidgets/jqxmenu.js'
    import '../jqwidgets/jqxlistbox.js'
    import '../jqwidgets/jqxdropdownlist.js'
    import '../jqwidgets/jqxcombobox.js'
    import '../jqwidgets/jqxnumberinput.js'
    import '../jqwidgets/jqxcheckbox.js'
    import '../jqwidgets/globalization/globalize.js'
    import '../jqwidgets/jqxcalendar.js'
    import '../jqwidgets/jqxnumberinput.js'
    import '../jqwidgets/jqxdatetimeinput.js'
    import '../jqwidgets/jqxgrid.js'
    import '../jqwidgets/jqxgrid.edit.js'
    import '../jqwidgets/jqxgrid.pager.js'
    import '../jqwidgets/jqxgrid.selection.js'
    import '../jqwidgets/jqxgrid.filter.js'
    import '../jqwidgets/jqxgrid.sort.js'
    import '../jqwidgets/jqxgrid.storage.js'
    import '../jqwidgets/jqxgrid.grouping.js'
    import '../jqwidgets/jqxgrid.export.js'
    import '../jqwidgets/jqxgrid.columnsresize.js'
    import '../jqwidgets/jqxgrid.columnsreorder.js'
    import '../jqwidgets/jqxgrid.aggregates.js'
    import '../jqwidgets/jqxgrid.chart.js'
    
    export default {
        template: 

    <div v-bind:id=”id”>
    <slot></slot>
    </div>`,
    props: {
    altrows: Boolean,
    altstart: Number,
    altstep: Number,
    autoshowloadelement: Boolean,
    autoshowfiltericon: Boolean,
    autoshowcolumnsmenubutton: Boolean,
    showcolumnlines: Boolean,
    showrowlines: Boolean,
    showcolumnheaderlines: Boolean,
    adaptive: Boolean,
    adaptivewidth: Number,
    contents are the same as the vue_jqxgrid.vue file after that.
    `

    jqxgrid didn't work in vue3 #114258

    Martin
    Participant

    Hello gy.lee,

    Thank you for the feedback!
    I would suggest you use our Smart Grid with Vue3.

    Best regards,
    Martin Yotov

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

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

You must be logged in to reply to this topic.