How to implement filtering functionality in Vue DropDownButton?

This article explains how to implement filtering functionality in Vue DropDownButton. The Syncfusion Vue DropDownButton component does not support filtering by default. However, you can implement this functionality by using the template support of the DropDownButton to render a ListBox component with filtering enabled. Below is a sample implementation demonstrating how to achieve this.

Code Snippet

Template

<template>
  <div class="control-section">
    <div>
      <div id="target">
        <ejs-listbox :allowFiltering="true" :dataSource='items'></ejs-listbox>
      </div>
      <ejs-dropdownbutton target='#target'>List Data</ejs-dropdownbutton>
    </div>
  </div>
</template>

Script

<script>
import { DropDownButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
import { ListBoxComponent } from "@syncfusion/ej2-vue-dropdowns";

export default {
  components: { 
    'ejs-dropdownbutton': DropDownButtonComponent,
    'ejs-listbox': ListBoxComponent
  },
  data: function() {
    return {
      items: [
        { text: 'Hennessey Venom' },
        { text: 'Bugatti Chiron' },
        { text: 'Bugatti Veyron Super Sport' },
        { text: 'SSC Ultimate Aero' },
        { text: 'Koenigsegg CCR' }
      ]
    };
  }
}
</script>

Sample Link

Refer to the working sample for additional details and implementation: Live Sample

Additional References

By following the above steps, you can successfully implement a filtering dropdown in the DropDownButton component using Syncfusion’s Vue components.

Conclusion

We hope you enjoyed learning about how to implement filtering functionality in Vue DropDownButton.

You can refer to our Vue DropDownButton feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started with configuration specifications. You can also explore our Vue DropDownButton example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)