How to deselect checkbox in SAP UI5 table.
Hello folks,
In one of my app I was using sap.m.Table. This table has checkbox to select a particular row. On a click of a button after some functionality I wanted to deselect all the selected checkbox. I found this as a simple solution to do it, hope it helps you too.
In this blog I have explained on how to deselect on the press of a button but this method can also be used on any other events like on navigating to different views or on completing some backend activities the checkbox is deselected.
The xml code will be like:
<Table id=”idChartTable”
mode=”MultiSelect”
inset=”false”
items=”{
path: ‘oModel>/’
}”
selectionChange=”onTableSelection”>
<headerToolbar>
<Toolbar>
<Button id="idBtn" text="Terminate" press="onTerminate"/>
</Toolbar>
</headerToolbar>
<columns>
<Column minScreenWidth="Tablet" id="idInstanceId">
<Text text="Instance Id"/>
</Column>
<Column minScreenWidth="Tablet">
<Text text="Subject"/>
</Column>
...
</columns>
<items>
<ColumnListItem class="listitemclass">
<cells>
<Text text="{oModel2>id}"/>
</cells>
<cells>
<Text text="{oModel2>subject}"/>
</cells>
...
</ColumnListItem>
</items>
</Table>
The parameter mode=”MultiSelect” adds the checkbox, we don’t need to code anything more for it.
Now suppose onclick of button whose onPress event is onTerminate following things should happen:
i) ajax call : Calls the api from which data is fetched in the table and terminate the instance in the backend.
ii) Show a message as the instance is terminated.
iii) Deselect the terminated rows.
Controller code:
onTerminate: function(oEvent){
var oTable = this.getView().byId("idChartTable");
var oContext = oTable.getSelectedContexts();
var workInstanceId = [];
var i = 0;
var that = this;
oContext.forEach(function(oContextItem){
workInstanceId.push(oContextItem.getObject().id);
});
workInstanceId.forEach(function(workInstanceIdItem){
$.ajax({
url: URL,
method: "PATCH",
dataType: "json",
contentType :"application/json",
data: "{\"status\": \"CANCELED\"}",
headers: {
"X-CSRF-Token": token
},
success: function(){
console.log("Instance Terminated");
}
});
oTable.removeSelections();
sap.m.MessageToast.show("Work Instance Terminated");
i++;
}
Hope this helps you.
Thanks,
Pooja
You can improve this tutorial by adding following some best practice.
First of all, you're using oData/JSON model binding inside your table. You should never update the table rows info manually as you're doing but you should only update the binding itself that will update the table automatically.
Second of all, you should only update/deselect raws that have been modified (terminated) successfully.
In this case, you have 2 scenarios:
Thank You Emanuele Ricci for your feedback. I will try to improvise it.