Filter location

[Jessica Goodrich]

Hi,

Is it possible to move the filter location to be next to the header text?

Thanks!

[Rajapandiyan Settu]

Hi Jessica, 

 

Greetings from Syncfusion support. 

 

Query: Is it possible to move the filter location to be next to the header text? 

 

Before proceeding your query we need more information on your requirement, so please share the details with us. 

 

1. Explain your requirement in detail with the screenshot.
2. Do you want to change the position of FilterIcon in the Header?
3. Do you want to change the filter Dialog position?

 

Regards, 

Rajapandiyan S 

[Jessica Goodrich]

Hi,

1. I am not able to submit a screenshot... it keeps telling me I am entering a word or URL that is not allowed on this site. But the problem I'm having is when people try to filter on a column, they always click on the filter icon to the left of the header text. But that filter icon belongs to the previous column.

2. Yes. I would like to move the filter icon next to the header text.

3. No... at least I don't think so. If the filter icon moves, the dialog pop up will move with it, right?

[Rajapandiyan Settu]

Hi Jessica, 

 

Greetings from Syncfusion support. 

 

Query: the problem I'm having is when people try to filter on a column, they always click on the filter icon to the left of the header text. But that filter icon belongs to the previous column 

I would like to move the filter icon next to the header text. 

 

Based on the theme specification, the default margin and padding are set to the filter icon and sort icon from the headerText. This is the behavior of Grid layout structure. 

 

Screenshot: filter icon position 

 

 

Change Icon position by using following CSS:  

 

    <style> 

      .e-grid .e-filtermenudiv { 

        margin: -18px -7px; 

      } 

      .e-grid .e-gridheader .e-fltr-icon .e-sortfilterdiv { 

        margin: -15px 24px; 

      } 

      .e-grid .e-gridheader .e-rightalign.e-fltr-icon .e-sortfilterdiv { 

        margin: -15px 5px; 

      } 

    </style> 

 

Change the icon based on your headerText  length : 

 

In your requirement, you want move the filter icon next to the HeaderText. We achieved your requirement in the dataBound event of Grid. 

 

dataBound: https://ej2.syncfusion.com/angular/documentation/api/grid/#databound  

 

In that event, we dynamically changed the margin of the filter icon and sort icon based on the headerText width and headerCellDiv width. Refer to the below code example and sample for more information. 

 

[app.component.ts] 

  dataBound(args) { 

    var gridinstances = (document.getElementsByClassName("e-grid")[0] as any) 

      .ej2_instances[0]; 

    var headercells = gridinstances.element.querySelectorAll(".e-headercell"); 

    for (var i = 0; i < headercells.length; i++) { 

      var headertextwidth = headercells[i].querySelector(".e-headertext").getBoundingClientRect().width; 

      var headercelldivwidth = headercells[i].querySelector(".e-headercelldiv").getBoundingClientRect().width; 

      var calx = parseInt((headercelldivwidth / headertextwidth + 

        (headercelldivwidth - headertextwidth - 25)) as any); 

 

      // do the margin calculation based on the theme 

      var filterMargin = "-18px " + calx + "px" + " -18px 0px"; 

      var sortMargin = "-15px " + (calx + 20) + "px" + " -15px 0px"; 

 

      // change the filtericon margin 

      if ( headercells[i].querySelector(".e-filtermenudiv.e-icons.e-icon-filter") && 

        headercells[i].classList.contains("e-rightalign") == false) { 

// change the filter icon position 

        headercells[i].querySelector(".e-filtermenudiv.e-icons.e-icon-filter").style.margin = filterMargin; 

      } 

      // change the sorticon margin 

      if ( headercells[i].querySelector(".e-sortfilterdiv.e-icons") && 

        headercells[i].classList.contains("e-rightalign") == false) { 

// change the Sort icon position 

        headercells[i].querySelector(".e-sortfilterdiv.e-icons").style.margin = sortMargin; 

      } 

    } 

  } 

  

Sample: https://stackblitz.com/edit/angular-s61o7p-udrbrh?file=app.component.html  

 

Note: 

You can also separate the Grid columns by using gridLines property. Find the below documentation and screenshot for your reference. 

 

GridLines: https://ej2.syncfusion.com/angular/documentation/grid/cell/#grid-lines  

 

Screenshot: vertical line between Grid columns 

 

 

Please get back to us if you need further assistance with this. 

 

Regards, 

Rajapandiyan S