Skip to Content

SAPUI5 Checkbox in list not updating properly on auto refresh

I have a list with checkboxes that is sorted by ticked on top, not ticked at bottom.

I've got the sorter in place and it refreshes on tick, but whichever checkbox I have selected it stays in place, but the label actually moves.

Before selecting 'Front Shop'

After selecting 'Front Shop

The list is refreshed automatically and the Front Shop item moves to the top (as the sorter is in place) but where I selected the checkbox in position 3, the tick stays there after the refresh.

View

<List id="listCategories" noDataText="{i18n>noCategories}" items="{path:'/CategorySet',parameters:{select:'CategoryDesc,CategoryId,Active'},sorter:[{path:'Active',descending:true},{path:'CategoryDesc',descending:false}]}" headerText="{i18n>active}" class="sapUiMediumMarginTop rightAlign">
                        <items>
                            <InputListItem label="{CategoryDesc}">
                                <!-- If there is an X in the Active field, set the state of the CheckBox to TRUE -->
                                <CheckBox selected="{= ${Active} ==='X' ? true : false }" select="onSwitch"/>
                            </InputListItem>
                        </items>
                    </List>


Controller

// Set CheckBox status, X for true, blank for false
    onSwitch: function(oEvent) {
        var oEntry = {};
        var bindingContext = oEvent.getSource().getBindingContext();
        var path = bindingContext.getPath();
        var object = bindingContext.getModel().getProperty(path);
        oEntry.CategoryId = object.CategoryId;
        oEntry.CategoryDesc = object.CategoryDesc;
        if (oEvent.getParameter("selected") === true) {
            oEntry.Active = "X";
        } else {
            oEntry.Active = "";
        }
        var oModel = this.getView().getModel();
        oModel.create("/CategorySet", oEntry, {
            success: function() {
                if (oEntry.Active === "X") {
                    MessageToast.show("Category set as Active", { duration: 2000 });
                }
                if (oEntry.Active === "") {
                    MessageToast.show("Category set as Inactive", { duration: 2000 });
                }
            },
            error: function(oError) {}
        });


    },


1.jpg (21.6 kB)
2.jpg (21.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

2 Answers

  • Oct 29, 2017 at 08:09 AM

    Hi,

    Please tell me if you got the solution.

    Add comment
    10|10000 characters needed characters exceeded

  • Oct 28, 2017 at 03:46 AM

    You have to use the modelObject.refresh(true) method, to update the list dynamically.

    Add comment
    10|10000 characters needed characters exceeded

    • Just go through the above method in the documentation. It will help you to understand better on that.

      To remove the selected tick, you have to write seperate logic for that, you can use the getSelected function of the checkbox, to check if the check box is selected or not, and as per your model data, you can modify the selected property of your checkbox.

      Hope this helps,

      Regards.

      1.png (30.2 kB)