Content of TreeTable Column is not moving!!

[Former Member]

Hi everyone,

at this moment, I am writing my bachelor thesis about SAPUI5. Shortly, before the end of the work, I noticed a big mistake. I extended an app with the extension project function of the SAP Web IDE by one column "Comment" (look at the first picture). When I am scrolling through the TreeTable, the content of the "Comment"-Column is not moving (look at the second picture).

Here is the xml code:

<tree:TreeTable id="tree_pl" selectionMode="None" visibleRowCount="20" visibleRowCountMode="Interactive" inset="false"
	noDataText="{i18n>NO_DATA_TXT_INITIAL}" 
	rows="{nodes>/results}"
	items="{json>/Periods}"
	data:persoKey="P13N_tree_pl" >
	<tree:columns>
		<!-- Master text column -->
		<tree:Column width="450px" data:persoKey="MasterText" id="tree_pl_MasterText" >
			<Label text="{i18n>COL_MASTER_TEXT}" tooltip="{i18n>COL_MASTER_TEXT}" textAlign="Left"></Label>
			<tree:template>
				<Label
					text="{parts:[{path:'FinancialStatementItemText'},{path:'OperativeGLAccountName'},{path:'OperativeGLAccount'},{path:'AlternativeGLAccountName'},{path:'AlternativeGLAccount'},{path:'CorporateGroupAccountName'},{path:'CorporateGroupAccount'}], formatter:'fin.gl.finstatement.display.view.Formatter.masterTextFormatter'}"></Label>
			</tree:template>
		</tree:Column>
		<!-- Account column -->
		<tree:Column hAlign="Left" data:persoKey="GLAccount" id="tree_pl_GLAccount">
			<Label text="{labels>/#ListFinStmnt/OperativeGLAccount/@sap:label}" tooltip="{labels>/#ListFinStmnt/OperativeGLAccount/@sap:label}"></Label>
			<tree:template>
				<Label
					text="{parts:[{path:'OperativeGLAccount'},{path:'AlternativeGLAccount'},{path:'CorporateGroupAccount'}], formatter:'fin.gl.finstatement.display.view.Formatter.accountFormatter'}"
					tooltip="{parts:[{path:'OperativeGLAccount'},{path:'AlternativeGLAccount'},{path:'CorporateGroupAccount'}], formatter:'fin.gl.finstatement.display.view.Formatter.accountFormatter'}"></Label>
			</tree:template>
		</tree:Column>


		<!-- Segment column -->
		<tree:Column hAlign="Left" data:persoKey="Segment" id="tree_pl_Segment" visible="false">
			<Label text="{labels>/#ListFinStmnt/Segment/@sap:label}" tooltip="{labels>/#ListFinStmnt/Segment/@sap:label}"></Label>
			<tree:template>
				<Label text="{path:'Segment'}"></Label>
			</tree:template>
		</tree:Column>
		<!-- SegmentName column -->
		<tree:Column hAlign="Left" data:persoKey="SegmentName" id="tree_pl_SegmentName" visible="false">
			<Label text="{labels>/#ListFinStmnt/SegmentName/@sap:label}" tooltip="{labels>/#ListFinStmnt/SegmentName/@sap:label}"></Label>
			<tree:template>
				<Label text="{path:'SegmentName'}"></Label>
			</tree:template>
		</tree:Column>
		<!-- ProfitCenter column -->
		<tree:Column hAlign="Left" data:persoKey="ProfitCenter" id="tree_pl_ProfitCenter" visible="false">
			<Label text="{labels>/#ListFinStmnt/ProfitCenter/@sap:label}" tooltip="{labels>/#ListFinStmnt/ProfitCenter/@sap:label}"></Label>
			<tree:template>
				<Label text="{path:'ProfitCenter'}"></Label>
			</tree:template>
		</tree:Column>
		<!-- ProfitCenterName column -->
		<tree:Column hAlign="Left" data:persoKey="ProfitCenterName" id="tree_pl_ProfitCenterName" visible="false">
			<Label text="{labels>/#ListFinStmnt/ProfitCenterName/@sap:label}" tooltip="{labels>/#ListFinStmnt/ProfitCenterName/@sap:label}"></Label>
			<tree:template>
				<Label text="{path:'ProfitCenterName'}"></Label>
			</tree:template>
		</tree:Column>
		<!-- period amount column -->
		<tree:Column hAlign="Right" data:persoKey="PeriodAmount" id="tree_pl_PeriodAmount">
			<Label text="{labels>/#ListFinStmnt/ReportingPeriodAmount/@sap:label}" tooltip="{labels>/#ListFinStmnt/ReportingPeriodAmount/@sap:label}"></Label>
			<tree:template>
				<Link
					text="{parts:[{path:'ReportingPeriodAmount'}, {path:'Currency'}], formatter:'fin.gl.finstatement.display.view.Formatter.formatCurrency'}"
					enabled="{path:'OperativeGLAccount', formatter:'fin.gl.finstatement.display.view.Formatter.formatNavigation' }" press="setNavigationLink"></Link>
			</tree:template>
		</tree:Column>
		<!-- comparison period amount column -->
		<tree:Column hAlign="Right" data:persoKey="ComparisonPeriodAmount" id="tree_pl_ComparisonPeriodAmount">
			<Label text="{labels>/#ListFinStmnt/ComparisonPeriodAmount/@sap:label}" tooltip="{labels>/#ListFinStmnt/ComparisonPeriodAmount/@sap:label}"></Label>
			<tree:template>
				<Link
					text="{parts:[{path:'ComparisonPeriodAmount'}, {path:'Currency'}], formatter:'fin.gl.finstatement.display.view.Formatter.formatCurrency'}"
					enabled="{path:'OperativeGLAccount', formatter:'fin.gl.finstatement.display.view.Formatter.formatNavigation' }"
					press="setNavigationComparisonLink"></Link>
			</tree:template>
		</tree:Column>
		<!-- difference column -->
		<tree:Column hAlign="Right" data:persoKey="AbsoluteDifferenceAmount" id="tree_pl_AbsoluteDifferenceAmount">
			<Label text="{labels>/#ListFinStmnt/AbsoluteDifferenceAmount/@sap:label}"
				tooltip="{labels>/#ListFinStmnt/AbsoluteDifferenceAmount/@sap:label}"></Label>
			<tree:template>
				<Label
					text="{parts:[{path:'AbsoluteDifferenceAmount'}, {path:'Currency'}], formatter:'fin.gl.finstatement.display.view.Formatter.formatCurrency'}"></Label>
			</tree:template>
		</tree:Column>
		<!-- Difference in % column -->
		<tree:Column hAlign="Right" data:persoKey="RelativeDifferenceAmount" id="tree_pl_RelativeDifferenceAmount">
			<Label text="{labels>/#ListFinStmnt/RelativeDifferencePercent/@sap:label}"
				tooltip="{labels>/#ListFinStmnt/RelativeDifferencePercent/@sap:label}"></Label>
			<tree:template>
				<Label text="{path:'RelativeDifferencePercent', formatter:'fin.gl.finstatement.display.view.Formatter.formatNumber'}" textAlign="Right"></Label>
			</tree:template>
		</tree:Column>
		<tree:Column hAlign="Right" id="tree_pl_Comment" >
			<Label text="{i18nNew>commentColumnTitle}" />
			<tree:template>
				<core:Icon 
					data:comNodeId="{nodes>ComNodeID}" 
					data:desc="{FinancialStatementItemText}" 
					data:glAcc="{OperativeGLAccount}"
					data:period="{ReportingPeriodAmount}"
					data:compare="{ComparisonPeriodAmount}"
					data:absol="{AbsoluteDifferenceAmount}"
					data:rela="{RelativeDifferencePercent}"
					src="{= ${nodes>CommentsExists} === 'T' ? 'sap-icon://notes' : 'sap-icon://border'}"
					tooltip="{path: 'nodes>CommentsExists', formatter: '.formatter.getTooltip'}"
					press="onPressComIcon" />
			</tree:template>
		</tree:Column>
		<!-- Auxiliary columns -->
		<!-- Node type column: to be filtered depending on the tab <tree:Column 
			visible="false" filterProperty="node_type"> <tree:template> <Label text="{node_type}"></Label> 
			</tree:template> </tree:Column> -->
		<!-- Key column: To be filtered depending on the select node (search) 
			<tree:Column visible="false" filterProperty="key"> <tree:template> <Label 
			text="{key}"></Label> </tree:template> </tree:Column> -->
	</tree:columns>
</tree:TreeTable>

I am frustrated, because I am trying to fix this problem for hours, but without success yet. Hopefully you can help me 🙂

Greetings

Tayfun

[former_member340030 · Accepted solution]

Actually in tree table .. the number of visible rows remains same always , its not like table has same number of rows as the data from the backend .. it reuses the rows when you scroll down or up it just changes the data in a row .. So you can't bind different models data to columns otherwise there will be a mismatch .. you need to place your comments column data along with the others column model data not like the way you put currently using 'nodes' model as other column have no such model data bind ..

Thanks

Viplove

[Former Member · Accepted solution]

Thanks Viplove,

sry for my late reply. Do you know how to solve the problem? Maybe redefine the oData-Service?

Thanks

Tayfun