Ability to declare Flexgrid columns using content projection in Angular

Ability to declare Flexgrid columns using content projection in Angular

Posted by: gibbonsk on 24 June 2022, 3:37 am EST

• 

  gibbonsk

  • Post Options:
  • Link
    Copy

  Posted 24 June 2022, 3:37 am EST

  We have an Angular app that includes over 100 instances of the FlexGrid. As such, we’ve created a wrapper component to encapsulate common functionality.

  We typically build the column config in code and set the columnLayout property on the grid. However, there are times when it’d be much simpler to create the columns using markup; especially when building cell templates.

  The problem is that the WjFlexGrid does not allow columns to be assigned dynamically using content projection. It throws errors.

  Here’s a working example:
  
  https://jscodemine.grapecity.com/sample/4BE6uUYeL0uytHmnNdBQAw/

  
  <app-custom-grid [data]="data">
      <ng-container columns>
          <wj-flex-grid-column binding="id" header="ID"></wj-flex-grid-column>
          <wj-flex-grid-column binding="country" header="Country"></wj-flex-grid-column>
          <wj-flex-grid-column binding="sales" header="Sales"></wj-flex-grid-column>
          <wj-flex-grid-column binding="expenses" header="Expenses"></wj-flex-grid-column>
      </ng-container>
  </app-custom-grid>
  
  

  It would be great if this could be fixed and dynamic content could be projected into the WjFlexGrid component. Or maybe I’m just unaware of some magic feature and you can fill me in

  Thanks.

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 28 June 2022, 6:14 pm EST

  ​Hello,

  We appologize for the delayed resposne, we are able to replicate the issue at our end and have escalated the issue to our Dev team for further investigation with an internal tracking ID WJM-24156. We will provide you with a update on this as soon as we get any response.

  Regards

• 

  gibbonsk

  • Post Options:
  • Link
    Copy

  Posted 29 June 2022, 11:06 am EST

  Wonderful, thank you.