Column Group Header Refresh Data

Posted by: normansiboro.ibn on 2 August 2018, 2:16 pm EST

    • Post Options:
    • Link

    Posted 2 August 2018, 2:16 pm EST

    Hello,

    I’m using columnGroupProvider (file in attachment), which is some component to make Column Group Header .

    I just create column group header as dataHeader with four rows level and its save to array and passing that dataHeader to columnGroupProvider. This dataHeader get some data from service and write it in dataHeader. Every time i change my preview, dataHeader is set with different data.

    file data header is just like :

    
    setDataHeader() {
        this.headerData = [
          ...
          {
            header: 'SKU',
            binding: 'pcode',
            isReadOnly: true,
            width: 75
          },
          {
            header: 'SKU Name',
            binding: 'pcodeName',
            isReadOnly: true
          },
          {
            header: '% Growth',
            columns: [
              {
                header: this.nextPeriod1,
                columns: [
                  {
                    header: 'HKE',
                    columns: [
                      {
                        header: this.hke1,
                        binding: 'growthNextPeriod1',
                        isReadOnly: this.disableGrowth1,
                        width: 50
                      }
                    ]
                  }
                ]
              },
              {
                header: this.nextPeriod2,
                columns: [
                  {
                    header: 'HKE',
                    columns: [
                      {
                        header: this.hke2,
                        binding: 'growthNextPeriod2',
                        isReadOnly: this.disableGrowth2,
                        width: 50
                      }
                    ]
                  }
                ]
              },
              {
                header: this.nextPeriod3,
                columns: [
                  {
                    header: 'HKE',
                    columns: [
                      {
                        header: this.hke3,
                        binding: 'growthNextPeriod3',
                        isReadOnly: this.disableGrowth3,
                        width: 50
                      }
                    ]
                  }
                ]
              },
              {
                header: this.nextPeriod4,
                columns: [
                  {
                    header: 'HKE',
                    columns: [
                      {
                        header: this.hke4,
                        binding: 'growthNextPeriod4',
                        isReadOnly: this.disableGrowth4,
                        width: 50
                      }
                    ]
                  }
                ]
              }
            ]
          }
    	...
    	]
    }
    
    

    And to set in column group provider, when i click preview is just like this :

    
    view(){
    ...
    this.setDataHeader();
    var g = new ColumnGroupProvider(s, this.headerData);
    g.selectOnClick = true;                                  	
    ...
    }
    
    

    And my problem is when i want to change or update dataheader,

    this dataheader is not refresh,

    first preview is just like this :

    [header1][header2][header3][header4]

    and if i preview again, the column is add more table with same column, just like this :

    [header1][header2][header3][header4][header1][header2][header3][header4]

    Can you help me, to solve my problem ?

    Thanks

    ColumnGroupProvider.zip

  • Posted 2 August 2018, 2:33 pm EST

    I’m using Angular 5,

  • Posted 3 August 2018, 7:04 am EST

    Hi,

    Please refer to the following sample which implements the stated requirement:-

    https://stackblitz.com/edit/angular-5qr9ig?file=app%2Fapp.component.ts

    The sample above has a different ColumnGroupProvider implementation, so you need to first include it in your project.

    The new implementation contains a refreshHeaders() method to refresh the headers with new values.

    There is also a difference in implementation between the two, in the new one you need to generate columns yourself by template binding, this provides the functionality to cell-templates while using ColumnGroupProvider.

    Hope it helps.

    ~Manish

  • Posted 4 August 2018, 2:47 am EST

    Thanks Manish, it’s Works !

Need extra support?

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

Learn More

Forum Channels