ListSorting

<!DOCTYPE HTML>
<html>

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta charset="UTF-8">
  <title>List Sorting</title>
  <script id="sap-ui-bootstrap" type="text/javascript" src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-libs="sap.m" data-sap-ui-xx-bindingSyntax="complex">
  </script>
  <!-- XML-based view definition -->
  <script id="listView" type="sapui5/xmlview">
    <mvc:View controllerName="myView.list" xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" class="viewPadding">
      <App>
        <pages>
          <Page title="Employees Page" class="marginBoxContent">
            <content>
              <VBox id="oVBox">
                <List id="idList" items="{/}">
                  <items>
                    <CustomListItem>
                      <VBox>
                        <Label text="{LastName}" />
                        <Input value="{EmployeeID}" enabled="false" />
                      </VBox>
                    </CustomListItem>
                  </items>
                </List>
                <HBox>
                  <RadioButton id="RB3-1" text="Sort by EmployeeID" select="onIDSort" />
                  <RadioButton id="RB3-2" text="Sort by Name" select="onNameSort" />
                </HBox>
              </VBox>
            </content>
          </Page>
        </pages>
      </App>
    </mvc:View>
  </script>

  <script>
    // Controller definition
    sap.ui.define([
      'jquery.sap.global',
      'sap/ui/core/mvc/Controller',
      'sap/ui/model/json/JSONModel'
    ], function(jQuery, Controller, JSONModel) {
      "use strict";

      var ListController = Controller.extend("myView.list", {

        onInit: function(evt) {
          var empData = [{
            "EmployeeID": 219427,
            "LastName": "Aaron"
          }, {
            "EmployeeID": 324971,
            "LastName": "Benjamin"
          }, {
            "EmployeeID": 462523,
            "LastName": "Bryant"
          }, {
            "EmployeeID": 212344,
            "LastName": "Craig"
          }, {
            "EmployeeID": 767657,
            "LastName": "Crispin"
          }, {
            "EmployeeID": 431232,
            "LastName": "Mark"
          }, {
            "EmployeeID": 656523,
            "LastName": "Boris"
          }];


          var model = new JSONModel();
          model.setData(empData);
          sap.ui.getCore().setModel(model);
        },

        onIDSort: function(oEvent) {
          var oSorter = new sap.ui.model.Sorter("EmployeeID");
          var oList = this.getView().byId("idList");
          var oBinding = oList.getBinding("items");
          oBinding.sort(oSorter);
        },

        onNameSort: function(oEvent) {
          var oSorter = new sap.ui.model.Sorter("LastName");
          var oList = this.getView().byId("idList");
          var oBinding = oList.getBinding("items");
          oBinding.sort(oSorter);
        }

      });
      return ListController;
    });

    // Instantiate the View, assign a model
    // and display
    var oView = sap.ui.xmlview({
      viewContent: jQuery('#listView').html()
    });

    oView.placeAt('content');
  </script>
</head>

<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>

</html>

// Code goes here

/* Styles go here */