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


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 {








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.



Marked as answer
Live Chat Icon For mobile
Up arrow icon