cancel
Showing results for 
Search instead for 
Did you mean: 

Sorting more than one date column using column sort properties?

Former Member
0 Kudos

Hi guys,

I am trying to implement a date sorting function for a table with multiple date columns. It works for one column, but not for a second one. I am using a sorting function, which is connected to a table, it's called "sortDateColumns". Is there any possibility to write or overwrite column sorting functions, like "sortProperty="ExpiryDate""? It can't be that difficult to implement date sorting, am I right? I copied an pasted most of the code from SAP examples. I am looking forward to your answers.

Kind regards,

Florian Giersdorf

// XML View:
xmlns:t="sap.ui.table"
<t:Table id="table"
sort="sortDateColumns"
   <t:columns>
           <t:Column
                id="dateOfBirth"
                width="7rem"
                sortProperty="DateofBirth">
                <Label text="Date of Birth" />
                <t:template>
                    <Text text="{path: 'DateofBirth',
                    type: 'sap.ui.model.type.Date',
                    formatOptions: {source: {pattern: 'dd/MM/yyyy'}, style 'medium'}}"/>
                </t:template>
            </t:Column>

            <t:Column
                id="expiryDate"
                width="7rem"
                sortProperty="ExpiryDate">
                <Label text="Expiry Date" />
                <t:template>
                    <Text text="{path: 'ExpiryDate',
                    type: 'sap.ui.model.type.Date',
                    formatOptions: {source: {pattern: 'dd/MM/yyyy'}, style: 'medium'}}"/>
                </t:template>
            </t:Column>

   </t:columns>
</t:Table>

// JavaScript Controller
// sort expiry date column
        sortDateColumns : function(oEvent) {
            var oCurrentColumn = oEvent.getParameter("column");
            var oDateofBirthColumn = this.getView().byId("dateOfBirth");
            var oExpiryDateColumn = this.getView().byId("expiryDate");
            if (oCurrentColumn !== oExpiryDateColumn) {
                oExpiryDateColumn.setSorted(false); //No multi-column sorting
                return;
            } 
            
            else if (oCurrentColumn !== oDateofBirthColumn) {
                oDateofBirthColumn.setSorted(false);
            }

            oEvent.preventDefault();

            var sOrder = oEvent.getParameter("sortOrder");
            var oDateFormat = DateFormat.getDateInstance({pattern: "dd/MM/yyyy"});

            this._resetSortingState();
            var oSorter;

            if (oCurrentColumn === oExpiryDateColumn) {
                oExpiryDateColumn.setSorted(true);
                oExpiryDateColumn.setSortOrder(sOrder);

                oSorter = new Sorter(oExpiryDateColumn.getSortProperty(), sOrder === sap.ui.table.SortOrder.Descending);
            }

            else if (oCurrentColumn === oDateofBirthColumn) {
                oDateofBirthColumn.setSorted(true);
                oDateofBirthColumn.setSortOrder(sOrder);

                oSorter = new Sorter(oDateofBirthColumn.getSortProperty(), sOrder === sap.ui.table.SortOrder.Descending);
            }
            
            //The date data in the JSON model is string based. For a proper sorting the compare function needs to be customized.
            oSorter.fnCompare = function(a, b) {
                if (b == null) {
                    return -1;
                }
                if (a == null) {
                    return 1;
                }

                var aa = oDateFormat.parse(a).getTime();
                var bb = oDateFormat.parse(b).getTime();

                if (aa < bb) {
                    return -1;
                }
                if (aa > bb) {
                    return 1;
                }
                return 0;
            };

            this.getView().byId("table").getBinding("rows").sort(oSorter);
        }



Accepted Solutions (0)

Answers (0)