How to change style class of td in table

[ZhangMingquan]

Hi Experts,

In SAPUI5, there is no APIs to change anything of the table cell itself.

The following code is aimed to modify the style of the td cell and control in the cell, but both of them adds style class to the control, not td cell.

Could anyone indicate how to change td cell style in a table?

editableFormatter: function(v, control) {
   if(sap.ui.getCore().byId("btnEdit").getText()==="Edit") {
     control.getParent().getCells()[2].addStyleClass('readonly');
     control.addStyleClass('readonly');
   }
}

The top one is what I need by modifying html in debug tool.

The bottom one is current implementation.

B.R.

Mingquan

[kedarT · Accepted solution]

Hi Mike,

Hope this helps - JS Bin - Collaborative JavaScript Debugging

[ZhangMingquan · Accepted solution]

Hi Kedar,

Thanks for your reply, your code will apply the style to the control in td, not td cell itself.

I need to change background color of td conditionally for nice look and feel.

Regards,

Mingquan

[former_member182862 · Accepted solution]

Using what Kedar has

will this work?

JS Bin - Collaborative JavaScript Debugging

[ZhangMingquan · Accepted solution]

Thanks Dennis, the example works.

But when I use it, browser complains getItems is not a function, how it different from getRows? I need to get all rows not only visible rows, any more hints?

Thanks again.

Mingquan

[former_member182862 · Accepted solution]

please check the one in bold

oTable.addEventDelegate({
  onAfterRendering: function() {
    this.getItems().forEach(function(item) {
      var o = item.getBindingContext().getObject();
      var dom = $(item.$().find('TD:nth-child(4)'));
      console.log(o);
      if (o.Salary < 2000) {
        dom.addClass('green');  
      } else if (o.Salary < 20000) {
        dom.addClass('yellow');  
      } else {
        dom.addClass('red');  
      } 
    });
  }
}, oTable);

[ZhangMingquan · Accepted solution]

There is no getItems function of Table, could you please help explain a little?

[former_member182862 · Accepted solution]

Here is the equivalent when using sap.ui.table.Table

JS Bin - Collaborative JavaScript Debugging

Thanks

-D

[ZhangMingquan]

Dear all,

I found the td id is like this: id="oTable-rows-row0-col2", could I use jquery to add style class to td like this $('#'+table.getId()+'-rows-row'+i+'-col'+idx).addClass('readonly')?

Array of data in table is in place and column index is given.

for(var i = 0, j = parameters.length; i < j; i++) {

  pr = parameters[i];

  if(pr.modifiable)

      $('#'+table.getId()+'-rows-row'+i+'-col'+idx).removeClass('readonly');

  else

      $('#'+table.getId()+'-rows-row'+i+'-col'+idx).addClass('readonly');

  }

Any risks and any suggestions?

B.R.

Mingquan

[former_member182862]

Don't you think that it is complicated?

[ZhangMingquan]

the problem of getRows is it only return visible rows.

The requirement is to apply custom style to 1 column in all rows based on bound data.

Have not found an elegant solution so far.

[former_member182862]

Why do you need to add the style when the rows are not visible? Who can see these rows?

[ZhangMingquan]

User may scroll down and see them

[former_member182862]

then onAfterRendering will be called again 🙂

[ZhangMingquan]

no, it will not.

scroll will not trigger onAfterRendering, paging may...

[former_member182862]

sorry, you are right.

JS Bin - Collaborative JavaScript Debugging

We have to override updateRows function

Thanks

-D

[saivellanki]

Hi Mike,

If you're using sap.ui.table.Table control. Will this work? - JS Bin - Collaborative JavaScript Debugging

Regards,

Sai Vellanki.