Skip to Content
0

SAPUI5 Checkbox in list not updating properly on auto refresh

Oct 27, 2017 at 08:17 AM

115

avatar image

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)
10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

2 Answers

Irfan Gokak Oct 29, 2017 at 08:09 AM
0

Hi,

Please tell me if you got the solution.

Share
10 |10000 characters needed characters left characters exceeded
Arjun Biswas Oct 28, 2017 at 03:46 AM
0

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

Show 2 Share
10 |10000 characters needed characters left characters exceeded

Thanks for your reply.

I've tried numerous ways of refreshing the model but with no success.

I though it would have just been... oModel.refresh(); or oModel.refresh(true);

Can you advise?

The model does auto update and the ticked option does do the successful odata create but it also leaves a selected tick in the checkbox where it was.

0

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)
0