vue grid with toorbar didn`t show anything

[gy.leeParticipant]

<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

[HristoParticipant]

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

[Author]

Posts