Individual Expand and collapse Functionality Expected..

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[X] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Hi,

I have request or requirement I can say, If we have individual expand and collapse functionallity will be vert useful. Current behavior

Currently we have only three methods regarding expand rows are- toggleExpandRow,expandAllRows and collapseAllRows that’s it. My expectations are to have a expandRow and collapseRow methods also required to expand or collapse perticular row.

NOTE: I am new to ngx-datatable if the above mentioned feature already exists in ngx-datattable please let me know I am in need…Thanks in advance. Expected behavior

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x

• Angular version: 2.0.x

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[markus-heinisch]

Does toggleExpandRow not suit your needs? It allows you to open and close one row as seen in the demo below. http://swimlane.github.io/ngx-datatable/#row-details

Source code: https://github.com/swimlane/ngx-datatable/blob/master/demo/basic/row-detail.component.ts

Hi @canpan14, no sorry. toggleExpandRow does not suit my needs because the table is reload every 10 secs and all expaned rows are collapsed after reload. Therefore, I have written code to expand the rows that has been expanded before the reload. A simple rowDetail.expand(row) and rowDetail.collapse(row) would help me! Please, can you add these two methods? Thanks, Markus

[raju10281]

Hi @khadervali, If you mean Expand one row at a time & collapse all other rows. Yes, you are right no built function is available to do it. But it can be done easily,

Add these lines to .html

         <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
            <a 
              [hidden]='expanded'
              [class.datatable-icon-right]="!expanded"
              title="Expand Row"
              (click)="expandRow(row)"
            >
            </a>
            <a
              [hidden]='!expanded'
              [class.datatable-icon-down]="expanded"
              title="Collapse Row"
              (click)="collapseRow()"
            >
            </a>
          </ng-template>

And these lines to .ts

expandRow(row){
    this.tableRowDetails.rowDetail.collapseAllRows(row);
    this.tableRowDetails.rowDetail.toggleExpandRow(row);
    console.log(row);
    //Your code goes here - calling API 
  }

  collapseRow(){
    this.tableRowDetails.rowDetail.collapseAllRows();
  }

Hope, This helps someone 😃 Thank You !