Problem with remounting component instance

[JenkeNgParticipant]

I noticed that the id is randomly generated when the component is generated.

created: function () {
  this.id = 'jqxGrid' + JQXLite.generateID();
  this.componentSelector = '#' + this.id;
}

Each time you manually mount a component, a different id is generated,

{
              type: "documentGroup",
              width: "75%",
              items: [
                {
                  type: "documentPanel",
                  title: "",
                  contentContainer: "CenterPanel",
                  initContent: function () {
                    let maiGridComponent = Vue.extend(MainGrid);
                    new maiGridComponent({}).$mount("#mainGrid");
                  },
                },
              ],
            }

but it causes a problem. The last time the event bound to the selector will not find the selector, and an error will be reported

jqxcore.js?4485:15 Uncaught (in promise) Error: Invalid Selector - #jqxGridjqxa7ca78ce5665! Please, check whether the used ID or CSS Class name is correct.
    at init.b.fn.<computed> [as jqxGrid] (jqxcore.js?4485:15)
    at VueComponent.updatebounddata (vue_jqxgrid.vue?6f80:310)
    at eval (HandleMainGrid.vue?7a0d:349)

See this example

click ‘Create Grid’–>click ‘Render Data’–>click ‘Create Grid’ again

[MartinParticipant]

Hello JenkeNg,

The issue is that the gridContainer is replace with the JqxGrid the way you mount it and on the second time you create a grid it can not find it.
I have modified you Example to destroy the previous grid and add <div id="gridContainer"> again.
I think it is working fine now.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

Hi,Martin
Thank you for your reply, useful.
But now there is a new problem, do I know how to deal with it. Please see this example

1、Click “My Page” in the menu bar to open the page
It can be found that an operation on ribbon was performed in the mounted function

2、Select dropdownlist
You will find that you can’t operate this ribbon

Where did I go wrong???

[MartinParticipant]

Hello JenkeNg,

I have tested your Example and it is working fine. The dropdownlist successfully change the ribbon’s selected item.
I have only removed the line where you select a ribbon’s item at the end of the mounted hook. The jqxRibbon is not fully initialized there yet.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

No, you should do it like this
1、open”My Page”
You can select the ribbon normally when you open this page for the first time

2、close “My Page”

3、open “My Page” again
This ribbon will not work

[MartinParticipant]

Hello JenkeNg,

Then, I would suggest you to use a class selector for the ribbon, like this:
$('.jqx-ribbon').jqxRibbon("selectAt", ribbonIndex);

I have updated the Example and it is working fine.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[JenkeNgParticipant]

Hi,Martin
Thank you for your answer, perfect solution!

[Author]

Posts