jQuery UI Widgets Forums Vue(New) vue grid with toorbar didn`t show anything

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Hristo 1 week, 6 days ago.

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

  • gy.lee
    Participant

    <div id=”toolbartest”>
    <toolbar-test></toolbar-test>
    </div>
    <script type=”module”>
    import JqxGrid from “/resources/js/jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.js”;
    import JqxWindow from “/resources/js/jqwidgets-scripts/jqwidgets-vue/vue_jqxwindow.js”;
    import JqxInput from “/resources/js/jqwidgets-scripts/jqwidgets-vue/vue_jqxinput.js”;
    import JqxButton from “/resources/js/jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.js”;
    import JqxDropDownList from “/resources/js/jqwidgets-scripts/jqwidgets-vue/vue_jqxdropdownlist.js”;
    Vue.component(‘toolbar-test’,{
    components: {
    JqxGrid,
    JqxWindow,
    JqxInput,
    JqxDropDownList,
    JqxButton
    },
    template: `
    <div>
    <JqxGrid
    ref=”myGrid”
    :width=”getWidth”
    :source=”dataAdapter”
    :columns=”columns”
    :columnsresize=”true”
    :sortable=”true”
    :showtoolbar=”true”
    :rendertoolbar=”createButtonsContainers”
    >
    </JqxGrid>
    </div>
    `,
    data: function () {
    return {
    getWidth: ‘100%’,
    dataAdapter: this.getAdapter(),
    columns: [
    { text: “Company Name”, datafield: “CompanyName”},
    { text: “Contact Name”, datafield: “ContactName”},
    { text: “Contact Title”, datafield: “Title”},
    { text: “Address”, datafield: “Address”},
    { text: “City”, datafield: “City”},
    { text: “Country”, datafield: “Country” },
    ],
    dropDownSource: [‘First Name’, ‘Last Name’, ‘Product’, ‘Quantity’, ‘Price’]
    }
    },
    mounted: function () {
    this.createButtons();
    },
    methods: {
    getAdapter: function () {
    let source =
    {
    localdata: [
    [
    “Alfreds Futterkiste”,
    “Maria Anders”,
    “Sales Representative”,
    “Obere Str. 57”,
    “Berlin”,
    “Germany”,
    ],
    [
    “Ana Trujillo Emparedados y helados”,
    “Ana Trujillo”,
    “Owner”,
    “Avda. de la Constitucin 2222”,
    “Mxico D.F.”,
    “Mexico”,
    ],
    [
    “Antonio Moreno Taquera”,
    “Antonio Moreno”,
    “Owner”,
    “Mataderos 2312”,
    “Mxico D.F.”,
    “Mexico”,
    ]
    ],
    datatype: ‘array’,
    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” }
    ],
    updaterow: (rowid, rowdata, commit) => {
    // synchronize with the server – send update command
    // call commit with parameter true if the synchronization with the server is successful
    // and with parameter false if the synchronization failed.
    commit(true);
    }
    };
    let dataAdapter = new jqx.dataAdapter(source);
    return dataAdapter;
    },
    createButtonsContainers: function (statusbar) {
    let buttonsContainer = document.createElement(‘div’);
    buttonsContainer.style.cssText = ‘overflow: hidden; position: relative; margin: 5px;’;
    let addButtonContainer = document.createElement(‘div’);
    let deleteButtonContainer = document.createElement(‘div’);
    let reloadButtonContainer = document.createElement(‘div’);
    let searchButtonContainer = document.createElement(‘div’);
    addButtonContainer.id = ‘addButton’;
    deleteButtonContainer.id = ‘deleteButton’;
    reloadButtonContainer.id = ‘reloadButton’;
    searchButtonContainer.id = ‘searchButton’;
    addButtonContainer.style.cssText = ‘float: left; margin-left: 5px;’;
    deleteButtonContainer.style.cssText = ‘float: left; margin-left: 5px;’;
    reloadButtonContainer.style.cssText = ‘float: left; margin-left: 5px;’;
    searchButtonContainer.style.cssText = ‘float: left; margin-left: 5px;’;
    buttonsContainer.appendChild(addButtonContainer);
    buttonsContainer.appendChild(deleteButtonContainer);
    buttonsContainer.appendChild(reloadButtonContainer);
    buttonsContainer.appendChild(searchButtonContainer);
    statusbar[0].appendChild(buttonsContainer);
    },
    createButtons: function () {
    let addButtonOptions = {
    width: 80, height: 25, value: ‘Add’
    }
    let addButton = jqwidgets.createInstance(‘#addButton’, ‘jqxButton’, addButtonOptions);
    let deleteButtonOptions = {
    width: 80, height: 25, value: ‘Delete’
    }
    let deleteButton = jqwidgets.createInstance(‘#deleteButton’, ‘jqxButton’, deleteButtonOptions);
    let reloadButtonOptions = {
    width: 80, height: 25, value: ‘Reload’
    }
    let reloadButton = jqwidgets.createInstance(‘#reloadButton’, ‘jqxButton’, reloadButtonOptions);
    let searchButtonOptions = {
    width: 80, height: 25, value: ‘Find’
    }
    let searchButton = jqwidgets.createInstance(‘#searchButton’, ‘jqxButton’, searchButtonOptions);
    // add new row.
    addButton.addEventHandler(‘click’, (event) => {
    let datarow = generatedata(1);
    this.$refs.myGrid.addrow(null, datarow[0]);
    });
    // delete selected row.
    deleteButton.addEventHandler(‘click’, (event) => {
    let selectedrowindex = this.$refs.myGrid.getselectedrowindex();
    let rowscount = this.$refs.myGrid.getdatainformation().rowscount;
    let id = this.$refs.myGrid.getrowid(selectedrowindex);
    this.$refs.myGrid.deleterow(id);
    });
    // reload grid data.
    reloadButton.addEventHandler(‘click’, (event) => {
    this.$refs.myGrid.source = this.getAdapter();
    });
    // search for a record.
    searchButton.addEventHandler(‘click’, (event) => {
    this.$refs.myWindow.open();
    this.$refs.myWindow.move(60, 60);
    });
    },
    findBtnOnClick: function () {
    this.$refs.myGrid.clearfilters();
    let searchColumnIndex = this.$refs.myDropDownList.selectedIndex;
    let datafield = ”;
    switch (searchColumnIndex) {
    case 0:
    datafield = ‘firstname’;
    break;
    case 1:
    datafield = ‘lastname’;
    break;
    case 2:
    datafield = ‘productname’;
    break;
    case 3:
    datafield = ‘quantity’;
    break;
    case 4:
    datafield = ‘price’;
    break;
    }
    let searchText = this.$refs.myInput.val();
    let filtergroup = new jqx.filter();
    let filter_or_operator = 1;
    let filtervalue = searchText;
    let filtercondition = ‘contains’;
    let filter = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
    filtergroup.addfilter(filter_or_operator, filter);
    this.$refs.myGrid.addfilter(datafield, filtergroup);
    // apply the filters.
    this.$refs.myGrid.applyfilters();
    },
    clearBtnOnClick: function () {
    this.$refs.myGrid.clearfilters();
    }
    }
    })
    new Vue({
    el: ‘#toolbartest’
    });
    </script>

    —> this code is work
    but, when i change source part like this

    
    datatype: 'json',
    datafields: [
      { name: 'CompanyName' },
      { name: 'ContactName' },
      { name: 'Title' },
      { name: 'Address' },
      { name: 'City' },
      { name: 'Country' }
    ],
    root: 'data',
    url: '/test/get_info.json
    

    toolbar didn`t show anything

    and this is error message

    
    vue.js:1897 Error: Invalid Selector - #addButton! Please, check whether the used ID or CSS Class name is correct.
        at m.fn.init.b.fn.<computed> [as jqxButton] (jqxcore.js:15)
        at Object.createInstance (jqxcore.js:15)
        at VueComponent.createButtons (firewall_info.do:2270)
        at VueComponent.mounted (firewall_info.do:2229)
        at invokeWithErrorHandling (vue.js:1863)
        at callHook (vue.js:4220)
        at Object.insert (vue.js:3146)
        at invokeInsertHook (vue.js:6341)
        at Vue.patch [as __patch__] (vue.js:6558)
        at Vue._update (vue.js:3946)
    logError @ vue.js:1897
    globalHandleError @ vue.js:1888
    handleError @ vue.js:1848
    invokeWithErrorHandling @ vue.js:1871
    callHook @ vue.js:4220
    insert @ vue.js:3146
    invokeInsertHook @ vue.js:6341
    patch @ vue.js:6558
    Vue._update @ vue.js:3946
    updateComponent @ vue.js:4067
    get @ vue.js:4478
    Watcher @ vue.js:4467
    mountComponent @ vue.js:4074
    Vue.$mount @ vue.js:9044
    Vue.$mount @ vue.js:11944
    Vue._init @ vue.js:5012
    Vue @ vue.js:5078
    (anonymous) @ firewall_info.do:2305
    
    

    Hristo
    Participant

    Hello gy.lee,

    You should check the received data from the server.
    Also, I saw that you create the jqxDataAdapter and prepare the source in the methods object.
    Please, check our demos the better place for this is in the beforeCreate function.
    I would like to suggest you look at this example:
    https://codesandbox.io/s/vue-template-6qx6g?fontsize=14&file=/src/App.vue
    If this does not help, please, provide us with one example that demonstrates your case in the CodeSandbox or somewhere else that could be run.

    Best Regards,
    Hristo Hristov

    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.