Skip to content

Instantly share code, notes, and snippets.

@qmacro
Created February 4, 2014 08:34
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save qmacro/8800041 to your computer and use it in GitHub Desktop.
Save qmacro/8800041 to your computer and use it in GitHub Desktop.
Checkbox and Column Visibility binding
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Checkbox and Column Binding</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="/sapui5/latest/resources/sap-ui-core.js"
data-sap-ui-theme="sap_goldreflection"
data-sap-ui-libs="sap.ui.commons, sap.ui.table"
data-sap-ui-xx-bindingSyntax="simple"
>
</script>
<script>
sap.ui.jsview("local.view", {
getControllerName: function() {
return "local.controller";
},
createContent: function(oController) {
return new sap.ui.table.Table("myTable", {
toolbar: new sap.ui.commons.Toolbar({items: [
new sap.ui.commons.Button({
text: "Press Me",
press: [oController.handlePress, oController]
})
]}),
rows: "{/names}",
columns: [
new sap.ui.table.Column({
visible: "{/visibleColumns/firstName}",
label: new sap.ui.commons.Label({ text: "First Name" }),
template: new sap.ui.commons.TextView({ text: "{firstName}" })
}),
new sap.ui.table.Column({
visible: "{/visibleColumns/lastName}",
label: new sap.ui.commons.Label({ text: "Last Name" }),
template: new sap.ui.commons.TextView({ text: "{lastName}" })
}),
]
});
}
});
sap.ui.controller("local.controller", {
handlePress: function(oEvent) {
var oMatrix = new sap.ui.commons.layout.MatrixLayout();
oMatrix.createRow(
new sap.ui.commons.CheckBox({
text: "First Name",
checked: "{/visibleColumns/firstName}"
})
);
oMatrix.createRow(
new sap.ui.commons.CheckBox({
text: "Last Name",
checked: "{/visibleColumns/lastName}"
})
);
new sap.ui.commons.Dialog({
content: oMatrix
}).open();
}
});
sap.ui.view({
type: sap.ui.core.mvc.ViewType.JS,
viewName: "local.view"
}).placeAt("uiArea");
sap.ui.getCore().setModel(new sap.ui.model.json.JSONModel({
visibleColumns: {
firstName: true,
lastName: true
},
names: [
{ firstName: "DJ", lastName: "Adams" },
{ firstName: "Joseph", lastName: "Adams" }
]
}));
</script>
</head>
<body class="sapUiBody" role="application">
<div id="uiArea"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment