title: custom sorting in Sap ui5 table columns
body: <p><br>
       I have try to create a custom sorting options in my openui5 table columns(I know sap have a sort &amp; Filter property but I don't want use that because I have customized the table columns(added text box for filter columns). If I use default sort property, my customize filter will not work ). So I did below approaches.</p>
  
  <ul>
  <li>I have refer this link <a href="http://scn.sap.com/community/developer-center/front-end/blog/2014/01/14/custom-sorter-and-filter-in-sapui5-table" rel="nofollow">http://scn.sap.com/community/developer-center/front-end/blog/2014/01/14/custom-sorter-and-filter-in-sapui5-table</a> and created custom sorting for table columns.</li>
  </ul>
  
  <p>now the problem is, If I select my customize column text box,  sorting dropdown menu is opening. If double click that column text box, I can able to filter the column values. My requirement is like,If user click on a column, It have to sort ascending or descending. I don't want to show the option to sort ascending or descending as a list value while user click on the columns.By default user first time click on the column should sort ascending for the second click descending like toggle.I have added code snippets below for your reference.</p>
  
  <pre><code>createContent: function(oController) {
  
      jQuery.sap.require("sap.ui.core.util.Export");
      jQuery.sap.require("sap.ui.core.util.ExportTypeCSV");
      var oExportlink = new sap.ui.commons.Link({
          text: "Export",
          press: function() {
              //  Export();
              var exp = oTable.exportData({
                  exportType: new sap.ui.core.util.ExportTypeCSV()
              }).saveFile('sample').always(function() {
                  this.destroy();
              });
          }
      }).placeAt("content");
  
      var oTable = new sap.ui.table.Table("trans1", {
  
          visibleRowCount: 11,
          //  firstVisibleRow: 3,
          selectionMode: sap.ui.table.SelectionMode.None,
          navigationMode: sap.ui.table.NavigationMode.Paginator,
          //fixedColumnCount: 2            
      });
  
  
      //Define Columns to table
      oTable.addColumn(new sap.ui.table.Column({
          label: new sap.ui.commons.CheckBox().attachChange(function(oEvent) {
              selectedAllRows('checked');
              deSelectAllRows('unchecked');
  
          }),
          template: new sap.ui.commons.CheckBox({
              checked: '{checked}'
          }).attachChange(
              function(oEvent) {
                  var selectedrowIndx = this.getParent().getIndex();
                  oTable.setSelectedIndex(selectedrowIndx);
              }
          ),
  
          width: "30px"
      }));
  
  
      oTable.addColumn(new sap.ui.table.Column({
          label: new sap.ui.commons.Label({
              text: "View Transaction Details"
          }),
          template: new sap.ui.commons.Link({
              tooltip: "this is test",
              text: "Details",
              press: function() {
                  alert("view details");
              }
          }),
          sortProperty: "details",
          width: "50px"
      }));
      var oColumn = new sap.ui.table.Column("idnum", {
          //  label:new sap.ui.commons.Label({text:"ID"}),
          label: new customcontrol.columnTextfield({
              text: "ID",
              id: "idnumber"
          }),
          template: new sap.ui.commons.TextView().bindProperty("text", "ID"),
          sortProperty: "ID",
          width: "50px"
      });
      oTable.addColumn(oColumn);
      addColumnSorterAndFilter(oColumn);
      var oColumn = new sap.ui.table.Column("product_name", {
          //  label:new sap.ui.commons.Label({text:"Product Name"}),
          label: new customcontrol.columnTextfield({
              text: "Product Name",
              id: "Name"
          }),
          template: new sap.ui.commons.TextView().bindProperty("text", "Name"),
          sortProperty: "Name",
          width: "50px"
      });
      oTable.addColumn(oColumn);
      addColumnSorterAndFilter(oColumn);
  
      var oColumn = new sap.ui.table.Column("prod_description", {
          //  label:new sap.ui.commons.Label({text:"Description"}),
          label: new customcontrol.columnTextfield({
              text: "description",
              id: "Description"
          }),
          template: new sap.ui.commons.TextView().bindProperty("text", "Descri"),
          sortProperty: "Description",
          width: "50px"
      });
      oTable.addColumn(oColumn);
      addColumnSorterAndFilter(oColumn);
      //Create Model for and bind into table
  
      var oTableModel = new sap.ui.model.json.JSONModel();
      jQuery.ajax({
          url: serviceurl,
          dataType: "json",
          success: function(data, textStatus, jqXHR) {
  
              oTableModel.setData({
                  data: data.value
              });
  
          },
          error: function(jqXHR, textStatus, errorThrown) {
  
          }
      });
  
      oTable.setModel(oTableModel);
      oTableModel.getData();
  
      oTable.bindRows("/data");
      oTable.placeAt('content');
  
  
      /*Function for selecting all rows start here*/
      function selectedAllRows(checkKey) {
  
          var model = oTable.getModel();
          var rowpath = oTable.getBindingInfo('rows').path;
          var rows = model.getProperty(rowpath);
          var start = oTable.getFirstVisibleRow();
          var end = Math.min(start + oTable.getVisibleRowCount(), rows.length);
  
          for (var i = 0; i &lt; rows.length; i++) {
              var row = rows[i];
              row[checkKey] = (i &gt;= start &amp;&amp; i &lt; end);
          }
          oTable.invalidate();
  
      }
      /*Function for selecting all rows ending here*/
  
      /*Function for custom sorting with menu starting here*/
      function addColumnSorterAndFilter(oColumn) {
          var oTable = oColumn.getParent();
          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 oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), false);
                  oTable.getBinding("rows").sort(oSorter);
                  for (var i = 0; i &lt; oTable.getColumns().length; i++)
                      oTable.getColumns()[i].setSorted(false);
                  oColumn.setSorted(true);
                  oColumn.setSortOrder(sap.ui.table.SortOrder.Ascending);
              }
          }));
          oCustomMenu.addItem(new sap.ui.commons.MenuItem({
              text: 'sort desc',
              icon: "sap-icon://sort-descending",
              select: function(oControlEvent) {
                  var oSorter = new sap.ui.model.Sorter(oColumn.getSortProperty(), true);
                  oTable.getBinding("rows").sort(oSorter);
                  for (var i = 0; i &lt; oTable.getColumns().length; i++)
                      oTable.getColumns()[i].setSorted(false);
                  oColumn.setSorted(true);
                  oColumn.setSortOrder(sap.ui.table.SortOrder.Descending);
  
              }
  
          }));
          oColumn.setMenu(oCustomMenu);
          return oColumn;
  
      }
      /*Function for custom sorting with menu ending here*/
  </code></pre>
  
  <p><strong>columnTextfield.js</strong></p>
  
  <pre><code>sap.ui.core.Control.extend("customcontrol.columnTextfield", {
  metadata: {
      properties: {
          "text": "string",
          "id": "string"
  
      },
  
      events: {
          "select": {}
      }
  },
  
  init: function() {
  
  },
  renderer: {
      render: function(oRm, oControl) {
          oRm.write('&lt;div style="width:100%";&gt;');
          oRm.write('&lt;span class="custom_Filter_Column"&gt;');
          oRm.writeEscaped(oControl.getText());
          oRm.write('&lt;/span&gt;');
          oRm.write('&lt;br&gt;');
          oRm.write('&lt;input id="' + oControl.getId() + '" type="text" style="width:100%;"&gt;');
          //  oRm.write('&lt;input id="txtFilter" type="text" style="width:100%;"&gt;');
          oRm.write('&lt;/div&gt;');
      }
  }
  </code></pre>
  
  <p>});</p>
  
  <p>Can any one please help me on this?? </p>