How to highlight a row without triggering rowSelected

[Michal Szkudlarek]

Hi,

I am trying to highlight/select the row (in grid or treeGrid) without triggering rowSelected.

I tried calling this method, but it triggers rowSelected:

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

Any idea?

[Manivel Sellamuthu]

Hi Michal, 

Greetings from Syncfusion support. 

Query: I am trying to highlight/select the row (in grid or treeGrid) without triggering rowSelected. 

 

Based on your query we suspect that you want to change the styles of the Grid rows or TreeGrid rows. If so you can customize the appearance of a row by using the rowDataBound event. The rowDataBound event triggers for every row. In the event handler, you can get the RowDataBoundEventArgs that contains details of the row. Please refer the below documentation for more information. 

Grid: https://ej2.syncfusion.com/documentation/grid/row/#customize-rows 

Tree Grid: https://ej2.syncfusion.com/angular/documentation/treegrid/row/#customize-rows  

If we misunderstood your query or this is not your exact requirement, please share more about your requirement with screenshot or video demonstration. 

Regards, 

Manivel 

[Michal Szkudlarek]

Thanks for coming back to me. This is not something I'm looking for.

What you execute .selectRow or selectRows programmatically two things happen:

 - row changes colors (appears highlighted)

- rowSelected is triggered

I would like to select a row programmatically without triggering rowSelected.

[Manivel Sellamuthu]

Hi Michal, 

Thanks for your update. 

In EJ2 Grid, while selecting the Grid’s row it will triggers on rowSelecting and rowSelected events. This is the default behavior of the Grid. However we can distinguish the selection of  the row is performed through user interaction or programmatically using the args.isInteracted property.  

Please refer the below code example for more information. But it is not feasible to prevent the rowSelected event while selecting the row using selectRow method. 

<div class="control-section"> 

    <ejs-grid [dataSource]='data' (rowSelected)="rowSelected($event)" height='350'> 

        <e-columns> 

. . . 

        </e-columns> 

    </ejs-grid> 

</div> 

export class AppComponent { 

    public data: Object[] = []; 

 

    ngOnInit(): void { 

        this.data = orderDetails; 

    } 

 

    rowSelected (args) { 

        console.log(args.isInteracted); 

    } 

} 

Please let us know if you need further assistance. 

Regards, 

Manivel 

[Michal Szkudlarek]

Hi,

Thanks, but in this way we are not blocking rowSelected execution, we are just working around checking if event is triggered programmatically or via user interaction. 

I have two places in the solution where I have to select a row programmatically. 

In one case, I have to trigger rowSelected, in other case I do not want to do it.

[Rajapandi Ravi]

Hi Michal, 

Thanks for the update 

From your update, we could see that you like to prevent the rowSelected event. In our previous update, we have provided isInteracted property to differentiate the selection of the row is performed through user interaction or programmatically. So, we suggest you use the isInteracted property to achieve your requirement. 

By default, in our EJ2 Grid, if we select the row through selectRow method, the rowSelected event is triggered. It is not feasible to prevent the rowSelected event. This is our default behavior.  

Regards, 

Rajapandi R 

[Michal Szkudlarek]

Thanks.

Please consider adding 'emitEvent' boolean option to selectRow.

Please have a look how it behaves in other opinionated frameworks, ie reactive forms:

https://angular.io/api/forms/FormControl#setValue

Kind regards,

Micha

[Joseph Christ Nithin Issack]

Hi Michal, 

Based on your query, we have prevented the rowSelected event when we select a row using selectRow method programmatically and it will trigger only on the mentioned event when user interaction on the Grid row. In the below code example, we have select a row programmatically and prevent the rowSelected event using isStopped property in the external button click action. 

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

[app.component.ts] 

 rowSelected(args) { 

    console.log('Select'); 

  } 

  onClick(e) { 

    (this.grid.rowSelected as any).isStopped = true; // Prevented the rowSelected trigger 

    this.grid.selectRow(0); 

    setTimeout( 

      function() { 

        (this.rowSelected as any).isStopped = false; 

      }.bind(this.grid), 

      100 

    ); 

  } 

Sample link: https://stackblitz.com/edit/angular-59xzqc-jnelxy?file=app.component.ts 

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

Regards, 

Balaji Sekar. 

[Michal Szkudlarek]

Thanks.
Unfortunately provided solution is not a best practice.

Please have a look how similar things are handled in other frameworks. Ie reactive forms:

https://angular.io/api/forms/FormControl#setvalue

So basically: 

.selectRow would take an extra argument (triggerRowSelected) stating to trigger or not rowSelected

[Rajapandi Ravi]

Hi Michal, 

Thanks for the update 

By default, in our EJ2 Grid architecture, when execute the selectRow method the rowSelected event gets triggered. It is not feasible to prevent the rowSelected event. This is our default behavior.   

In our previous update, we have provided isInteracted property to differentiate the selection of the row is performed through user interaction or programmatically. Also, we provided isStopped property to prevent rowSelected event.  

So, before we start providing solution on this query, we need some information for our clarification. So please share the below details that would be helpful for us to provide better solution. 

1)    Please share your exact requirement with detailed description. 

2)    Share the details about why you like to prevent the rowSelected event while executing the selectRow() method. Please explain you use case scenario with detailed description. 

Regards, 

Rajapandi R