sap.ui.table TreeTable Binding Problem (Scrolling)

[Former Member]

Hello,

i am currently writing a little Fiori App for intern managers to give employees a rating of their qualification. This gives HR the opportunity, to find the right training opportunities.

I am therefore using a sap.ui.table.TreeTable to visualize the hierachy of our qualification catalog, each column represents a single employee:

the number in the brackets is the must-have-value of the specific qualification.

Red = Underrated, Green: Accurate, Blue: Overrated.

Data binding:

Extended RatingIndicator to append the custom style class onAfterRendering, these style classes control the colors of the stars:

jQuery.sap.declare("ZRatingIndicator");
sap.m.RatingIndicator.extend('ZRatingIndicator', {
	metadata: {
		properties: {
			clazz: 'string'
		}
	},
	renderer: function(oRm, oControl) {
		sap.m.RatingIndicatorRenderer.render(oRm, oControl);
	},
	onAfterRendering: function() {
		if (sap.m.RatingIndicator.prototype.onAfterRendering) {
			sap.m.RatingIndicator.prototype.onAfterRendering.apply(this);
		}


		s.onValueBasedStyleClass(this);


	}
});

In function onValueBasedStyleClass i fetch the styleClass:

var styleClass;
oRatingIndicator.removeStyleClass("OVERRATED");
oRatingIndicator.removeStyleClass("UNDERRATED");
oRatingIndicator.removeStyleClass("ACCURATE");


try {
	if (soll > ist) {
		styleClass = "UNDERRATED";
	} else if (ist > soll) {
		styleClass = "OVERRATED";
	} else if (ist == soll) {
		styleClass = "ACCURATE";
	} else {
		//Nothing.
	}
	if (styleClass != undefined) {
		oRatingIndicator.addStyleClass(styleClass);
	}
} catch (e) {
	console.error(e.message);
}

Binding:

oNewCol = new sap.ui.table.Column({
	//[...]
	template: new sap.m.FlexBox({
		direction: "Row",
		alignItems: "Center",
		justifyContent: "Start",
		alignContent: "Center",
		items: [
			new ZRatingIndicator({
				visible: "{" + uKey + "_VISIBLE}",
				maxValue: "{" + uKey + "_MAX}",
				value: "{" + uKey + "_VALUE}",
				tooltip: "{" + uKey + "_TOOLTIP}",
				editable: "{" + uKey + "_EDITABLE}",


				customData: [
					new sap.ui.core.CustomData({
						key: "SOLL",
						value: "{" + uKey + "_MIN}"
					})
				],


				liveChange: function(oEvt) {
					//[...]
				}


			}),
			new sap.m.Label({
				text: "(" + "{" + uKey + "_MIN}" + ")",
				visible: "{" + uKey + "_VISIBLE}",
				tooltip: "Minimum",
				design: "Bold"
			}).addStyleClass("MAX_LABEL")
		]
	})
});
oTreeTable.addColumn(oNewCol);

CSS (e.g.):

.UNDERRATED > .sapMRISel {
    float: left;
    display: block;
    overflow: hidden;
    padding: 0;
    margin: 0;
    color: #b00;
    word-wrap: normal;
    white-space: nowrap;
}


.UNDERRATED > .sapMRIHov {
    float: left;
    display: none;
    overflow: hidden;
    word-wrap: normal;
    white-space: nowrap;
    color: #b00;
}

This works fine on first sight.

When i scroll down, still good.

When i scroll up by one mouse wheel step, the binding has some pain.

First rendering after scroll down:

1 out of 5 stars, must-have 4, --> Underrated --> Red. Binding works.

One step upstairs:

1 out of 5 stars, must-have 4 --> Accurate --> Green, WRONG!

The whole binding paramers to the properties of RatingIndicator are fine, but the styleClass is not rendered properly.

Scrolling down again leads back to the right rendering.

Hint: problem does NOT depend on the rendering engine, but on the binding. The wrong style class is binded to the dom element:

Of course i've done some data bindings through out my days as a ui5 dev, but i cant see the error this time...

If anybody has an idea, please advise!

Cheers,

Stephan

[Former Member]

Hi,

theres no error in console.

yep, it jumps in the setValue function, at this point of time, its too early for the customData to get binded.

sValue (actual value of rating) is binded, but customData.value is always null.

Left: setValue()

Right: onAfterRendering()

regards,

Stephan