Expand Specific Row & Column

[Shreekumar]

I have implemented editable Pivot-View as defined in this example: https://stackblitz.com/edit/angular-iqe2sr-qkaerq?file=app.component.ts

And I'm using expandAll: false On DataSource setting to collapse all Rows on Initial Load.

this.dataSource = {

dataSource: data,

expandAll: false

}

Is there any way, I can expand only a Specific Row & Column after this configuration?

[Sivamathi Natarajan]

Hi Shreekumar, 

 

Thanks for contacting Syncfusion support. 

 

You can expand the specific members by using the property drilledMembers in code-behind. Kindly check the below code example. 

 

Code Example: 

 

Here we have expanded the members France, United Kingdom and FY 2015. 

 

 this.dataSourceSettings = { 

      enableSorting: true, 

      drilledMembers: [{ name: 'Country', items: ['France','United Kingdom'] },{ name: 'Year', items: ['FY 2015'] }], 

      columns: [{ name: 'Year' }, { name: 'Quarter' }, { name: 'Order_Source', caption: 'Order Source' }], 

      rows: [{ name: 'Country' }, { name: 'Product_Categories', caption: 'Product Categories' }, { name: 'Products' }], 

      formatSettings: [{ name: 'In_Stock', format: 'N0' },{ name: 'Amount', format: 'N0' }], 

      dataSource: Pivot_Data, 

      expandAll: false, 

      values: [{ name: 'In_Stock', caption: 'In Stock' }, 

      { name: 'Amount', caption: 'Sold Amount' }], 

      filters: [] 

    }; 

 

 

Meanwhile, we have prepared a sample for your reference. Kindly check the below sample and documentation link for your reference. 

 

Sample link: https://stackblitz.com/edit/angular-iqe2sr-mr6pir?file=app.component.ts 

Documentation link: https://ej2.syncfusion.com/angular/documentation/pivotview/drill-down/?no-cache=1#expand-specific-members 

 

We hope the above sample meets your requirements.  

 

Regards, 

Sivamathi. 

[Shreekumar]

This one is cool. But, Is there any way I can expand by Index (Row / Column) instead of Member Names?

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

We were unable to understand the exact requirement from the last query. Kindly provide more details about your requirement with screenshots/video (if possible) which would be helpful for us to proceed further.   

 

Regards, 

Sivamathi. 

[Shreekumar]

I wanted to set the drilled-members dynamically.

<ejs-pivotview #pivotview id='PivotView' 

....... (load)='load($event)'>

</ejs-pivotview>

load(args) {

    args.dataSourceSettings = {

      drilledMembers: [

        // Setting members dynamically based on existing data source.

// So that I can expand only one set of data initially and all are collapsed

      ]

    };

}

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

Could you please provide me the below details, 

 

• Will you change the data source dynamically?
• Are you want to change the drilledMembers using external button click?

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi. 

[Shreekumar]

Yes, data source will change based on external click event.

On that time, I want to set the Drilled Members.

Here drilled members will change based on the data-source.

I always extract drilled-members from first object of an array objects data source.

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

You can set the drilled members based on the data source using following code example. Here we have modified data source and validated the drilled member field in data source. And added row, column and value fields based on the data source. 

 

Code Example: 

 

  change(e: Event): void { 

    this.pivotObj.dataSourceSettings.dataSource = Pivot_Data1; 

    var dataKeys = Object.keys(this.pivotObj.dataSourceSettings.dataSource[1]); 

    if ((dataKeys as any).includes("Year")) { 

      this.pivotObj.dataSourceSettings.drilledMembers = [{ name: 'Year', items: ['FY 2015'] }] 

    } 

    this.pivotObj.dataSourceSettings.rows = [{ name: 'Year' }, { name: 'Quarter' }]; 

    this.pivotObj.dataSourceSettings.columns = [{ name: 'Country' }]; 

    this.pivotObj.dataSourceSettings.values = [{ name: 'Sold' }]; 

    this.pivotObj.dataSourceSettings.formatSettings = [{ name: 'Sold', format: 'N0' }]; 

  } 

 

 

 

Meanwhile, we have prepared a sample for your reference. Please check the below sample link. 

 

Sample Link: https://stackblitz.com/edit/angular-iqe2sr-wqrn3y?file=app.component.ts 

 

We hope the above sample meets your requirements. 

 

Regards,
Sivamathi. 

[Shreekumar]

It is working only for 1 level members. Not for nested members

this.pivotGridObj.dataSourceSettings.drilledMembers = [

      { name: 'year', items: ['2021']},

      { name: 'departmentName', items: ['Hierarchy for Men'] },

      { name: 'className', items: ['Footwear'] }, // This is nested under departmentName

      { name: 'quarterDescription', items: ['quarterDescription'] } // This is nested under year

    ];

Refer attached images:

Capture-1 : Actual

Capture-2: Expected

Attachment: Desktop_8d0c5b67.zip

[Sivamathi Natarajan]

Hi ShreeKumar, 

 

Please check the below documentation to drill the nested members. 

 

UG Link: https://ej2.syncfusion.com/javascript/documentation/pivotview/drill-down/#expand-specific-members 

 

Meanwhile, we have prepared a sample for your reference. Please check the below sample link. 

 

Sample Link: https://stackblitz.com/edit/angular-iqe2sr-eaxgif?file=app.component.ts 

 

Please let us know if you have concern. 

 

Regards, 

Sivamathi.