Accordion Disable

[Mohammad Abbasi]

Hello , I have a Grid in an Accordion , after filtering I get an empty record.

I want to make accordion disable when grid is empty.

I would be grateful if you help me how can I do that.

Kind regards

Mohammed Abbasi

[Indhumathy Loganathan]

Hi Mohammad,

Greetings from Syncfusion support.

From the explanation, we were not sure whether you were using the EJ1 or EJ2 Accordion component at your end. Here, we have included our UG documentation for your reference.

EJ1: https://help.syncfusion.com/angular/accordion/getting-started

EJ2: https://ej2.syncfusion.com/angular/documentation/accordion/getting-started/

Please confirm the component. We will assist you based on your confirmation.

Regards,

Indhumathy L

[Mohammad Abbasi]

Hi ,

 thanks for the answer but Getting Starts for Accordion is not my answer . 

My question : 

how can you disable Accordion if Grid after filtering by button has no record in it and my Grid is in <ng-template #content > by Accordin.

Sincerely,

 Mohammad Abbasi

<div class="accordion_div">

    <ejs-accordion #Accordion id="Accordion">

        <e-accordionitems>

            <e-accordionitem>

                <ng-template #content>

                    <div id="DiagnoseParentGrid" class="control-section">

                        <ejs-grid #Grid [filterSettings]='filterOptions' [allowFiltering]='true' locale="de" [dataSource]='data' HtmlEncode="False" >

                            <e-columns>

                                <e-column field='test' headerText='test' textAlign='left' width="60"></e-column>

                            </e-columns>

                        </ejs-grid>

                    </div>

                </ng-template>

            </e-accordionitem>

        </e-accordionitems>

    </ejs-accordion>

</div>

[Ravikumar Venkatesan]

Mohammad, you can disable the accordion when there is no record present with the help of the disabled property of the accordion item, as shown in the below code snippet.

Sample: https://stackblitz.com/edit/ej2-angular-accordion-disable-accordion-item?file=app.component.html

[app.component.html]

<button (click)="onFilter($event)">Filter</button>

<ejs-accordion #Accordion id="Accordion">

  <e-accordionitems>

    <e-accordionitem expanded="true" [disabled]="disableAccordionItem">

      <ng-template #header>

        <div>Grid</div>

      </ng-template>

      <ng-template #content>

        <div id="DiagnoseParentGrid" class="control-section">

          <ejs-grid #gridObj [filterSettings]='filterOptions' [allowFiltering]='true' [dataSource]='data'

            HtmlEncode="False" (actionComplete)="afterFiltering($event)">

            <e-columns>

              <e-column field='OrderID' headerText='Order ID' textAlign='left' width="60"></e-column>

              <e-column field='CustomerID' headerText='Customer ID' textAlign='left' width="60"></e-column>

            </e-columns>

          </ejs-grid>

        </div>

      </ng-template>

    </e-accordionitem>

  </e-accordionitems>

</ejs-accordion>

[app.component.ts]

export class AppComponent {

    @ViewChild('gridObj') public grid: GridComponent;

    public filterOptions: FilterSettingsModel;

    public data: Record<string, any>[] = gridData;

    public disableAccordionItem: boolean = false;

 

    public onFilter(args) {

        this.grid.filterByColumn('CustomerID', 'equal', "test");

    }

 

    public afterFiltering(args) {

        if(args.action === 'filter') {

            let records: Record<string, any>[] = this.grid.getCurrentViewRecords();

            this.disableAccordionItem = records.length < 1;

        }        

    }

}