FlexGrid with columns groups and cell template

FlexGrid with columns groups and cell template

Posted by: cosmin-cazac on 14 September 2017, 12:05 pm EST

• 

  cosmin-cazac

  • Post Options:
  • Link
    Copy
  • Jump To Answer

  Posted 14 September 2017, 12:05 pm EST

  Hello,

    I followed this tutorial http://wijmo.com/blog/creating-column-groups-in-flexgrid/ to create the column groups I need. Everything works great, but now I also need to define a cell template in which a need to place a drag & drop component and I have trouble doing this because the items source is programatically created (like in the tutorial from the link above), but the cell template is being defined in the HTML. I am using Angular 2. Bellow is an example of what I want to achieve with the cell template - the drag & drop behaviour.
  

  <wj-flex-grid-column [header]=“‘Name’” [binding]=“‘movieName’” [width]=“‘*’” [isReadOnly]=“true”>
  
  <ng-template wjFlexGridCellTemplate [cellType]=“‘Cell’” let-cell=“cell”>
  
  <div [DRAG_AND_DROP]=“dragAndDropProp”>
  
  <div>{{cell.item.movieName}}</div>
  
  </div>
  
  </ng-template>
  
  </wj-flex-grid-column>

  My question is: how can I define the template programatically or how can I mix the column grouping with the HTML column templates to obtain the desired behaviour?

  Thanks!

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hello,
  
  We are working on your query and we will share relevant information soon.

  Thanks,
  
  Manish Kumar Gupta

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hi,
  
  To overcome this problem, we can use dynamic column and use wjFlexGridCellTemplate accordingly.
  
  For your reference, please see the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/06/Dynamice_column_FlexGrid_cellTemplate-2.zip

• 

  cosmin-cazac

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hello,

  Thank you for your guidance. I am still unable to figure out how to combine the multi-level header hierarchy (like here: http://wijmo.com/blog/creating-column-groups-in-flexgrid/ ) from your example. I have added an attachment with a picture of the desired outcome. The template that should allow me to put the drag & drop functionality must be defined on the ‘Film’ (first) column. If I create the HTML column with template and also include it in the columns list in the .ts file where I define the header hierarchy, it will double it.

  Thank you!

  

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hello,
  
  Please refer to the fiddle that implements the same. In the fiddle, createColumnGroups method creates column dynamically based on columnDefinition. mergeColumnGroups method merge same colum headers.

  These methods need to call in initialized event.

  If the issue persists, please share a demo data sample with column definitions so that we can debug and assist you accordingly.

  Thanks,
  
  Manish Kumar Gupta

• 

  cosmin-cazac

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hello,

  Your fiddle implements the exact same behaviour that I already found in the link I have posted. I have successfully managed to create the columns groups before accessing the forum. My problem consists in the fact that, after having the columns grouped by using this implementation, I need a way to set a template that will be used on all the cells of a specific column. For example, in the “Financial table example” from the fiddle you privded, I would like all the cells found under the column with the header “YTD” to have the following HTML template (just a simple example, I want something more complex, but this is enough for me to continue):

  <span><div style=“color:red”>{{cell.perf.ytd}}</div></span>

  So how/where can I define my template? I cannot see any “template” property inside the “columns” array (like you have “header”, “binding”, “format”, etc.) or some other place where I can put my HTML template.

  Thanks!

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hi,
  
  We are sorry for the misunderstanding of the requirement. For this, you need to create an array of columns from the header definition provided so that we can create column dynamically through wjFlexGridColumn directive since wjFlexGridCellTemplate can be defined between directive. Now, we need to add an extra row for adding Groups header for columns.

  For your reference, please see the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta

  2017/06/FlexGrid_columGroups_CellTemplate.zip

• 

  cosmin-cazac

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hello,

  Thank you for your help. This seems to be the right way to do it. I still have a problem with creating a 3 layer header grouping, as in the image that I have attached. As you can see, the "INTELLIGENCE" section has two sub-sections ("NEXT WEEK" and "THIS WEEK") and each sub-section has it's own columns. Can you please provide an example of achieving such a hierarchy?
  

  Thanks a lot,
  
  Cosmin
  
  

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Posted 14 September 2017, 12:05 pm EST

  Hi Cosmin,
  
  You can go for as many levels as you want. You just need to add rows in the columnHeaders. You need to get header value for each row as we did in the two-level hierarchy.
  
  You can also define column definition by yourself same as columns array if you know column information.
  
  For your reference, please see the attached sample that implements the same.

  Thanks,
  
  Manish Kumar Gupta
  
  2017/06/FlexGrid_columGroups_CellTemplate_level3_hierarchy.zip

• 

  parmarav

  • Post Options:
  • Link
    Copy

  Posted 9 November 2017, 4:46 am EST

  Hi Manish,
  
  Are there any built in methods to group columns or is the code in this fiddle http://jsfiddle.net/Wijmo5/gobtdg7t/ the only way to group columns ?

  Thanks
  
  Anshul Parmar

• 

  mark.brodziak

  • Post Options:
  • Link
    Copy

  Posted 10 December 2020, 11:01 pm EST

  Hi,

  We’re facing a similar requirement, and the implemented example is pretty complex. Like Anshul, we are wondering if there is anything on the roadmap that might simplify or ease the integration of this feature in an Angular application.

  Specifically:

  • We want to be able to declare columns in the component template markup, using wj-flex-grid-column
  • We want to be able to define groups without defining complex code structures - ideally using some form of nested wj-flex-grid-column components, or, wj-flex-grid-column-group (the latter doesn’t exist as far as I know)
  • We want to be able to easily configure the behavior of grouped columns (eg, if they can collapse or not, and select on click (similar to the example)

  Even if this can only be achieved programmatically (eg, code similar to ColumnGroupProvider and CustomMergeManager from the linked example, which wouldn’t be our preferred approach), it would be better if the Wijmo Angular integration held and tested these functions so that customers don’t have to maintain, test and manage it.

  Thanks,

  Mark

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 14 December 2020, 5:42 am EST

  Hi Mark,

  In the latest builds, we now support a columnGroups property to easily create groups. Please refer to the following demo which demonstrates the use of columnGroups property and let us know if you face any issues:
  
  https://www.grapecity.com/wijmo/demos/Grid/Columns/ColumnGroups/angular

  Regards

• 

  mark.brodziak

  • Post Options:
  • Link
    Copy

  Posted 14 December 2020, 8:20 pm EST

  Hi Sharad,

  Thanks for looking at this. The provided example does not do what we’re looking for - specifically, allowing us to declare columns in the component template markup, using wj-flex-grid-column.

  Without declaring these columns in the Angular template, we’re unable (at least not in any obvious way) to customise the rendering or add custom components to render cells. This leaves us with a choice of using group columns without custom components in those columns, or, using custom components and forgetting about grouped column headers.

  Cheers,

  Mark

• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Posted 16 December 2020, 7:39 pm EST

  Hi Mark,

  We are sorry but currently, column groups are not supported using the wj-flex-grid-column directive. You would have to create groups using the JS/TS code as demonstrated in the previously shared sample by manish.
  
  To ease the process, I have prepared a reusable utility for you that you could be used to create column groups in a declarative syntax and keep support for wj-flex-grid-column too. Please refer to the following sample and let us know if you face any issues:
  
  https://codesandbox.io/s/wijmo-angular-forked-i6pfg?file=/src/app/app.component.ts

  Regards