Posted 26 November 2018, 12:28 pm EST
Hi Sharad,
Thank you for the response. Actually, this example uses inline templates instead of template literals.
An inline template looks like this
…
Whereas a template literal can specified in a vue component instantiation. My code is like this:
Vue.Component("my-component",
{
props: {...},
methods:{...},
template:
`<tag>
...
<div><wj-group-panel id="thePanel"></wj-group-panel></div>
<my-grid id="theGrid"></my-grid>
...
</tag>`
});
Vue.Component("my-grid",
{
props: {...},
methods:{...},
template:
`<wj-flex-grid>
...
</wj-flex-grid>`
});
Note the backticks to delineate the literal. This is something called a Template Literal (introduced in ES6). It just lets you have a multi-line string.
Also note, I’ve tried placing the ID attribute on both the component and alternately on the grid tag itself.
I placed the binding code in the mounted event handler of the root Vue and while it can find the elements of the panel and the grid, neither of these elements are recognized by Wijmo as a control in the getControl() call:
wijmo.Control.getControl(document.getElementById('thePanel')); // RETURNS NULL
Internally, this call makes a call to wijmo.getElement(), which returns an object. But the next call fails because the object does not have this property defined: CTRL_KEY_
I mocked this code in my own script and tried setting that property on the object but learned that this is not a persistent object and is created new each time getElement() is called.
When I worked around that, I learned that additional properties are not present.
This isn’t surprising as I think some initialization step is not occurring to make the elements true wijmo controls before they are mounted in the DOM.
