Filter Menu changes position in RTL Grid

[Nastaran]

Hi

I noticed if you enable rtl in grid the position of filtermenu changes. do you know how can I fix it?
here is a link that you can see the problem: https://stackblitz.com/edit/github-3xetzg

and there's another issue. I want to have a button in one of columns's header cell. I used headeTemplate in that column and assigned the id of that button. it shows the button but when I click on the button it doesn't execute the click function I wrote for it. what should I do?

thanks in advance.

[Thavasianand Sankaranarayanan]

Hi Nastaran, 

Greetings from Syncfusion support. 

Query: I noticed if you enable rtl in grid the position of filtermenu changes. do you know how can I fix it?  I want to have a button in one of columns's header cell. I used headeTemplate in that column and assigned the id of that button. it shows the button but when I click on the button it doesn't execute the click function I wrote for it. what should I do? 

We have checked your query and when you have enabled the “Rtl” in grid, the filter menu position is changed. This is the default behavior of the filter menu. But you can achieve your requirement by adding CSS class for filter menu. We have prepared a sample in which filter menu position is changed as per your requirement by using the “.e-grid.e-rtl .e-filtermenudiv”  css class and displayed the button in the headercell by using headerTemplate property to execute the click function. Please refer the below code example and sample link. 

[my-grid.component.ts] 

.e-grid.e-rtl .e-filtermenudiv { 

  float: right; 

  margin: -18px -22px -18px -11px; 

} 

[my-grid.component.html] 

<ejs-grid #grid 

    enableRtl="true" 

     [dataSource]='data' allowPaging='true' allowFiltering='true' [pageSettings]='pageSettings' [filterSettings]='filterSettings' (dataBound)="dataBound($event)"> 

        <e-columns> 

            <e-column field='OrderID' width='120' textAlign='Right'> 

              <ng-template #headerTemplate> 

            <button ejs-button cssClass="e-flat" iconCss="e-icons e-export-excel" (click)="btnClicked()"></button> 

              </ng-template> 

            </e-column> 

           .  .  .  .  .  . 

        </e-columns> 

    </ejs-grid> 

Sample: https://stackblitz.com/edit/github-3xetzg-g2v16x?file=src%2Fapp%2Fpage-layout%2Fmy-grid%2Fmy-grid.component.html  

 

Regards, 

Thavasianand S. 

[Nastaran]

thanks . it worked. is the filter menu position problem in RTL grids ever going to be fixed? because I'm using several grids in my app in different routes and now I have to give each of them a different CSS class for filter menu position. and it takes time and it's not efficient.

[Thavasianand Sankaranarayanan]

Hi Nastaran, 

Thanks for your update. 

 

Query:  thanks . it worked. is the filter menu position problem in RTL grids ever going to be fixed? 

 

We are glad to hear that our work around is worked fine to achieve your requirement. We have checked your query and logged “Filter menu changes its position when enable RTL in grid” as a bug. We will include the fix and it will be available on April 24, 2019 Patch release. Until then we appreciate your patience. 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through the below link:  

https://www.syncfusion.com/feedback/5650/filter-menu-changes-its-position-when-enable-rtl-in-grid  

Regards, 

Thavasianand S. 

[Thavasianand Sankaranarayanan]

Hi Nastaran,  

Sorry for the inconvenience caused. 

 

Query : thanks . it worked. is the filter menu position problem in RTL grids ever going to be fixed? because I'm using several grids in my app in different routes and now I have to give each of them a different CSS class for filter menu position. and it takes time and it's not efficient. 

When you have enabled the “Rtl” in grid, the filter menu position is changed. This is not a bug and this is the default behavior of the filter menu while enabling “Rtl”. If you use several grids means you have to add the “CSS class” for the corresponding “.e-filtermenudiv” class. Please use our work around sample code to achieve your requirement. 

 

[my-grid.component.ts]  

.e-grid.e-rtl .e-filtermenudiv {  

  float: right;  

  margin: -18px -22px -18px -11px;  

}  

 

Regards, 

Thavasianand S. 

[Nastaran]

Hi,

First, there's no e-filtermenu div class. and each grid is in a different position of the page so I can't apply the same value of margin to all of them. I had to change the .e-flmenu class for each grid individually with a different margin-top and margin-left.

[Thavasianand Sankaranarayanan]

Hi Nastaran, 

Thanks for your update. 

Query : First, there's no e-filtermenu div class. and each grid is in a different position of the page so I can't apply the same value of margin to all of them. I had to change the .e-flmenu class for each grid individually with a different margin-top and margin-left. 

We have checked your query you can achieve your requirement by using the below way. In our grid source, we have used the below CSS class for setting margin property to filtermenu based on the headercell. Please refer the below code snippet and sample link.  

[index.html] 

<style> 

.e-grid.e-rtl .e-gridheader .e-sortfilter .e-fltr-icon .e-headercelldiv{ 

  margin: -7px 15px -7px -7px ! important;                   // you can customize your own CSS here 

} 

  </style> 

[my-grid.component.ts] 

.e-grid.e-rtl .e-filtermenudiv { 

  float: right; 

} 

Sample : https://stackblitz.com/edit/github-3xetzg-mcezsa?file=src/index.html  

If you want to change the CSS class for each grid individually, then you can add your CSS property by taking the “id” of each individual grid. 

Please get back to us for further assistance. 

Regards, 

Thavasianand S.