How to put a DropDownList/ComboBox control in the Toolbar of the TreeGrid control

[Showching]

Hi,

I want to put a DropDownList/ComoBox control in the Toolbar of the TreeGrid control, could you please provide an example? Thanks a lot!

Best Regards,

Showching

[Farveen Sulthana Thameeztheen Basha]

Hi Showching, 

Thanks for contacting Syncfusion Support. 

Query#:- I want to put a DropDownList/ComoBox control in the Toolbar of the TreeGrid control 

We have checked your query and we have rendered Dropdownlist inside the Toolbar Items using dataBound event of the TreeGrid.  This event triggers on rendering TreeGrid and bind dropdownList for Toolbar element with dataBound event. 

Refer to the code below:- 

<ejs-treegrid 

        :dataSource="data" 

        :treeColumnIndex="0" 

        idMapping="TaskID" 

        parentIdMapping="parentID" 

        ref="treegrid" 

        :editSettings="editSettings" 

        :toolbar="toolbar" 

        :dataBound="dataBound" 

      > 

        <e-columns> 

          <e-column 

            field="TaskID" 

            headerText="Task ID" 

            width="90" 

            isPrimaryKey="true" 

          ></e-column> 

            .     .    . 

        </e-columns> 

      </ejs-treegrid> 

 

      <br /> 

    </div> 

  </div> 

</template> 

 

<script> 

import Vue from "vue"; 

import { 

  TreeGridComponent, 

  ColumnsDirective, 

  ColumnDirective, 

  Page, 

  Edit, 

  Toolbar, 

} from "@syncfusion/ej2-vue-treegrid"; 

import { DropDownList } from "@syncfusion/ej2-dropdowns"; 

export default { 

  components: { 

    "ejs-treegrid": TreeGridComponent, 

    "e-columns": ColumnsDirective, 

    "e-column": ColumnDirective, 

  }, 

  data() { 

    return { 

    }; 

  }, 

  provide: { 

    treegrid: [Page, Edit, Toolbar], 

  }, 

  methods: { 

    dataBound: function (args) { 

      if (args.requestType !== "refresh") { 

      durationObj = new DropDownList({ 

        dataSource: durationData,   // render dropdownList 

        fields: { value: "durationId", text: "durationValue" }, 

        floatLabelType: "Never", 

        placeholder: "Select a duration", 

      }); 

      const elem = document.querySelector(".e-toolbar-item"); 

      durationObj.appendTo(elem); 

    } 

   }, 

  }, 

}; 

</script> 

API Link:- https://ej2.syncfusion.com/vue/documentation/api/treegrid/#databound 

Screenshot:- 

 

Sample Link:-  https://codesandbox.io/s/tree-grid-custom-column-template-forked-gl2up 

Please get back to us if you need any further assistance. 

Regards, 

Farveen sulthana T