[poundbangParticipant]

Thank you, Hristo! This works.

[poundbangParticipant]

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

[Author]

Posts