setRowData() and updateRow() won't trigger queryCellInfo or rowDataBound

[Marko Bezjak]

Hello.

I am colorizing my row / cells in the events mentioned in the title. But if I update row with methods "setRowData" or "updateRow" the events just wont trigger meaning my row wont change color based on new values in it.

Is this a bug at your end or am I missing something here?

Regards.

Marko

[Magesh Sabapathi]

Hi Marko, 

Greetings from syncfusion support 

Query : setRowDate() and updateRow() won’t trigger queryCellinfo and rowDataBound. 

We have created an sample and in our sample both the events got triggered when we call any method to update data.  

We also attached a working sample for your reference kindly refer that and also please share the complete grid code example to find out the root cause of an issue. 

App.component.ts 

  enable() {                                    // Button click function 

        this.grid.updateRow(0, { 

          OrderID: 10248, 

        CustomerID: "VI", 

        Freight: 13 

      }); 

    } 

    disable(){                                    // Button click function 

        var oldID = this.grid.dataSource[1].OrderID; 

        var data = this.grid.dataSource[2]; 

        this.grid.setRowData(oldID, data); 

    } 

      rowDataBound(args: RowDataBoundEventArgs) { 

        console.log("RowdataBound hitted.....") 

      } 

      queryCellInfo(args: any){ 

        console.log("QueryCellInfo hitted.....") 

        if(args.data.Freight < "25" ){ 

          args.cell.bgColor = "Grey";            // This will change the color according to datas in Grid. 

        } 

      } 

} 

Api link : https://ej2.syncfusion.com/javascript/documentation/api/grid/#updaterow 

                https://ej2.syncfusion.com/javascript/documentation/api/grid/#setrowdata 

                https://ej2.syncfusion.com/javascript/documentation/api/grid/#querycellinfo 

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

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

Please get back to us if you need further assistance 

Regards 

Magesh 

[Marko Bezjak]

Hello.

Thank you for your example. But the example is really basic and didn't really test anything else beside triggering. I clearly stated "row wont change color" in my topic.. (it is my mistake that I named topic "won't trigger queryCellInfo or rowDataBound"). So I will explain the problem again... The rowDataBound event GETS triggered but the row reference in the event arguments is not correct thus row won't change color.
I have updated your example where you can see that with changing the CustomerID to 'bbb' won't change the backgroundColor.

https://stackblitz.com/edit/angular-dp2i5j-2nqdjq?file=app.component.ts (probably both events have the same problem)

Your example also brings me to a question about updateRow.

 updateRow event always changes the row that corresponds with the OrderID and not the row that would correspond to the passed index. So I don't fully understand what is the point of the index parameter in this function.

Regards.

Marko

[Magesh Sabapathi]

Hi Marko , 

 

Query 1 : Row color won’t change in rowDataBound event while set the row using setRowData() method. 

 

In rowDataBound event you can get the cell elements in args.row.cells. With these cell values you can set the color for each cell element. Please refer the code snippet and sample for more reference. 

 

App.component.ts 

 

import { Component, OnInit, ViewChild } from '@angular/core'; 

 

 disable(){ 

         var mmm = {OrderID: 111, CustomerID: "bbb", Freight: 12} 

         this.grid.setRowData(10250, mmm); 

    } 

      rowDataBound(args: RowDataBoundEventArgs) { 

        console.log("RowdataBound hitted.....", args); 

        if (args.data['CustomerID'] === 'bbb'){ 

          console.log('CustomerID == bbb'); 

          var cell = args.row.cells; 

          for(var i=0; i<cell.length; i++){ 

            cell[i].style.backgroundColor = "Pink"; 

           }       

     } 

} 

 

 

Query 2 : UpdateRow() method change the row values corresponds to the OrderID value. 

 

By default, the index value passed in the updateRow method is to get the previous row data (data before changing). You need to set the index value same to the corresponding orderID given on the changing data.  

 

App.component.ts 

enable() { 

        this.grid.updateRow(3, { 

        OrderID: 10251, 

        CustomerID: "aaa", 

        Freight: 13 

      }); 

Sample : https://stackblitz.com/edit/angular-dp2i5j-63rd5z?file=app.component.ts 

Please get back to us if you need further assistance 

Regards 

Magesh 

[Marko Bezjak]

Query 1 : Row color won’t change in rowDataBound event while set the row using setRowData() method. 

rowDataBound(args: RowDataBoundEventArgs) { 

        console.log("RowdataBound hitted.....", args); 

        if (args.data['CustomerID'] === 'bbb'){ 

          console.log('CustomerID == bbb'); 

          var cell = args.row.cells; 

          for(var i=0; i<cell.length; i++){ 

            cell[i].style.backgroundColor = "Pink"; 

           }       

     } 

This solution leads me to a problem where my rowDataBound triggers after queryCellInfo and overrides the color in my cells. How can i solve this so that color from queryCellInfo will have the priority?

regards.

Marko

[Magesh Sabapathi]

Hi Marko, 

We are sorry for the inconvenience caused. 

In EJ2 Grid the queryCellInfo and rowDataBound events are similar to each other. The queryCellInfo event will be triggered for each cell render and the rowDataBound event will be triggered once if it cells rendered . So, we suggest you to anyone event in your application, if you use both events then CSS will be override. 

In previous update we mentioned that the both events will be triggered when you used updateRow() and setRowData() methods. So, we suggest you to use anyone event for your application to achieve your requirement. 

If you face any issue while achieving your requirement with anyone event, please get back to us with the issue details and we are happy to assist you. 

Regards 

Magesh 

[Marko Bezjak]

Hello.

I think it is very nice and useful to use both functions sometimes... so I found a solution today which might not be the best but it works.

Basically in queryCellInfo I set a custom class to the cell which tells me that this cell has been colorized in "query cell info" function.

queryCellInfoColorize() {

...

and then in the rowDataBound function I check for this class and I don't change the color of this cell.

rowDataBoundColorize() {

...

Regards.

Marko

[Magesh Sabapathi]

Hi Marko, 

We are happy to hear that you have found the solution. 

But when you use both events in your application the rowDataBound event will override the action done by queryCellInfo though it called after the queryCellInfo. So you can restrict the actions performed in rowDataBound event by defining some conditions. You can use your solution to achieve your requirement. 

Please get back to us if you need further assistance 

Regards 

Magesh