how to use refs with composition api

[Ricardo]

https://ej2.syncfusion.com/vue/documentation/treegrid/tool-bar/tool-bar-items/#custom-toolbar-items

in this example that use "this.$refs.treegrid.filterByColumn('taskName', 'startswith', 'Testing');".

how to use it with composition api ?

[Shek Mohammed Asiq Abdul Jabbar]

Hi Ricardo,

Thanks for reaching out Syncfusion support.

Regarding your query on how to use the refs with the composition API in the Tree Grid component, you can utilize the tree grid instance by initializing it in the following way discussed below.

import { ref } from 'vue';

 

export default {

    setup() {

        const treegrid = ref(null);

        const treegridData = [

           //// dataSource

        ];

        const toolbar = ref([{text: 'Quick Filter', tooltipText: 'Quick Filter', id: 'toolbarfilter', align:'Right'}]);

 

        const toolbarClick = (args) => {

          if (args.item.id === 'toolbarfilter') {

              treegrid.value.filterByColumn('taskName', 'startswith', 'Allocate');

          }

        }

 

        return {

          treegridData,

          toolbar,

          toolbarClick,

          treegrid

        };

    }

}

Please refer the sample here : https://www.syncfusion.com/downloads/support/directtrac/general/ze/VUE3_C~1-1856628211

Documentation for composition API : https://learnvue.co/tutorials/vue-lifecycle-hooks-guide

Instead of $refs, you can get the TreeGrid Instance from ref in the setup() while using Composition API.

Kindly get back to us for further assistance.

Regards,

Shek