cancel
Showing results for 
Search instead for 
Did you mean: 

Sorting in Editable smart table

appu24
Explorer
0 Kudos

Hello Experts ,

We have a editable smart table with a button to mass maintain values for a column based on some calculation . the user is trying to sort the column before saving , however the sorting is not considering the values entered by the users. 

the data is refreshed and sorted as per the values in the database . 

what is missing so that it considers the entered values to sort the column in table ?

I was able to produce the same issue in SAPUI5 sample. changed the binding Mode to twoway. modified all the negative values in column "Amount in LC"  sorted the column by Ascending. it still sort considering orginal values  @SAPSupport 

appu24_0-1715934447311.png

 

 

Thanks , 

View Entire Topic
appu24
Explorer
0 Kudos

Hello All ,

for someone who is facing similar issue . i managed to achieve the behavior mentioned below 

In View  : i added a separate button with dialog for sorting 

<!--Button to sort Proposal Quanity 
                                    <Button
                                        id="openBtn"
                                        icon="sap-icon://sort"
                                        press="onCustomSort"
                                    />
                                    <p13n:Popup
                                        id="p13nPopup"
                                        title="Sort fields on local data"
                                        close="onp13nPopupClose"
                                    >
                                        <p13n:panels>
                                            <p13n:SortPanel
                                                id="sortPanel"
                                                title="Sort"
                                            />
                                            
                                        </p13n:panels>
                                    </p13n:Popup>

which renders a dialog similar to below 

appu24_0-1716298598912.png

in Controller 

  onp13nPopupClose(oEvt) {
            if (oEvt.getParameter("reason") == "Ok") {
                this.applyCustomSort();
            },
      applyCustomSort(oEvt) {
            const oView = this.getView();
            const oP13nState = {
                sort: oView.byId("sortPanel").getP13nData()
            };
            var oCustomTable = this.getView().byId("customTable");
            // Get the binding of the table
            var oBinding = oCustomTable.getBinding("items");
            var aData = oBinding.getAllCurrentContexts().map(function (oContext) {
                return oContext.getObject();
            });
            // Define a comparison function based on column values
            var compareFn = function (a, b, fieldName, descending) {
                var valueA = a[fieldName];
                var valueB = b[fieldName];

                // Handle comparison for different data types
                if (isNaN(valueA) === true && isNaN(valueB) === true) {
                    return descending ? valueB.localeCompare(valueA) : valueA.localeCompare(valueB);
                } else if (isNaN(valueA) === false && isNaN(valueB) === false) {
                    return descending ? valueB - valueA : valueA - valueB;
                }
                else {
                    return 0;
                }
            };
            // Prepare the sort objects array
            oP13nState.sort.forEach(function (item) {
                if (item.name == "PROPOSAL_QUANTITY") {
                    // Sort the items array
                    aData.sort(function (a, b) {
                        return compareFn(a, b, item.name, item.descending);
                    });
                }
            });

            //   Update the table rows based on the sorted items
            oCustomTable.removeAllItems();
            // Get the ColumnListItem template
            var oTemplate = oCustomTable.getBindingInfo("items").template;
            //    Add sorted items back to the table
            aData.forEach(function (data) {
                // Clone the template for each item
                var oItem = oTemplate.clone();
                oItem.setBindingContext(new sap.ui.model.Context(oCustomTable.getModel(), oCustomTable.getModel().createKey("/SmartStockReplenishment", data)));
                oCustomTable.addItem(oItem);
            });
        },
RaminS
Participant
0 Kudos

That is an interesting approach, thanks for sharing your code.

What you could also consider is using a JSON model. JSON models are good for anything you want to do on the client side only. Read data from backend into a JSON model, bind the table to your JSON model and let the table do the sorting, filtering, etc.

That saves you from having to code sorting logic. But at Save, you will have to read from JSON and call the oData save.

Just an option. I've used JSON models a lot (eg. Planning Calendar date calculations) and find then flexible for client-side manipulation.

Ramin.