Last active
December 3, 2016 15:15
-
-
Save AbhilashBiradar/e2e2eabedaf76b52c7be072f9b358d43 to your computer and use it in GitHub Desktop.
How to retain selection in sap.ui.table.Table?
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html><head> | |
<meta name="description" content="UI5 table example with local JSON model" /> | |
<meta http-equiv='X-UA-Compatible' content='IE=edge' /> | |
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> | |
<title>UI5 Table Retain Selection</title> | |
<!-- Load UI5, select gold reflection theme and the "commons" and "table" control libraries --> | |
<script id='sap-ui-bootstrap' type='text/javascript' | |
src='https://openui5.hana.ondemand.com/resources/sap-ui-core.js' | |
data-sap-ui-theme='sap_bluecrystal' | |
data-sap-ui-libs='sap.m,sap.ui.commons,sap.ui.table'></script> | |
<script> | |
//extend table | |
var T=sap.ui.table.Table.extend("customTable", { | |
metadata: { | |
properties:{ | |
saveSelected:{ | |
type:"boolean", | |
defaultValue: false | |
} | |
}, | |
}, | |
addFilterSelectedContext:function(string){ | |
if(this.FilterSelectedContext.indexOf(string)==-1){ | |
this.FilterSelectedContext.push(string); | |
} | |
}, | |
removeFilterSelectedContext:function(string){ | |
var i=this.FilterSelectedContext.indexOf(string); | |
this.FilterSelectedContext.splice(i, 1); | |
}, | |
removeSelectionInterval : function(i, f) { | |
this._oSelection.removeSelectionInterval(i, f); | |
if(this.getSaveSelected()) | |
this.removeFilterSelectedContext(this.getContextByIndex(i).getPath()); | |
return this; | |
}, | |
addSelectionInterval : function(i, f) { | |
this._oSelection.addSelectionInterval(i, f); | |
if(this.getSaveSelected()) | |
this.addFilterSelectedContext(this.getContextByIndex(i).getPath()); | |
return this; | |
}, | |
renderer: {} | |
}); | |
T.prototype.FilterSelectedContext=[]; | |
var C=sap.ui.table.Column.extend("customColumn" ,{ | |
metadata: { | |
aggregations:{ | |
comparator:{ | |
type:"object", | |
multiple: false, | |
defaultValue: null | |
} | |
}, | |
}, | |
init:function(){ | |
var oColumn=this; | |
var oCustomMenu = new sap.ui.commons.Menu(); | |
oCustomMenu.addItem(new sap.ui.commons.MenuItem( | |
{ | |
text : 'Sort ascending', | |
icon : "sap-icon://sort-ascending", | |
select : function() { | |
var oTable=this.getParent().getParent().getParent(); | |
var retainSelection=oTable.getSaveSelected(); | |
if(retainSelection){ | |
var selectedIndices = oTable.getSelectedIndices(); | |
var contextSelected=[]; | |
for(i=0;i<selectedIndices.length;i++){ | |
contextSelected.push(oTable.getContextByIndex(selectedIndices[i]).getPath()); | |
} | |
} | |
var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), false); | |
oSorter.fnCompare = this.getParent().getParent().getComparator(); | |
oTable.getBinding("rows").sort(oSorter); | |
for (var i = 0; i < oTable.getColumns().length; i++) | |
oTable.getColumns()[i].setSorted(false); | |
oColumn.setSorted(true); | |
oColumn.setSortOrder(sap.ui.table.SortOrder.Ascending); | |
if(retainSelection){ | |
for(i=0;i<contextSelected.length;i++){ | |
var tlength=oTable.getModel().getData().Data.length; | |
for(j=0;j<tlength;j++){ | |
if(oTable.getContextByIndex(j)==contextSelected[i]){ | |
oTable.addSelectionInterval(j,j); | |
} | |
} | |
} | |
} | |
} | |
})); | |
oCustomMenu.addItem(new sap.ui.commons.MenuItem( | |
{ | |
text : 'Sort descending', | |
icon : "sap-icon://sort-descending", | |
select : function(oControlEvent) { | |
var oTable=this.getParent().getParent().getParent(); | |
var retainSelection=oTable.getSaveSelected(); | |
if(retainSelection){ | |
var selectedIndices = oTable.getSelectedIndices(); | |
var contextSelected=[]; | |
for(i=0;i<selectedIndices.length;i++){ | |
contextSelected.push(oTable.getContextByIndex(selectedIndices[i]).getPath()); | |
} | |
} | |
var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), true); | |
oSorter.fnCompare = this.getParent().getParent().getComparator(); | |
oTable.getBinding("rows").sort(oSorter); | |
for (var i = 0; i < oTable.getColumns().length; i++) | |
oTable.getColumns()[i].setSorted(false); | |
oColumn.setSorted(true); | |
oColumn.setSortOrder(sap.ui.table.SortOrder.Descending); | |
if(retainSelection){ | |
for(i=0;i<contextSelected.length;i++){ | |
var tlength=oTable.getModel().getData().Data.length; | |
for(j=0;j<tlength;j++){ | |
if(oTable.getContextByIndex(j)==contextSelected[i]){ | |
oTable.addSelectionInterval(j,j); | |
} | |
} | |
} | |
} | |
} | |
})); | |
oCustomMenu.addItem(new sap.ui.commons.MenuTextFieldItem( | |
{ | |
text : 'Filter', | |
icon : 'sap-icon://filter', | |
select : function(oControlEvent) { | |
var oTable=this.getParent().getParent().getParent(); | |
var filterValue = oControlEvent.getParameters().item.getValue(); | |
var filterProperty = oControlEvent.getSource().getParent().getParent().mProperties.sortProperty; | |
var filters = []; | |
if (filterValue.trim() != '') { | |
var oFilter1 = new sap.ui.model.Filter( | |
filterProperty, | |
sap.ui.model.FilterOperator.Contains, | |
filterValue); | |
filters = [ oFilter1 ]; | |
} | |
for (var i = 0; i < oTable.getColumns().length; i++) | |
oTable.getColumns()[i]; | |
oTable.getBinding("rows").filter(filters,sap.ui.model.FilterType.Application); | |
var retainSelection=oTable.getSaveSelected(); | |
if(retainSelection){ | |
for(i=0;i<oTable.FilterSelectedContext.length;i++){ | |
var tlength=oTable.getModel().getData().Data.length; | |
for(j=0;j<tlength;j++){ | |
if(oTable.getContextByIndex(j)==oTable.FilterSelectedContext[i]){ | |
oTable.addSelectionInterval(j,j); | |
} | |
} | |
} | |
} | |
} | |
})); | |
oColumn.setMenu(oCustomMenu); | |
}, | |
}); | |
// create the DataTable control | |
var oTable = new customTable({width:"50%",editable:true,visibleRowCount:7, saveSelected:true}); | |
// define the Table columns | |
var oControl = new sap.ui.commons.TextView({text:"{lastName}"}); // short binding notation | |
oTable.addColumn(new customColumn({label: new sap.ui.commons.Label({text: "Last Name"}), template: oControl, sortProperty: "lastName", filterProperty: "lastName", width: "100px"})); | |
oControl = new sap.ui.commons.TextField().bindProperty("value", "name"); // more verbose binding notationt | |
oTable.addColumn(new customColumn({label: new sap.ui.commons.Label({text: "First Name"}), template: oControl, sortProperty: "name", filterProperty: "name", width: "80px"})); | |
// create some local data | |
var aData = [ | |
{lastName: "karthik", name: "Shetty"}, | |
{lastName: "Amritpal", name: "kaur"}, | |
{lastName: "Avi", name: "Sharma"}, | |
{lastName: "Navya", name: "Sharma"}, | |
{lastName: "dinesh", name: "karthik"}, | |
{lastName: "mental", name: "vinay"}, | |
{lastName: "jami", name: "varaprasad"}, | |
]; | |
// create a JSONModel, fill in the data and bind the Table to this model | |
var oModel = new sap.ui.model.json.JSONModel(); | |
oModel.setData({Data: aData}); | |
oTable.setModel(oModel); | |
oTable.bindRows("/Data"); | |
var oPage=new sap.m.Page({ | |
title : 'How to retain Selection of sap.ui.table.Table after sort and filter?', | |
content : [] | |
});; | |
// finally place the Table into the UI | |
oPage.placeAt("content"); | |
oTable.placeAt("table"); | |
</script> | |
</head> | |
<body class='sapUiBody'> | |
<div id='content'></div> | |
<div id='table'> </div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment