Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<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>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
jasper07pro
0viewers