Merge Duplicate Records& Fixed Header in Sap.M.Table
Core Concept to focus on : 1. In View this line should be there as it merges Duplicates based the fields where you will add this property . <Column mergeDuplicates="true">
Code : We have followed MVC for coding,we are using XML View & JS Controller .
View File :
<mvc:View controllerName="ZDEMO.MTABLE.controller.View1" xmlns:dnd="sap.ui.core.dnd" xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m" xmlns:u="sap.ui.unified" xmlns:core="sap.ui.core" xmlns:ui="sap.ui.table">
<Shell id="shell">
<App id="app">
<pages>
<Page id="page" title="Sap.m.Table">
<content>
<Panel expandable="true" headerText="Sap.m.Table with Duplicate Record Merge with Fixed Header and Scroll Container">
<ScrollContainer height="250px" vertical="true">
<Table id="idDuplicateDemo" sticky="ColumnHeaders" items="{/Products}" alternateRowColors="True" backgroundDesign="Transparent">
<headerToolbar >
<Toolbar>
<Button icon="sap-icon://add" text="Row" press="addRow"/>
<Button icon="sap-icon://display" text="Row" press="fetchRecords"/>
</Toolbar>
</headerToolbar>
<columns>
<Column width="50px"/>
<Column mergeDuplicates="true">
<Text text="Product"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Dimensions"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Rate"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Currency"/>
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Country" id="idCountry4"/>
</Column>
</columns>
<items>
<ColumnListItem >
<cells>
<Button icon="sap-icon://delete" press="deleteRow" type="Reject"/>
<Text text="{Name}"/>
<Text text="{size}"/>
<Text text="{rate}"/>
<Input value="{currency}" width="30%"/>
<Input value="{Country}" width="30%"/>
</cells>
</ColumnListItem>
</items>
</Table>
</ScrollContainer>
</Panel>
</content>
<footer>
<OverflowToolbar>
<ToolbarSpacer/>
<Button type="Accept" text="Accept"/>
<Button type="Reject" text="Reject"/>
</OverflowToolbar>
</footer>
</Page>
</pages>
</App>
</Shell>
</mvc:View>
==========================================================
Controller File :
sap.ui.define([
"sap/ui/core/mvc/Controller",
"sap/ui/model/Filter",
"sap/ui/model/FilterOperator",
"sap/m/MessageBox",
'sap/ui/core/util/Export',
'sap/ui/core/util/ExportTypeCSV',
'sap/ui/model/json/JSONModel',
'sap/ui/export/Spreadsheet'
], function (Controller, Filter, FilterOperator, MessageBox, Export,
ExportTypeCSV,
JSONModel,
Spreadsheet) {
"use strict";
return Controller.extend("ZDEMO_MTABLE.controller.View1", {
onInit: function () {
this._data = {
Products: [
{
Name: 'red',
size: '1X2X5',
rate: '2e1',
currency: "Dollar",
Country: "USA"
},
{
Name: 'Indian',
size: '1X2X5',
rate: '120',
currency: "Dollar",
Country: "USA"
},
{
Name: 'MII17',
size: '1X2X5',
rate: '120',
currency: "Dollar",
Country: "USA"
},
{
Name: 'Green',
size: '1X2X5',
rate: '120',
currency: "Dollar",
Country: "UK"
},
{
Name: 'Yellow',
size: '1X2X5',
rate: '120',
currency: "Dollar",
Country: "USA"
},
{
Name: 'red',
size: '1X2X5',
rate: '120',
currency: "Dollar",
Country: "USA"
}, {
Name: 'red',
size: '1X2X5',
rate: '120',
currency: "Euro",
Country: "DE"
}, {
Name: 'red',
size: '1X2X26',
rate: '140',
currency: "Rupee",
Country: "IN"
},
{
Name: 'Pen',
size: 'red',
rate: '500',
currency: "Euro",
Country: "France"
}
]
};
this.jModel = new sap.ui.model.json.JSONModel();
this.jModel.setData(this._data);
sap.ui.getCore().setModel(this.jModel);
}
onBeforeRendering: function () {
this.byId("idDuplicateDemo").setModel(this.jModel);
}
