jQuery UI Widgets › Forums › Vue › Setting "ref" on createInstance widget
Tagged: createInstance
This topic contains 5 replies, has 3 voices, and was last updated by admin 4 years, 7 months ago.
-
Author
-
Hello,
I am generating
jqxGrid
instance dynamically, and trying to set the Vue component “ref
” on thejqxGrid
instance I am creating withjqwidgets.createInstance("#selector", "jqxGrid", options)
.I am not able to specify a property “ref” in the options, and while the
jqxGrid
itself is created no problem, it is not a VueComponent that I can reference later for other needs by first getting to itvia this.$refs.dynamicgrid.
…;I have looked at the examples for
jqxGrid
and while there are some that use thecreateInstance()
, none of the examples I could find further reference thethis.$refs.
Is there a way to pass a ref to the
createInstance
call or set theref
in any other way?Thank you!
Hello poundbang,
Could you provide one simple and whole example that demonstrates your case?
Also, with more details, and what is your final goal?
If you want to have instance as a variable for the component you could try this approach:
var grid = jqwidgets.createInstance("#selector", "jqxGrid", options);
Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com<template> <div> <h2> Services </h2> <JqxGrid :width="'100%'" :height="'90%'" :source="dataAdapter" :columns="columns" @rowselect="rowselect($event)" ref="svcGrid"> </JqxGrid> <h2 ref="Assets">Assets</h2> <div id="assetGridContainer" ref="assetGridContainer"></div> <JqxButton @click="csvBtnOnClick()">Export to CSV</JqxButton> </div> </template> <script> import JqxGrid from "jqwidgets-scripts/jqwidgets-vue/vue_jqxgrid.vue"; import JqxButton from "jqwidgets-scripts/jqwidgets-vue/vue_jqxbuttons.vue"; export default { components: { JqxGrid, JqxButton, }, data: function () { return { dataAdapter: new jqx.dataAdapter(this.source, { async: true, autoBind: true, loadError: function (xhr, status, error) {}, loadComplete: function () {}, }), columns: [ {text: 'SvcName', datafield: 'SvcName'}, {text: 'AssetCount', datafield: 'AssetCount'}, ], } }, beforeCreate: function () { this.source = { datafields: [ {name: 'SvcName', type: 'string', map: 'SvcName'}, {name: 'AssetCount', type: 'number', map: 'AssetCount'}, ], datatype: 'json', root: 'data', url: "http://127.0.0.1:3000/data/assets" }; }, methods: { csvBtnOnClick: function () { this.$refs.assetGrid.exportdata('csv', 'jqxGrid'); }, assetDetails: function (event) { if (!event.args.row){ return false; } // Fetch asset details return true; }, rowselect: function (event) { const row = event.args.row; // Set Service Asset details grid let container = document.createElement('div'); container.id = <code>asset${row.uid}</code>; let assetGridContainer = document.getElementById('assetGridContainer') while (assetGridContainer.firstChild) { assetGridContainer.removeChild(assetGridContainer.firstChild); } assetGridContainer.appendChild(container); let containerID = <code>assetGrid${row.uid}</code>; // Create and populate Host table let assetSource = { dataFields: [ {name: 'Asset', type: 'string'}, {name: 'AssetDetails', type: 'string'}, ], localdata: row.AssetDetails, datatype: 'array' } let assetAdapter = new jqx.dataAdapter(assetSource); let columns = [ {text: 'Asset', dataField: 'HostIP'}, {text: 'AssetDetails', dataField: 'AssetDetails'}, ]; let options = { source: assetAdapter, columns: columns, }; let assetGrid= jqwidgets.createInstance(<code>#${containerID}</code>, 'jqxGrid', options); assetGrid.addEventHandler('rowselect', this.assetDetails.bind(event)); // Need to grab "ref" of the assetGrid to // - export rows for entire assetGrid // - export checked rows for assetGrid // When I create JqxGrid in a declarative fashion I can pass a ref to VueComponent like so: // <JqxGrid ref="myDeclarativeAssetGrid" :columns="columns"> // // and then use the following to export: // <JqxButton @click="csvBtnOnClick()">Export to CSV</JqxButton> // // csvBtnOnClick: function () { // this.$refs.myDeclarativeAssetGrid.exportdata('csv', 'jqxGrid'); // (I can find a this.$refs.myDeclarativeAssetGrid no problem) // But when I create assetGrid via createInstance(), I cannot find the thjis.$refs.assetGrid for the // same // How can I get a ref to assetGrid? // // In my testing createInstance() does not create a VueComponent that // has a ref that I can reference. }, }, } </script>
Hello poundbang,
You need to use the method directly in this instance.
I try this example as below:let assetSource = { dataFields: [ { name: "Asset", type: "string" }, { name: "AssetDetails", type: "string" } ], // localdata: row.AssetDetails, localdata: [ { HostIP: "Asset 1", AssetDetails: "AssetDetails 1" }, { HostIP: "Asset 2", AssetDetails: "AssetDetails 2" } ], datatype: "array" }; let assetAdapter = new jqx.dataAdapter(assetSource); let columns = [ { text: "Asset", dataField: "HostIP" }, { text: "AssetDetails", dataField: "AssetDetails" } ]; let options = { source: assetAdapter, columns: columns }; let assetGrid = jqwidgets.createInstance( <code>#${containerID}</code>, "jqxGrid", options ); setTimeout(() => { assetGrid.exportdata("csv", "AssetGrid"); }, 800);
I hope this will help.
Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.comThank you, Hristo! This works.
Thanks for the update, poundbang
-
AuthorPosts
You must be logged in to reply to this topic.