CODEWITHSUNDEEP
sapui5
RegisteredUser
RegisteredUser

Reputation: 71

How to set table row class value dynamically in openui5 / sapui5?

There is a openui5 offical example about table.

Is there anyway to set class attribute dynamically for table row in the Table.view.xml.

<ColumnListItem>
    <cells>
        <ObjectIdentifier
            title="{Name}"
            text="{ProductId}"/>
        <Text
            text="{SupplierName}" />
        <Text
            text="{Width} x {Depth} x {Height} {DimUnit}" />
        <ObjectNumber
            number="{WeightMeasure}"
            unit="{WeightUnit}"
            state="{
                path: 'WeightMeasure',
                formatter: 'sap.m.sample.Table.Formatter.weightState'
            }" />
        <ObjectNumber
                number="{
                    parts:[{path:'Price'},{path:'CurrencyCode'}],
                    type: 'sap.ui.model.type.Currency',
                    formatOptions: {showMeasure: false}
                }"
                unit="{CurrencyCode}" />
    </cells>
</ColumnListItem>

Eg. row 1

<ColumnListItem class="bg-gray">

row 2

<ColumnListItem class="bg-blue">

row 3

<ColumnListItem class="bg-green">

The following code does not meet the requirements：

<ColumnListItem class="{rowStyle}">

Upvotes: 0

Views: 3816

Answers (2)

vivek
vivek

Reputation: 140

You can use formatter, function will be like this : 

setColour : function(Condition){
  if(Condition){
     var cellId = this.getId();
     $("#"+cellId).parent().parent().parent().css("background-color","Blue");
  }
}

your column code will be like this :

<Input value="{path:'Condition',formatter:'formmater_path.setColour'}" />

Upvotes: 0

krisho
krisho

Reputation: 1034

Unfortunately, 'class' cannot be bound to a property. But there are easy alternatives.

It involves below steps.

  1. Create a property (Using CustomData) in the DOM using binding. 

          <ColumnListItem type="Active">
        <customData>
          <core:CustomData key="background" value="{Country}" writeToDom="true" />
        </customData>
        <cells>
            <ObjectIdentifier title="{CustomerID}"/>
            <Text text="{CompanyName}"/> 
            <Text text="{Address}"/> 
            <Text text="{Country}"/> 
        </cells>
    </ColumnListItem>

  2. Use Attribute-Value CSS selectors to select the above written DOM and apply color

    tr[data-background="Mexico"] {
 background-color: #eaa6a6 !Important;
}

I have written a blog here. https://blogs.sap.com/2016/12/02/binding-based-dynamic-background-colors-for-sap.m.table-rows/

JS Bin

Upvotes: 1

Related Questions