Clear query object from DropDown

[Ernesto]

Hello

I have successfully assigned a query object to a MultiSelect dropdown like this:

targetDropDown.query = new Query().where(pred);

Suppose that I want to clear the query from that dropdown, so that all the elements are shown. How can I do that?

Thanks!

[Kokila Poovendran]

Hi Ernesto,

Thank you for your query regarding clearing the query object from a MultiSelect dropdown. We have reviewed your request and have prepared a sample based on your requirements.

In the provided sample, we have added a button labeled "Clear Query" that, when clicked, triggers the clearQuery method. Within this method, we reset the query object to an empty Query instance, effectively clearing any applied filters or conditions.

Here's the code snippet from the provided sample:

<template>

  <div>

    <div class="control-section multiselect-databinding">

      <div id="remote" style="margin: 0px auto; width: 64%; padding-top: 20px">

        <h4>Remote Data</h4>

        <ejs-multiselect

          id="remoteData"

          :dataSource="data"

          :fields="remoteFields"

          :query="query"

          :placeholder="remoteWaterMark"

          sortOrder="Ascending"

        ></ejs-multiselect>

      </div>

      <button @click="clearQuery">Clear Query</button>

      <!-- Add a button to clear the query -->

    </div>

  </div>

</template>

<script>

 

export default {

  methods: {

    clearQuery() {

      this.query = new Query(); // Reset the query object

    },

  },

};

</script>

 

You can find the complete sample and test it at the following link: https://stackblitz.com/edit/ryhgdn-yne3r8?file=src%2FApp.vue

Please feel free to explore the sample and let us know if you have any further questions or concerns.

[Ernesto]

So, the trick is to assign an empty Query with no predicate. Thanks a lot!

[Shereen Shajahan]

Hi Ernesto,

Please get back to us for assistance in the future.

Regards,

Shereen