We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filter Menu changes position in RTL Grid

Thread ID:

Created:

Updated:

Platform:

Replies:

143653 Mar 30,2019 07:45 AM UTC Apr 15,2019 12:32 PM UTC Angular - EJ 2 6
loading
Tags: Grid
Nastaran
Asked On March 31, 2019 05:05 AM UTC

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 [Syncfusion]
Replied On April 1, 2019 08:53 AM UTC

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> 

 
Regards, 
Thavasianand S. 


Nastaran
Replied On April 6, 2019 03:58 AM UTC

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 [Syncfusion]
Replied On April 8, 2019 06:31 AM UTC

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:  


Regards, 
Thavasianand S. 


Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 9, 2019 12:54 PM UTC

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
Replied On April 14, 2019 06:32 AM UTC

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 [Syncfusion]
Replied On April 15, 2019 12:32 PM UTC

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; 


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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;