Data Grid Menu filter postion

Question

HiI am using https://ej2.syncfusion.com/vue/documentation/grid/how-to/customizing-filter-menu-operators-list/ as example.Is that possible to move the Menu filter button to more left to close to the column heading text.ThanksFan.

Joseph Christ Nithin Issack · Answer

Hi Fan, 
  
Greetings from Syncfusion support. 
  
Based on your query you are having an EJ2 Grid with menu filtering enabled in the grid, the filter icon is displayed to the right of each column. But you want to display the filter icon next to the header. 
  
  Your requirement can be achieved by applying custom CSS styling for the filter icon in the `created` event of the EJ2 Grid to move the filter icon next to the header of the column. 
  
Please refer the below code example. 
 





created: function () { 
      var filterElements = document
        .getElementsByClassName("e-grid")[0]
        .querySelectorAll(".e-icon-filter");
      for (var i = 0; i < filterElements.length; i++) {
        filterElements[i].style.float = "left";
        filterElements[i].style.marginLeft = "75px"; // set margin value based on the width of the header.
      }    },Sample: https://codesandbox.io/s/vue-template-forked-mudsp?file=/src/App.vue

Please find the attached sample and revert for more queries. 
  
Regards, 
Joseph I