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

Looping to make accordion with each its own ejs grid

I have an array of data which I want to display in accordions. In each accordion there is an ejs-grid that will display the grid data. The accordion and ejs-grid within, will be created with ngFor. How can I get the right ejs-grid column info to, for example enable/disable a dropdown column?


1 Reply

RR Rajapandi Ravi Syncfusion Team March 25, 2023 06:46 AM UTC

Hi Jazzy,


Greetings from Syncfusion support


Based on your query we have prepared a sample of Rendering Grid inside Accordion using ngFor and we suggest you use the below way to achieve your requirement. Please refer the below code example and sample for more information.


@Component({

  selector: 'app-root',

  template: `

  <h2>{{title}}</h2>

    <ejs-accordion id={{accordion}} (expanded)='expanded($event)' (expanding)='expanding($event)'>

       <e-accordionitems>

        <e-accordionitem *ngFor="let item1 of firstItems" header={{item1.header}} content={{item1.content}}></e-accordionitem>

      </e-accordionitems>

      </ejs-accordion>

`

})

export class AppComponent {

  title = 'Accordion';

 

  expanded(args) {

    var doc = new DOMParser().parseFromString(args.item.content, 'text/html');

    var id = doc.querySelector('div').getAttribute('id');

    let grid: Grid = new Grid({

      dataSource: [{OrderID: 10248, CustomerID: 'Vinet'}],

      columns: [

                  { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120, type: 'number' },

                  { field: 'CustomerID', width: 140, headerText: 'Customer ID', type: 'string' }

      ]

      });

      (grid as any).appendTo('#'+id);

  }

 

  expanding(args) {

  }

 

  firstItems = [

    new Items('ASP.NET', '<div id="Gridone"></div>'),

    new Items('ASP.NET MVC', '<div id="Gridtwo"></div>'),

    new Items('JavaScript', '<div id="Gridthree"></div>')

  ];

}


Sample: https://stackblitz.com/edit/angular-nxjuby-rcnfb7?file=src%2Fapp%2Fapp.component.ts,package.json


Regards,

Rajapandi R


Loader.
Live Chat Icon For mobile
Up arrow icon