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. Image for the cookie policy date

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

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.



5 Replies 1 reply marked as answer

PS Pavithra Subramaniyam Syncfusion Team March 13, 2023 11:21 AM UTC

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[0as 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


Marked as answer

AQ aquan March 14, 2023 03:24 AM UTC

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?



PS Pavithra Subramaniyam Syncfusion Team March 15, 2023 07:58 AM UTC

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[0as 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';

  }

}

 




AQ aquan March 16, 2023 01:48 AM UTC

ok,Thanks



SG Suganya Gopinath Syncfusion Team