Skip to content

Instantly share code, notes, and snippets.

@AbhilashBiradar

AbhilashBiradar/index.html

Last active December 3, 2016 15:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save AbhilashBiradar/e2e2eabedaf76b52c7be072f9b358d43 to your computer and use it in GitHub Desktop.
Save AbhilashBiradar/e2e2eabedaf76b52c7be072f9b358d43 to your computer and use it in GitHub Desktop.
Download ZIP
How to retain selection in sap.ui.table.Table?
Raw
index.html
<!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