Using AG-Grid , Angular and TypeScript how to set the Column ColSpan dynamically

Question

Given the row data as follows :

rowData = [ 
    { field_1 : value_1_1 , field_2 : value_1_2 , colSpan : 1 } , 
    { field_1 : value_2_1 , colSpan : 2} , 
    { field_1 : value_3_1 , field_2 : value_3_2 , colSpan : 1} 
];

Column definitions as follows :

columnDefs = [ 
    {
        header  : field_1_name , 
        field   : field_1 , 
        colSpan : getColSpan(params) 
    } , 
    {   
        header : field_2_name , 
        field  : field_2  
    } 
];

For the getColSpan fucntion , what TypeScript syntax can be used to implement the pseudo snippet below ? :

getColSpan(params) 

    return colSpan value for each row

The resulting grid should be as below :

Paritosh · Accepted Answer · 2019-01-12 07:16:51Z

1

As mentioned in the demo example Simple Column Spanning, you can have colSpan function as below to get the result you're expecting.

{
    header  : field_1_name, 
    field   : field_1,
    colSpan : function(params) {
      var value = params.data.field_1;
      if (value === "value_2_1") {
        return 2;
      } else {
        return 1;
      }
    }
}

answered Jan 12, 2019 at 7:16

Paritosh

11.7k5 gold badges64 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using AG-Grid , Angular and TypeScript how to set the Column ColSpan dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related