How to implement multiple level merge in sap.m.Table? - sapui5

Question

DEMO
I want to implement multiple level merge in sap.m.Table. I tried to add mergeDuplicates="true" in the second column, but it look like this:
Pretty strange. I added data of the first column to the second column: <Text text="{name} {amount} "/>, the split looks like want I want, but how to hide {name} data?
Did some research in doc of sap.m.Column, find mergeFunctionName
You can pass one string parameter to given function after "#" sign. e.g. "data#myparameter":
Can I pass both {name} and {amount} to myparameter function?

Answer 1

In order to create a property where we can add a property to hold such primary key that can automatically be accessed by a single getter function, we extend the Text control as shown below.
sap.ui.define(
['sap/m/Text'],
function(Text) {
return Text.extend("namespace.controls.MergableText", {
metadata: {
properties: {
mergeDependent: {
type: "string",
defaultValue: ""
}
}
},
renderer: function(oRm, oControl) {
sap.m.TextRenderer.render(oRm, oControl); //use supercass renderer routine
}
});
}
);
The above is a file called MergableText.js which can be stored in the controls folder in the webapp. Now this can be used by defining in namespace:
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:custom="namespace.controls"
controllerName="namespace.controller.PlannedOT">
<Table>
<columns>....</columns>
<items>
<ColumnListItem>
....
<custom:MergableText text="{>amount}" mergeDependent="{name}"> </custom:MergableText>
.....
<ColumnListItem>
</items>
</Table>
</mvc:View>
In this manner the amount can be merged only based on its dependency on the name.

Answer 2

the root cause is that you should define your sorter properly for your binding.
items="{
path: '/',
sorter: [{
path: 'name',
descending: false,
group:true
}, {
path: 'amount',
descending: false,
group:true
}]
}"

Answer 3

Using mergeNameFunction is the good approach :) You can use any binding internal method that will force the comparison.
E.g.
<Column mergeDuplicates="true" mergeFunctionName="getBindingContext">
<Text text="column2"/>
</Column>
will work with no other modifications

Answer 4

Late reply but hopefully still useful. I developed my own solution based on this.
Good news: What you want to achieve is possible without extending controls or grouping the table.
Add sap.ui.core library:
xmlns:core="sap.ui.core"
Add custom data to your cells like this:
<customData>
<core:CustomData key="mergeKey" value="{name}" />
</customData>
Use this custom data in your merge function like this:
mergeFunctionName="data#mergeKey"
The magic happens when you use the binding from column1 and column2 combined as a value for the custom data in column 2. That stops the whole column2 from becoming one cell and you get the desired divider between bus and truck.
Final solution:
<mvc:View
controllerName="demo.FirstPage"
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:semantic="sap.f.semantic"
xmlns:core="sap.ui.core">
<Table
id="table"
mode="MultiSelect"
width="auto"
items="{
path: '/'
}"
growing="true"
growingScrollToLoad="true">
<columns>
<Column
mergeDuplicates="true"
mergeFunctionName="data#mergeKey">
<Text text="column1"/>
</Column>
<Column
mergeDuplicates="true"
mergeFunctionName="data#mergeKey">
<Text text="column2"/>
</Column>
<Column>
<Text text="column3"/>
</Column>
</columns>
<items>
<ColumnListItem id="cli" type="Detail">
<cells>
<Text text="{name}">
<customData>
<core:CustomData key="mergeKey" value="{name}" />
</customData>
</Text>
<Text text="{amount}">
<customData>
<core:CustomData key="mergeKey" value="{name}{amount}" />
</customData>
</Text>
<Text text="{currency}, {size}"/>
</cells>
</ColumnListItem>
</items>
</Table>
</mvc:View>
Screenshot of final result