Grid Filter Cut Off

[Daniel Tam]

Hi,
My grid is wrapped inside of an Angular material expansion panel.  When the filter opens, its not able to expand the expansion panel far enough to show the whole filter.  Changing the position in css causes the filter to move away from where it should be.  I would like to achieve the same behavior as the filter's popup where it is on top over everything.

Thanks in advance

Dan

[Aishwarya Rameshbabu]

Hi Daniel Tam,

Greetings from Syncfusion support.

Upon reviewing your query, we have observed that you are integrating the Grid within an Angular material expansion panel and encountering issues with displaying the filter menu dialog. To provide an effective solution, we require additional information to further validate the issue. Kindly provide the following details:

1. Confirm whether you are utilizing native Angular expansion panels or the Syncfusion Angular Material Accordion for wrapping the Grid.

2. Share the complete code for both panel rendering and Grid rendering, including any event handler functions used.

3. Share the type of data binding being used in the Grid (Remote or Local data). If Remote data is used, please specify the adaptor details.

4. Provide the CSS code if you are using any for styling purposes.

5. Specify the current version of the Syncfusion package you are using.

Regards

Aishwarya R

[Daniel Tam]

Hi Aishwarya,

Thanks for the response.  I'm using the native Angular Expansion Panel to wrap the Syncfusion Grid.  My typescript looks like this:

import { Component, OnInit, Input} from '@angular/core';

import { MatCardModule } from '@angular/material/card';

import { CommonModule } from '@angular/common';

import { InventoryFormComponent } from '../../Inventory/inventory-form/inventory-form.component';

import { MatTabsModule } from '@angular/material/tabs';

import { Grid, GridComponent, GridModule, TextWrapSettingsModel, GridModel, ParentDetails, RowDataBoundEventArgs } from '@syncfusion/ej2-angular-grids';

import { ModalService } from '../../services/modal.service';

import { PageSettingsModel} from '@syncfusion/ej2-angular-grids';

import { SelectionSettingsModel } from '@syncfusion/ej2-angular-grids';

import { MatIconModule } from '@angular/material/icon';

import { ButtonModule } from '@syncfusion/ej2-angular-buttons';

import { HttpClient, HttpClientModule } from '@angular/common/http';

import { takeUntil } from 'rxjs/operators';

import { Subject } from 'rxjs';

import { LogisticsAssetAllDataSvc } from './product-logistics-services/logistics-all-data-svc';

import { LogisticsAssetAllSvc } from './product-logistics-services/logistics-all-svc';

import { AssetEditComponent } from './product-logistics-edit/logistics-edit/logistics-edit.component';

import { LogisticSingleComponent } from './logistics-single/product-logistic-single/logistic-single.component';

import { ProductComponent } from '../product/product/product.component';

@Component({

  standalone: true,

  selector: 'app-logistics',

  templateUrl: './logistics-ov.component.html',

  styleUrls: ['./logistics-ov.component.css'],

  imports: [MatCardModule,

    CommonModule,

    InventoryFormComponent,

    MatTabsModule,

    GridModule,

    MatIconModule,

    MatCardModule,

    ButtonModule,    

    HttpClientModule,

    AssetEditComponent,

    LogisticSingleComponent

   

    ],

    providers: [

     

    ]  

})

export class LogisticsComponent implements OnInit {

  private destroy$ = new Subject<void>();  

  modalOpen = 'close';

  refreshAssetData = '';

  assetData: any;

  public wrapSettings?: TextWrapSettingsModel;

  public pageSettings: PageSettingsModel = { pageSize: 10 };

  public filterOptions: Object = { type: 'Excel' };

  public selectionOptions?: SelectionSettingsModel;

  @Input() selectedAsset: string = '';

 

  public myGrid!: GridComponent;

  constructor(private modalService: ModalService,

               private http: HttpClient,

               private logAssetAllSvc: LogisticsAssetAllSvc  ,

               private logAssetAllDataSvc: LogisticsAssetAllDataSvc,

               private productComponent: ProductComponent

              ) {

    this.modalService.getModalStatus().pipe(takeUntil(this.destroy$)).subscribe((modalName) => {

      this.modalOpen = modalName;      

    });

    this.logAssetAllDataSvc.GetAssetAllData().pipe(takeUntil(this.destroy$)).subscribe((data) => {

      this.assetData = data;      

    });

   

   

    this.selectedAsset = '';

   

  } // End Constructor

 

 

  ngOnInit(): void {

   

    this.logAssetAllSvc.GetAssetAll();

   

    this.filterOptions={type: 'Excel',

                        operators: [{ label: 'Active', value: 'equal', checked: true }, { label: 'Archived', value: 'notequal' }]

    }      

    this.wrapSettings = { wrapMode: 'Content' };

    this.selectionOptions = { mode: 'Row',  type: 'Single' };

  } // End ngOnInit

 

 

 

  onRowSelected(event: any) {

   

    const selectedRowData = event.rowData;

    let tabName = selectedRowData.productName;    

    const passthroughData = selectedRowData.assetId;

    this.productComponent.addTab('logistic', tabName, passthroughData);        

   }

My HTML looks like this: 

<div class="overlay" *ngIf="modalOpen == 'asset-form-edit'">  

  <app-logistics-edit (refreshAssetData)="RefreshAssetData()" [selectedAsset]="selectedAsset"  ></app-logistics-edit>

</div>    

<mat-card class="custom-card">

  <div class="section">

    <button mat-icon-button class="addButton" (click)="OpenModal()" title="Add New Organization">

      <mat-icon>add</mat-icon>

    </button>    

    <button mat-icon-button class="configButton" (click)="CallConfiguration()" title="Open Configuration Tab">

      <mat-icon>settings</mat-icon>

    </button>

    <div class="grid-container">

        <ejs-grid #myGrid cssClass="e-dark-mode" [dataSource]='assetData' [allowSorting]='true' [allowFiltering]='true' [filterSettings]='filterOptions' allowTextWrap='true' [textWrapSettings]='wrapSettings' (actionBegin)="ActionBegin($event)" (recordDoubleClick)="onRowSelected($event)">

        <e-columns>

          <e-column field='assetId' [visible]="false"  headerText='Asset Id' width='120' textAlign='Left' width='35%'></e-column>      

          <e-column field='productId' [visible]="false"  headerText='Product Id' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='productName' headerText='Product Name' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='projectId' [visible]="false"  headerText='Project Id' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='projectName' headerText='Projectd Name' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='ownerId' [visible]="false"  headerText='Owner Id' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='ownerName' headerText='Owner Name' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='type' headerText='Asset Type' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='serialNumber4' headerText='Serial Number' width='120' textAlign='Left' width='35%'></e-column>

          <e-column field='isActive' headerText='Status' width='120' textAlign='Left' width='15%'>

            <ng-template #template let-data>

              <div class="status"  [ngClass]="{'status-red': data.status === 'Inactive',  'status-green': data.status === 'Active' }">

                  {{ data.status }}

              </div>

          </ng-template>

          </e-column>

        </e-columns>

      </ejs-grid>

    </div>

  </div>  

</mat-card>

Without using CSS, the output looks like this:

The version of Syncfusion is 25.x.x

Thanks

[Santhosh Iruthayaraj]

Hi Daniel Tam,

Thank you for providing the requested information.

Upon further validation, we were able to reproduce the reported issue and have already logged it as "Need to provide support for Displaying Grid Filter Dialog without cutoff" as an improvement feature from our end. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision, technical feasibility, and customer interest. This feature will be included in the 2024 Volume 3 Main release which is expected to be rolled out in the month of September.

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

Feedback: https://www.syncfusion.com/feedback/52338/need-to-provide-support-for-displaying-grid-filter-dialog-without-cutoff

Regards,

Santhosh I

[Aishwarya Rameshbabu]

Hi Daniel Tam,

We are glad to announce that, we have included the fix for the issue “Need to provide support for Displaying Grid Filter Dialog without cutoff” in our 2024 Volume 3 main release v27.1.48.  So please upgrade to our latest version of Syncfusion to resolve the reported issue. Please find the sample for more information.

Feature description :  Previously, the column chooser, filter menu, Excel filter, and checkbox dialog were appended within the Grid, causing them to be cut off when the Grid height was small. Now, these dialogs are appended to the body element when the Grid height is less than the dialog height, ensuring full visibility and accessibility. Additionally, styles have been updated to support dialogs displayed both inside the Grid and in the body element, enhancing the overall user experience.

Sample: Please find in the attachment.

Screenshot:

We thank you for your support and appreciate your patience in waiting for this release. Please get back to us if you need any further assistance.

Regards,

Aishwarya R

Attachment: 193648Sample_460b398d.zip

[Daniel Tam]

Hi Aishwarya,

Thanks for the update; however I'm still having a bit of issue.  With the new update, the filter is now able to append to the body; however, I'm not able to attach it to the grid or near the grid.  Its going to the top of the page.

In cases when I have multiple grids on the page, I can get to the scenario where the dialog boxes just stack on top of each other at the top:

Is there a way I can designate where the dialog is going to append to? 

Thanks

Daniel

[Aishwarya Rameshbabu]

Hi Daniel Tam,

Based on the provided information, we have noted that you are encountering an issue where, when multiple Grids are rendered within Angular expansion panels, the filter dialog of one Grid overlaps with another. We have created a similar sample but were unable to replicate the reported issue. Please refer to the attached sample and screenshot, which demonstrate that the filter dialog is rendered correctly in relation to the column from which it was opened. We suspect that you may be using an outdated version of the Syncfusion CSS files. Therefore, please ensure that you are referencing the latest version of the styles in your application. Please find the link below for latest stylesheet reference.

Index.html

 

  <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/27.1.57/material.css" rel="stylesheet"/>

 

Sample: Please find in the attachment.

Screenshot:

If you need any other assistance or have additional questions, please feel free to contact us.

Regards

Aishwarya R

Attachment: 193648UpdatedSample_d188b730.zip

[Daniel Tam]

Hi Aishwarya,

Perfect!  That was it.  Thanks for the help!

Daniel

[Aishwarya Rameshbabu]

Hi Daniel Tam,

You are most welcome. Please get back to us if you need any other assistance.

Regards

Aishwarya R