FlexGrid Angular 2 - Custom rowheaders with RowDetail and AllowAddNew

Originally Posted 28 August 2017, 9:24 am EST

  • Originally Posted 28 August 2017, 9:24 am EST

    I have added a ng-template for the RowHeaders like this:
    wj-flex-grid #gasolineGrid [allowAddNew]="false">



    From:{{cell.row.dataItem.Start}}
    To:{{cell.row.dataItem.End}}





    There are two things:
    -When adding [allowAddNew] to true, produces an error because of the last row is empty with out the "Start" and "End" value, I removed the allowAddNew and works well. But how can I have the option and the custom row header.
    -With RowDetail I have to add a Second column to the row headers because the "plus" icon in the RowHeader overlap the RowHeader values. How can I configure this?

    Another thing. Is there a way to configure the ng-template by code in my component and not in the html?

    Thanks.
  • Reply

    Hello Cesar,
    You can use conditional formatting and insert a column in the RowHeader within initialized event. Please refer to the following code snippet for the same:
    //HTML




    From:{{cell.row.dataItem.Start}}
    To:{{cell.row.dataItem.End}}






    //TS
    initFlexGrid(s:wjGrid.FlexGrid,e:wjCore.EventArgs){
    s.rowHeaders.columns.push(new wjGrid.Column());
    }



    You can use itemFormatter to apply template in the FlexGrid:
    itemFormatter=(panel,r,c,cell){
    if(panel.cellType==wjGrid.CellType.Cell){
    // custom cell template
    }
    if(panel.cellType==wjGrid.CellType.ColumnHeader){
    // custome column header cell template
    }
    if(panel.cellType==wjGrid.CellType.RowHeader){
    // custom Rowheader template
    let item= panel.row[r].dataItem;
    if(item){
    cell.innerHTML="From "+item.start+" To "+item.end;
    }
    }

    }



    Hope it helps!

    Thanks,
    Manish Kumar Gupta
  • Reply

    Thanks, I will give it a try and let you know.
  • Marked as Answer

    Reply

    Works fine: the only thing to correct is this line

    let item= panel.rows[r].dataItem;

    Is rows instead of row.
  • Reply

    Hi Cesar,
    Oops! It's my mistake. Thanks for correcting it.

    Thanks,
    Manish Kumar Gupta
Need extra support?

Upgrade your support plan and get personal unlimited phone support with our customer engagement team

Learn More

Forum Channels