Hide Row

[Ricardo Salas]

Is there a way to programmatically hide / show a row in the Grid?

[Thiyagu Subramani]

Hi Ricardo, 

Thanks for contacting forum. 

We can achieve your requirement “Hide Row” by using getRowByIndex method and buttonClick event. In this buttonClick we have get specific row element using getRowByIndex and applied visibility style accordingly. 

Please refer to the below code and sample link. 

<div class="control-section"> 

   <button #toggleBtn ejs-button cssClass="e-flat" [isPrimary]="true" (click)="btnClick()" >Hide 0'th Row</button> 

    <button #toggleBtn ejs-button cssClass="e-flat" [isPrimary]="true" (click)="btnClick1()" >Show 0'th Row</button> 

    <ejs-grid #grid [dataSource]='data' height='350'> 

      . . . . . . 

    </ejs-grid> 

</div> 

 btnClick() { // hide 0th index row 

    // using this we can hide any specific row 

     (this.grid.getRowByIndex(this.count) as any).style.visibility = "collapse"; 

    } 

    btnClick1() { // show 0th index row 

       // using this we can show any specific hided row 

         (this.grid.getRowByIndex(this.count) as any).style.visibility = "visible"; 

    } 

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

 

Reference link : https://ej2.syncfusion.com/angular/documentation/api/grid/#getrowbyindex 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[Ricardo Salas]

Thanks for the reply.

My scenario is like this:

When loading the component I want to add some records to the grid, and based on some condition hide some of them.

I'm having some issues:

Using the addRecord method from the Grid doesn't seem to work on the ngAfterViewInit life cycle hook. If I try this method after the app has loaded it works as expected, but if I want to add data to the grid before the component loads I need to manually add the data to the data source. The problem is, by adding the data to the data source, I cannot do stuff like this on ngAfterViewInit :

(this.grid.getRowByIndex(this.count) as any).style.visibility = "collapse";

Because the rows are not yet created.

How can I programmatically hide / show rows during the ngAfterViewInit life cycle hook, or any other way before the component loads?

[Ricardo Salas]

I tried using the created event on the grid instead of ngAfterViewInit, but even tho the addRecord method does work, methods like getRowByIndex and getRowIndexByPrimaryKey does not seem to work at this point, so I'm still unable to hide / show rows before the component is shown to the user.

[Rajapandiyan Settu]

Hi Ricardo, 

 

Thanks for your update. 

 

Query : I tried using the created event on the grid instead of ngAfterViewInit, but even tho the addRecord method does work, methods like getRowByIndex and getRowIndexByPrimaryKey does not seem to work at this point, so I'm still unable to hide / show rows before the component is shown to the user. 

 

From your query we could see that you need to add some records and hide some rows in the grid. You can achieve your requirement by using dataBound and rowDataBound event of the grid. We have prepared a sample with this requirement. In that sample, we have added some record in dataBound (which is triggered each time after all the data are appended in grid ) event and hided the rows in rowDataBound ( which is triggered each time before the row element appended in grid)event. 

 

Please refer the below sample and code example for more information. 

 

 

export class AppComponent { 

    public data: Object[] = []; 

     @ViewChild('grid', {static: true}) 

    public grid: GridComponent; 

    public count : number = 0; 

    public editSettings: EditSettingsModel; 

    public flag:boolean =true 

 

    ngOnInit(): void { 

        this.data = orderDetails.slice(0,10); 

        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true }; 

    } 

// triggered before the row rendered 

    rowDataBound(args){ 

// in the args you can get row data and row element 

      console.log(args); 

      var index = +args.row.getAttribute("aria-rowindex"); 

      if(index % 2 == 0){ 

// using some condition we have hided the row 

        args.row.style.visibility = "collapse"; 

      }else{ 

//show the row 

        args.row.style.visibility = "visible"; 

      } 

    } 

    dataBound(args){ 

// using flag variable we have added some records in grid at initial rendering only 

      if(this.flag){ 

        this.flag = false; 

        this.grid.addRecord({OrderID:2,CustomerName:'ftg'}); 

        this.grid.addRecord({OrderID:3,CustomerName:'gyh'}); 

      } 

    } 

} 

 

 

 

Sample : https://stackblitz.com/edit/angular-rdwz63-bexmbf?file=app.component.ts 

 

UG : https://ej2.syncfusion.com/angular/documentation/api/grid/#databound 

         https://ej2.syncfusion.com/angular/documentation/api/grid/#rowdatabound 

 

Please get back to us if you need further assistance on this. 

 

Regards, 

Rajapandiyan S 

[Daniel Berresheim]

Hello there,

I use this same approach to hide rows from my grids/treegrids.

The problem is though that when all elements are hidden via "collapse", the 'EmptyRecord' text of the grid does not show.

You can easily reproduce this in the provided sample code ( https://stackblitz.com/edit/angular-rdwz63-bexmbf?file=app.component.ts  ). If you load an empty datasource, the grid shows the EmptyRecord like expected. But if you remove the check in line 29 to collapse all rows, it is just empty without the record.

Is there a way to fix this? Or is this possibly fixed in more recent versions if it is considered a bug?

[Aishwarya Rameshbabu]

Hi Daniel Berresheim,

Upon reviewing your query, it has been observed that you wanted to display the 'EmptyRecord' text in the Syncfusion Grid after all records have been hidden. In the provided sample, the visibility of the rows is set to collapse, which only makes the rows invisible in the viewport. The 'EmptyRecord' message is usually displayed when there is no data in the grid, meaning the data source is either empty or filtered to yield no results. However, hiding rows through collapsing does not alter the grid’s data source, and consequently, the 'EmptyRecord' message will not be displayed.

Regards

Aishwarya R

[Daniel Berresheim]

Hi,

yes that is all true. But from the users perspective, this solution can result in inconsistent feeling grids. In my application, it feels arbitrary when the empty grid shows a message and when it does not.

Is the only way to make a filter feature that does not have this problem to entirely delete filtered elements from the datasource?

[Aishwarya Rameshbabu]

Hi Daniel Berresheim,

Upon reviewing the information provided, we have identified that you are encountering inconsistencies with the 'EmptyRecord' text not being displayed when rows are hidden in the Grid. As previously mentioned, the Grid does not recognize the custom styles applied to the rows, and the 'EmptyRecord' message is only displayed when there is no data in the Grid. However, we will investigate the feasibility of achieving your requirement to display this message after records are hidden in the Grid. To proceed further, we require some additional information to better understand your specific needs. So please share the below details.

• Please provide a detailed description of your requirement, explaining the use case for hiding rows.
• From your query, it appears you are hiding filtered records. Kindly confirm if you are dynamically hiding or showing records, and if so, please describe the scenario in which this occurs.
• Share the complete Grid rendering code along with the event handler functions utilized.
• Specify the type of data binding used in the Grid.
• Indicate the version of the Syncfusion package you are currently using.

Regards

Aishwarya R

[Daniel Berresheim]

Hi, apologies for leaving this unresponded for so long.
Creating a version of the grid code that I can share would have been difficult to do and other tasks got in the way.

In the end, I rewrote our code to replace the datasource with an empty array when the empty grid text should be shown. I guess this generally works as a workaround to the problem.

Anyway, thanks for the support.

[Dineshnarasimman Muthu]

Hi,

 

Thanks for the update. Please let us know if you need any further assistance.

 

Regards,

Dineshnarasimman M