SAPUI5: Highlight rows on TreeTable Control

Hello,

I want to show how to highlight rows on a TreeTable control in SAPUI5. The idea is to show two TreeTable controls ( ‘TreeTableBasic’ & ‘TreeTableBasic2’ )  and when you hover a text on ‘TreeTableBasic2’, highlight the same row in the TreeControl ‘TreeTableBasic’ .

Here a working example Plnkr and the final result

The example will have the same JSON model as TreeTable sample:

https://sapui5.hana.ondemand.com/#/entity/sap.ui.table.TreeTable/sample/sap.ui.table.sample.TreeTable.JSONTreeBinding

We can create a XML view with two TreeTable controls loading the same JSON model:

<mvc:View controllerName="treetable.view.Main" xmlns="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns:m="sap.m"
	xmlns:u="sap.ui.unified" xmlns:core="sap.ui.core" xmlns:dnd="sap.ui.core.dnd" xmlns:f="sap.f" xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true"
	height="100%">
	<m:Page showHeader="false" enableScrolling="true">
		<m:content>
			<m:HBox>
				<TreeTable id="TreeTableBasic" rows="{path:'/catalog/clothing', parameters: {arrayNames:['categories']} }" selectionMode="MultiToggle" rowHeight="20"
					expandFirstLevel="true" visibleRowCount="40" enableSelectAll="false" ariaLabelledBy="title" height="100%">
					<columns>
						<Column width="30rem">
							<m:Label text="Title"/>
							<template>
								<m:Text text="{name}" wrapping="false"/>
							</template>
						</Column>
				
					</columns>
					<dragDropConfig>
						<dnd:DragDropInfo sourceAggregation="rows" targetAggregation="rows" targetElement="TreeTableBasic2" dropPosition="On"
							dragStart="onDragStart" drop="onDropWindowOnSelf"/>
					</dragDropConfig>
				</TreeTable>
				<TreeTable id="TreeTableBasic2" rows="{path:'/catalog/clothing', parameters: {arrayNames:['categories']}}" selectionMode="MultiToggle" rowHeight="20"
					visibleRowCount="40" enableSelectAll="false" ariaLabelledBy="title">
					<columns>
						<Column width="30rem">
							<m:Label text="Categories"/>
							<template>
								<m:Text text="{name}" wrapping="false"/>
							</template>
						</Column>
					
					</columns>
				</TreeTable>
			</m:HBox>
		</m:content>
	</m:Page>
</mvc:View>

Then in javascript we will implement two events for each row, onmouseover and onmouseout. In the afterrendering event of TreeTable ‘TreeTableBasic2’ we will visit all the rows and add both handlers so that when we hover a text onHover function will be executed and when we leave that cell onMouseOut function is executed.

Both functions will find the same text in TreeTable ‘TreeTableBasic’ and will highlight it, we will do that adding a css class ‘overdue’

sap.ui.define([
	"sap/ui/core/mvc/Controller",
	"sap/ui/model/json/JSONModel"
], function (Controller, JSONModel) {
	"use strict";

	return Controller.extend("treetable.view.Main", {

		onInit: function () {
			
			var oModel = new JSONModel("model/Clothing.json");
			
			this.getView().setModel(oModel);
			

			var oTable2 = this.byId("TreeTableBasic2");
			
			var onAfterRenderingSum = function () {

				var onHover = function (par1) {
					var text = par1.srcControl.getBinding("text").oValue;
					var table = this.byId("TreeTableBasic");
					var rowsFirstTable = table.getRows();
					for(var j=0; j<rowsFirstTable.length; j++ ){
						var row = rowsFirstTable[j];
						if(row.getCells()[0].getBinding("text").oValue === text ){
							//row.addStyleClass("sapUiTableRowSel");
							row.addStyleClass("overdue");
						}
					}
				}.bind(this);
				
				var onMouseOut = function(par1){
					var text = par1.srcControl.getBinding("text").oValue;
					var table = this.byId("TreeTableBasic");
					var rowsFirstTable = table.getRows();
					for(var j=0; j<rowsFirstTable.length; j++ ){
						var row = rowsFirstTable[j];
						if(row.getCells()[0].getBinding("text").oValue === text ){
							row.removeStyleClass("overdue");
						}
					}	
				}.bind(this);
				
				var rows = oTable2.getRows();
				for (var i = 0; i < rows.length; i++) {
					if(rows[i].getCells()[0].aDelegates.length === 0 ){
					rows[i].getCells()[0].addEventDelegate({
						onmouseover: onHover,
						onmouseout: onMouseOut
					});
					}
				}
			}.bind(this);
			
			oTable2.addEventDelegate({
				onAfterRendering: onAfterRenderingSum
			});

		}	
	});
});

.sapUiTableCtrl tr.sapUiTableRowHvrJose {
    background-color: #e6f50e;
    color: #333333
}

.overdue {
	-webkit-animation: anim-overdue 1500ms;
}

.overdue {
	color: red;
}

@-webkit-keyframes anim-overdue {
	50%  {
		background-color: red;
	}
}

I hope this is helpful

Regards