-
-
Save draschke/db9180a7490fc7c10f17 to your computer and use it in GitHub Desktop.
OData Date Table Multiple Sorters // source http://jsbin.com/howip/1
This file contains hidden or 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
| <html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>OData Date Table Multiple Sorters</title> | |
| <link rel="stylesheet" type="text/css" href=""> | |
| <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection"> | |
| </script> | |
| <script> | |
| var sURI = 'http://demos.kendoui.com/service/Northwind.svc/'; | |
| var oDataModel = new sap.ui.model.odata.ODataModel(sURI, true); | |
| sap.ui.getCore().setModel(oDataModel, 'data'); | |
| var sEntity = '/Categories'; | |
| var properties = oDataModel.oMetadata._getEntityTypeByPath(sEntity).property; | |
| var oMetaModel = new sap.ui.model.json.JSONModel(); | |
| oMetaModel.setData({ | |
| columns: properties, | |
| }); | |
| sap.ui.getCore().setModel(oMetaModel, 'meta'); | |
| var oTable = new sap.ui.table.Table({ | |
| title: "OData Model dynamic column and data binding", | |
| showNoData: true, | |
| columnHeaderHeight: 10, | |
| visibleRowCount: 7 | |
| }); | |
| oTable.bindColumns('meta>/columns', function(sId, oContext) { | |
| var sColumnId = oContext.getObject().name; | |
| return new sap.ui.table.Column({ | |
| id: sColumnId, | |
| label: sColumnId, | |
| template: new sap.ui.commons.TextView({"text" : {path: "data>" + sColumnId}}), | |
| sortProperty: sColumnId, | |
| filterProperty: sColumnId | |
| }); | |
| }); | |
| oTable.bindRows('data>'+ sEntity); | |
| oTable.placeAt("content"); | |
| </script> | |
| </head> | |
| <body class="sapUiBody" role="application"> | |
| <div id="content"></div> | |
| <script id="jsbin-source-html" type="text/html"><html> | |
| <head> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge" /> | |
| <title>OData Date Table Multiple Sorters</title> | |
| <link rel="stylesheet" type="text/css" href=""> | |
| <script id="sap-ui-bootstrap" src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" type="text/javascript" data-sap-ui-libs="sap.ui.core,sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_goldreflection"> | |
| <\/script> | |
| <script> | |
| var sURI = 'http://demos.kendoui.com/service/Northwind.svc/'; | |
| var oDataModel = new sap.ui.model.odata.ODataModel(sURI, true); | |
| sap.ui.getCore().setModel(oDataModel, 'data'); | |
| var sEntity = '/Categories'; | |
| var properties = oDataModel.oMetadata._getEntityTypeByPath(sEntity).property; | |
| var oMetaModel = new sap.ui.model.json.JSONModel(); | |
| oMetaModel.setData({ | |
| columns: properties, | |
| }); | |
| sap.ui.getCore().setModel(oMetaModel, 'meta'); | |
| var oTable = new sap.ui.table.Table({ | |
| title: "OData Model dynamic column and data binding", | |
| showNoData: true, | |
| columnHeaderHeight: 10, | |
| visibleRowCount: 7 | |
| }); | |
| oTable.bindColumns('meta>/columns', function(sId, oContext) { | |
| var sColumnId = oContext.getObject().name; | |
| return new sap.ui.table.Column({ | |
| id: sColumnId, | |
| label: sColumnId, | |
| template: new sap.ui.commons.TextView({"text" : {path: "data>" + sColumnId}}), | |
| sortProperty: sColumnId, | |
| filterProperty: sColumnId | |
| }); | |
| }); | |
| oTable.bindRows('data>'+ sEntity); | |
| oTable.placeAt("content"); | |
| <\/script> | |
| </head> | |
| <body class="sapUiBody" role="application"> | |
| <div id="content"></div> | |
| </body> | |
| </html> | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment