jqxgrid toolbar not showing

[jqwidgetsdevParticipant]

Hi,

Could use some help please. I am struggling with showing my grid’s toolbar in a tab.
I have tried to combine the two links, but something I don’t understand is causing this problem.

https://www.jqwidgets.com/vue/vue-grid/#https://www.jqwidgets.com/vue/vue-grid/vue-grid-toolbar.htm
https://www.jqwidgets.com/vue/vue-tabs/#https://www.jqwidgets.com/vue/vue-tabs/vue-tabs-integrationwithotherwidgets.htm

<template>
<div id="jqxWidget">
      <JqxTabs ref="myTabs"
           :width="'100%'" :initTabContent="initWidgets">
        <ul>
            <li style="margin-left: 30px;">
                <div style="height: 20px; margin-top: 5px;">
                    <div style="float: left;">
                        <img width="16" height="16" src="https://www.jqwidgets.com/vue/images/catalogicon.png" />
                    </div>
                    <div style="margin-left: 4px; vertical-align: middle; text-align: center; float: left;">
                        user
                    </div>
                </div>
            </li>
        </ul>
        <div style="overflow: hidden;">
            <div>
              <JqxGrid ref="myGridUser" :autoCreate="false"
                :width="'auto'" :columns="columns"
                :rendertoolbar="createButtonsContainers"
                :showtoolbar="true">
              </JqxGrid>
            </div>
        </div>
      </JqxTabs>
</div>
</template>
<script>
  import JqxTabs from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxtabs.vue';
  import JqxGrid from 'jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue';

  export default {
      components: {
          JqxTabs, JqxGrid
      },
      mounted: function () {
// doesn't work
          this.createButtons();
      },
      methods: {
            createButtonsContainers: function (toolbar) {
              console.log('createButtonsContainers');
              let buttonsContainer = document.createElement("div");
              buttonsContainer.style.cssText =
                "overflow: hidden; position: relative; margin: 5px;";
              let addButtonContainer = document.createElement("div");
              addButtonContainer.id = "addButton";
              addButtonContainer.style.cssText = "float: left; margin-left: 5px;";
              buttonsContainer.appendChild(addButtonContainer);
              toolbar[0].appendChild(buttonsContainer);
            },
            createButtons: function () {
              let addButtonOptions = {
                value: "Add"
              };
              let addButton = jqwidgets.createInstance(
                "#addButton",
                "jqxButton",
                addButtonOptions
              );
          },
          initWidgets: function (tab) {
              const cTabUser = 0;

              switch (tab) {
                  case cTabUser:
                      this.initGridUser();
                      break;
              }
          },
          initGridUser: function () {
              console.log('initGridUser');
              const source =
                  {
                    dataType: 'json',
                    dataFields: [
                      { name: 'name',  type: 'string' }
                    ],
                  id: 'name',
                  url: '../data/user.json'
                  };
              const dataAdapter = new jqx.dataAdapter(source);
              const settings = {
                  width: '100%',
                  height: '100%',
                  source: dataAdapter,
                  columns: [
                    { text: 'Name',  dataField: 'name', width: 120 }
                ]
              };
              const myGridUser = this.$refs.myGridUser.createComponent(settings);
          }
      }

  }
</script>

[svetoslav_borislavovParticipant]

Hi,

Here is a working demo with the wanted integration: https://codesandbox.io/s/dazzling-montalcini-kcj00o.
Your mistake is that you have not imported the jqxButton: import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue";

If you need further assistance, please let us know!

Best regards,
Svetoslav Borislavov

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

[jqwidgetsdevParticipant]

Hi Svetoslav,

Thanks for your quick reply, but in your example I don’t see the toolbar.

Please can you review and provide update?

Thanks in advance.

[svetoslav_borislavovParticipant]

Hi,

Sorry for the mistake, here is the new one: https://codesandbox.io/s/solitary-sun-5viw42.
If you need further assistance, please let us know!

Best regards,
Svetoslav Borislavov

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

[jqwidgetsdevParticipant]

Hi Svetoslav,

Thanks your example works well.

Sorry but I cannot get your project to work locally. I have copied your vue.js and package.json.

Any suggestions please? Maybe I send you my sample project?

autofill.js:9631 Uncaught TypeError: Cannot read properties of undefined (reading ‘encrypt’)
at 41 (autofill.js:9631:33)
at o (autofill.js:1:265)
at autofill.js:1:316
at 40../captureDdgGlobals (autofill.js:9479:49)
at o (autofill.js:1:265)
at autofill.js:1:316
at 9…/UI/HTMLTooltip (autofill.js:2531:25)
at o (autofill.js:1:265)
at autofill.js:1:316
at 7../DeviceInterface/AndroidInterface (autofill.js:2373:29)
41 @ autofill.js:9631
o @ autofill.js:1
(anonymous) @ autofill.js:1
40../captureDdgGlobals @ autofill.js:9479
o @ autofill.js:1
(anonymous) @ autofill.js:1
9…/UI/HTMLTooltip @ autofill.js:2531
o @ autofill.js:1
(anonymous) @ autofill.js:1
7../DeviceInterface/AndroidInterface @ autofill.js:2373
o @ autofill.js:1
(anonymous) @ autofill.js:1
43../DeviceInterface @ autofill.js:10031
o @ autofill.js:1
r @ autofill.js:1
(anonymous) @ autofill.js:1
log.js?1afd:24 [HMR] Waiting for update signal from WDS…
vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in mounted hook: “Error: Invalid Selector – #addButton! Please, check whether the used ID or CSS Class name is correct.”

found in

—> <App> at src/App.vue
<Root>
warn @ vue.runtime.esm.js?2b0e:619
logError @ vue.runtime.esm.js?2b0e:1884
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4213
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6340
patch @ vue.runtime.esm.js?2b0e:6559
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:9
./src/main.js @ app.js:3364
__webpack_require__ @ app.js:724
fn @ app.js:101
1 @ app.js:3378
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?2b0e:1888 Error: Invalid Selector – #addButton! Please, check whether the used ID or CSS Class name is correct.
at b.fn.<computed> [as jqxButton] (jqxcore.js?4485:15:1)
at Object.createInstance (jqxcore.js?4485:15:1)
at VueComponent.createButtons (App.vue?234e:70:1)
at VueComponent.mounted (App.vue?234e:50:1)
at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854:1)
at callHook (vue.runtime.esm.js?2b0e:4213:1)
at Object.insert (vue.runtime.esm.js?2b0e:3139:1)
at invokeInsertHook (vue.runtime.esm.js?2b0e:6340:1)
at Vue.patch [as __patch__] (vue.runtime.esm.js?2b0e:6559:1)
at Vue._update (vue.runtime.esm.js?2b0e:3939:1)
logError @ vue.runtime.esm.js?2b0e:1888
globalHandleError @ vue.runtime.esm.js?2b0e:1879
handleError @ vue.runtime.esm.js?2b0e:1839
invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1862
callHook @ vue.runtime.esm.js?2b0e:4213
insert @ vue.runtime.esm.js?2b0e:3139
invokeInsertHook @ vue.runtime.esm.js?2b0e:6340
patch @ vue.runtime.esm.js?2b0e:6559
Vue._update @ vue.runtime.esm.js?2b0e:3939
updateComponent @ vue.runtime.esm.js?2b0e:4060
get @ vue.runtime.esm.js?2b0e:4473
Watcher @ vue.runtime.esm.js?2b0e:4462
mountComponent @ vue.runtime.esm.js?2b0e:4067
Vue.$mount @ vue.runtime.esm.js?2b0e:8409
eval @ main.js?56d7:9
./src/main.js @ app.js:3364
__webpack_require__ @ app.js:724
fn @ app.js:101
1 @ app.js:3378
__webpack_require__ @ app.js:724
(anonymous) @ app.js:791
(anonymous) @ app.js:794
vue.runtime.esm.js?2b0e:8423 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools

[svetoslav_borislavovParticipant]

Hi,

Yes, you can send me your project here: svetoslavb1234@gmail.com

Best regards,
Svetoslav Borislavov

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

[jqwidgetsdevParticipant]

Hi Svetoslav,

Thanks, see email.

[Author]

Posts