showClearButton on built-in SearchBar

Question

Is there a way to access the built-in Search input control to do things like set showClearButton to true?

Sujith Kumar Rajkumar · Answer

Hi Jason, 
 
Greetings from Syncfusion support. 
 
The Grid search bar does not have clear icon support currently. However, we have already considered this as a feature request - “Provide support to show clear icon in search bar” from our end and added it to our feature request database. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technological feasibility, and customer interest. And this feature will be included in any of our upcoming releases.  
 
You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  
 
Feedback: https://www.syncfusion.com/feedback/24245/provide-support-to-show-clear-icon-in-search-bar 
 
Until then we suggest you to use the below solution to implement clear icon action for Grid search bar using sample level customization, 
 




data() { 
    return { 
      data: data, 
      initialRender: true, 
      toolbarOptions: ["Search"], 
      pageSettings: { pageCount: 3 }, 
    }; 
}, 
methods: { 
    // Grid’s databound event handler 
    dataBound: function () { 
      // This event will be triggered each time the grid data is modified, so flag variable is used so that this case is executed only on Grid initial render 
      if (this.initialRender) { 
        // Global flag is disabled so that this case is not executed on next data change 
        this.initialRender = false; 
        // A span element is created with search icon 
        var span = document.createElement("span"); 
        span.classList.add("e-clear-icon"); 
        var self = this; 
        // Search icon’s click event function 
        span.addEventListener("click", function (args) { 
          // The search input value is cleared 
          self.$refs.grid.ej2Instances.element.querySelector(".e-search").getElementsByTagName("input")[0].innerText = ""; 
          // Grid search key is removed 
          self.$refs.grid.ej2Instances.search(""); 
        }); 
        // The search icon element is appended to the Grid search bar 
        this.$refs.grid.ej2Instances.element.getElementsByClassName("e-search")[0].appendChild(span); 
      } 
    }, 
  }, 
} 
 
Please find the below sample prepared based on this for your reference, 
 
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/GridSearchWithClearIcon-1199353163 
 
API: https://ej2.syncfusion.com/vue/documentation/api/grid/#databound 
       https://ej2.syncfusion.com/vue/documentation/api/grid/#search 
 
Let us know if you have any concerns. 
 
Regards, 
Sujith R