Width adjustment of the Filtermenu drop-down menu of Grid？？

[aquan]

I used the Filter Menu of Grid, but because of my needs, I didn't need so much content, so I adjusted the width of the drop-down menu, but this affected the position of the pop-up drop-down menu, and then I didn't find a position in the Filter Menu that can handle the display of its drop-down menu. I wonder if this control can't adjust its width?

https://stackblitz.com/edit/angular-fqasv2?file=src%2Fapp.component.html,src%2Fapp.component.ts

This is the effect I want to achieve.

[Pavithra Subramaniyam]

Hi aquan,

From your query, we understood that you want to minimize the filter menu popup and adjust the position as well. You can achieve this by setting the “left” style for the dialog element inside the “actionComplete” event. Please refer to the below code example and the sample link for more information.

actionComplete(args) {

  var firstColumn = (this.grid.columns[0] as any).field;

  if (

    args.requestType == 'filterafteropen' &&

    args.columnName != firstColumn

  ) {

    var left = parseInt(args.filterModel.dlgDiv.style.left);

    args.filterModel.dlgDiv.style.left = left + 130 + 'px'; // you can adjust the left as per your requirement

  }

}

 

https://stackblitz.com/edit/angular-fqasv2-jtnwxd?file=src%2Fapp.component.ts

Regards,

Pavithra S

[aquan]

HI ，

   In addition to directly modifying his style, does FilterMenu have any properties that can adjust the width?

Because I don't particularly want to adjust its style directly, is there a class for me to implement?

[Pavithra Subramaniyam]

Hi aquan,

You can set the width for the filter menu dialog by using the selector “.e-grid .e-dialog.e-flmenu”. However, the left value will be calculated based on the column position and set programmatically. So, setting the left value to the element directly is the only option to adjust the position to render the dialog properly.

.e-grid .e-dialog.e-flmenu {

  min-width: 120px !important;

  max-width: 120px !important;

  }

 

actionComplete(args) {

  var firstColumn = (this.grid.columns[0] as any).field;

  if (

    args.requestType == 'filterafteropen' &&

    args.columnName != firstColumn

  ) {

    var left = parseInt(args.filterModel.dlgDiv.style.left);

    args.filterModel.dlgDiv.style.left = left + 130 + 'px';

  }

}

 

[aquan]

ok,Thanks

[Suganya Gopinath]

Hi Aquan, 

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.