Particular Row Highlight after Selecting Color in sapui5

View.xml File : put the same code in between  <content></content>

<Table id="tableId" items="{/data}">
<columns>
<Column>
<Text text="column 1"/>
</Column>
<Column>
<Text text="column 2"/>
</Column>
<Column>
<Text text="column 3"/>
</Column>
<Column>
<Text text="column"/>
</Column>
</columns>
<items>
<ColumnListItem>
<cells>
<Text text="{column1}"/>
<Text text="{column2}"/>
<Text text="{column3}"/>
<ActionSelect 
change="openDialog"
id="select"
class="compact"
items="{/data}">
<items>

<core:Item key="{column}" text="{column}" />

</items>

</ActionSelect>


</cells>
</ColumnListItem>

</items>
</Table>



Controller.js File :


onInit: function() {
var a=this.getView().byId("tableId");
var b=new sap.ui.model.json.JSONModel("Model/data.json");
a.setModel (b);
},
openDialog:function(oEvent){
var key=oEvent.getSource().getSelectedKey();
oEvent.getSource().getParent().removeStyleClass("Purple");
oEvent.getSource().getParent().removeStyleClass("Orange");
oEvent.getSource().getParent().removeStyleClass("Gold");
oEvent.getSource().getParent().removeStyleClass("Red");
if(key== "Purple")
{
oEvent.getSource().getParent().addStyleClass("Purple");
}
else if(key=="Orange")
{
oEvent.getSource().getParent().addStyleClass("Orange");
}
else if(key=="Gold")
{
oEvent.getSource().getParent().addStyleClass("Gold");
else if(key=="Red")
{
oEvent.getSource().getParent().addStyleClass("Red");
}
}


Stylesheet.css File :

.Purple{
background-color: #800080 !important;
}
.Orange{
background-color: #FF4500 !important;
}
.Gold{
background-color: #FFD700 !important;
}
.Red{
background-color: #FF0000 !important;
}


Html file :

Put in head section
<link rel="stylesheet" type="text/css" href="Stylesheet.css">



data.json

{
"data" :[
{
"column1":"c1",
"column2":"c2",
"column3":"c3",
"column":"Select"
},
{
"column1":"t1",
"column2":"t2",
"column3":"t3",
"column":"Purple"
},
{
"column1":"d1",
"column2":"d2",
"column3":"d3",
"column":"Orange"
},

{
"column1":"e1",
"column2":"e2",
"column3":"e3",
"column":"Gold"
},

{
"column1":"s1",
"column2":"s2",
"column3":"s3",
"column":"Red"
}

]

}

Post a Comment

Previous Post Next Post