Search code examples
sapui5

How create sorters and Filters of Row Repeater in XML view of SAPUI5?


I am trying to create Sorters and Filters of Row Repeater Element in Xml View of SAPUI5.

I tried to create by using the JavaScript View but no Luck.

How can I write Sorters and Filters of Row Repeater in XML View?

<c:RowRepeater rows="{path: bindingpath}" id="rowRepeater" title="Companies Filter">

           <c:filters>
             <c:RowRepeaterFilter id="filter1" text="Filter Text Goes Here" filter="{path: bindingpath, operator: "EQ", value: 'my value'}">

                </c:RowRepeaterFilter>

           <c:filters>
            <c:sorters>
                <c:RowRepeaterSorter id="sorter2" text="Sorter 1" sorter="{path: bindingpath, descending: true}">

                </c:RowRepeaterSorter>
                <c:RowRepeaterSorter id="sorter1" text="Sorter 2"  sorter="{path: bindingpath, descending: true}">

                </c:RowRepeaterSorter>

            </c:sorters>
            <core:Title text="Companies Filter"></core:Title>
            <c:rows>
                <Panel>
                    <content>

                        <!-- Display Binding Elements -->

                    </content>
                </Panel>
            </c:rows>
        </c:RowRepeater>

Solution

  • As far as I know, you cannot "completely" write the sorter in XML (which is a shame, I fully agree!)

    I believe the reason for that is the signature of the c:RowRepeaterSorter's sorter propery; it expects an object of type sap.ui.model.Sorter and it doesn't get properly recognized from specifying an object like {path : 'field', descending : true}

    A solution would be the following:

    1. Write your RowRepeaterSorter as you normally would do, without the sorter property:

      <c:sorters>
          <c:RowRepeaterSorter id="sorter2" text="Sorter 1" />
          <c:RowRepeaterSorter id="sorter1" text="Sorter 2" />
      </c:sorters>
      
    2. In your controller's onAfterRendering event handler, set the actual sorters:

      var oSorter1 = this.getView().byId("sorter1");
      oSorter1.setSorter(new sap.ui.model.Sorter({path : "field1", descending : "true"}));