Ngx-datatable: Individual Expand and collapse Functionality Expected..

[khadervali]

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]

[canpan14]

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

[khadervali]

Hi @canpan14 ,
Thanks for reply, I have some scenarios for my requirement, those functionalities I need separately so.

[rauwebieten]

I need the same functionality in a project of mine.

I worked around for now by keeping track of the expanded rows myself. Depending on the tracked-rows I can choose to expand or collapse when needed.

[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 simplerowDetail.expand(row) and rowDetail.collapse(row) would help me!
Please, can you add these two methods?
Thanks, Markus

[marco-solare]

Hi there, we have come to a simlilar situation where we have to "re-toggle" one row after re-visiting a certain component that contains an ngx-datatable.
Any news on the subject or did you fix / implement it some other way?
We are also looking into finding a solution for this, will post here if we find one

[ali9itani]

any updates on this?

[jayakrishnadevarapu]

I have worked similar to that with a situation i have rows and each row has children and each child is component which is getting rendered after click on each row and when i cancel the child component i want just togglecollapse that row which is in parent component so when ever i click on cancel in child component i do an eventemitter with row details as am passing when expanded i used the method as rowDetail. "toggleExpandRow(row)" to toggleCollapseExpand to just that particular row.

I hope this helps someone if any one trying that.

[chanchaldhingra]

I have worked similar to that with a situation i have rows and each row has children and each child is component which is getting rendered after click on each row and when i cancel the child component i want just togglecollapse that row which is in parent component so when ever i click on cancel in child component i do an eventemitter with row details as am passing when expanded i used the method as rowDetail. "toggleExpandRow(row)" to toggleCollapseExpand to just that particular row.

I hope this helps someone if any on

I have worked similar to that with a situation i have rows and each row has children and each child is component which is getting rendered after click on each row and when i cancel the child component i want just togglecollapse that row which is in parent component so when ever i click on cancel in child component i do an eventemitter with row details as am passing when expanded i used the method as rowDetail. "toggleExpandRow(row)" to toggleCollapseExpand to just that particular row.

I hope this helps someone if any one trying that.

this works!!!

Just add another method like this, and call toggleExpandRow(row):

      <div *ngIf="row.address.length>1"> 
        <a
          *ngIf="!expanded"
          href="javascript:void(0)"
          (click)="toggleExpandRow(row)">


            <i class="fa fa-plus" ></i>
        </a>
        <a
          *ngIf="expanded"
          href="javascript:void(0)"
          (click)="toggleCollaspeRow(row)">
            <i class="fa fa-minus"> </i>
        </a>  

      </div>
      </ng-template>

in component :
toggleExpandRow(row) {
this.table.rowDetail.toggleExpandRow(row);
}

toggleCollaspeRow(row) {
console.log('Toggled Collapse Row!', row);
this.toggleExpandRow(row);

}

[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 !