We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

how to use refs with composition api

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 ?


1 Reply 1 reply marked as answer

SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team February 8, 2023 09:52 AM UTC

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


Marked as answer
Loader.
Live Chat Icon For mobile
Up arrow icon