jQuery UI Widgets Forums Vue Setting "ref" on createInstance widget

This topic contains 5 replies, has 3 voices, and was last updated by  admin 4 years, 7 months ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author

  • poundbang
    Participant

    Hello,

    I am generating jqxGrid instance dynamically, and trying to set the Vue component “ref” on the jqxGrid instance I am creating with jqwidgets.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 it via this.$refs.dynamicgrid.…;

    I have looked at the examples for jqxGrid and while there are some that use the createInstance(), none of the examples I could find further reference the this.$refs.

    Is there a way to pass a ref to the createInstance call or set the ref in any other way?

    Thank you!


    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com


    poundbang
    Participant
    
    <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>

    Hristo
    Participant

    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 Hristov

    jQWidgets team
    https://www.jqwidgets.com


    poundbang
    Participant

    Thank you, Hristo! This works.


    admin
    Keymaster

    Thanks for the update, poundbang

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.