SAP UI5 List Sorting with Header

Hi, gone through the post Custom Sorting and Grouping
for sorting an grouping

Similar way i have designed a List sorter using the formatter , but it will sort automatically and also create a header based on the property(of the xsodata) specified.

1.First we create a list.

var oDummyList= new sap.m.List({

            id : “idDummyList”,

            mode : sap.m.ListMode.SingleSelectMaster,

        });

2.Create a local json model to save the sort property

var sort = new sap.ui.model.json.JSONModel();

        sap.ui.getCore().setModel(sort, “sort”);

3.We create a template .In the template we create a formatter function which will add the header for each sorted group
  Note : – the oData should be sorted (in the oData using ?$orderby=sort_propertyor in the db level)

var oListTemplate=new sap.m.StandardListItem({

            id: “idListTemplate”,

            title: “{NMAE}”,

            description: “{Description}”,

            info:{

                path:”CATEGORY”,//the property based on which it needs to be sorted

                //List Grouping

                formatter: function(fValue) {

                    if (fValue) {

                        if(sap.ui.getCore().getModel(“sort”).getData().sortBy !== fValue){

                            sap.ui.getCore().getModel(“sort”).getData().sortBy = fValue ;

                            this.getParent().insertItem(new sap.m.GroupHeaderListItem({title : fValue}),this.getParent().indexOfItem(this));//Insert a list header

                            this.setType(“Inactive”)

                        }

                        return null;

                    }

                    return fValue;

                }

            }

        });

4.Then Bind the model and set template

               oDummyList.setModel(oModel);

              oDummyList.bindItems(“/CONTEXT?$orderby=CATEGORY”, oListTemplate, null, null);