how to remove tables row in sapui5

Question

I've a table which have property mode="MultiSelect" So i can select multiple items in table. and I've delete button The GUI of Table is as below.

the XML of table is

<Table id="idcorrelationData" mode="MultiSelect" items="{/correlationData}">
<headerToolbar>
    <Toolbar>
        <Title text="Correlation Data" level="H2"/>
        <ToolbarSpacer></ToolbarSpacer>
        <Button icon="sap-icon://add" press="onAddNewRow"/>
        <Button icon="sap-icon://delete" press="onRemoveLasRow"/></Toolbar>
</headerToolbar>
<columns>
    <Column hAlign="Center">
        <Text text="Data Location"/>
    </Column>
    <Column minScreenWidth="Tablet" demandPopin="true" hAlign="Center">
        <Text text="Accepted Value"/>
    </Column>
</columns>
<items>
    <ColumnListItem>
        <cells>
            <Input enabled="{/fieldEditAble}" value="{dataLocation}"/>
            <Input enabled="{/fieldEditAble}" value="{acceptedValue}"/>
        </cells>
    </ColumnListItem>
</items>

Which is binded with JSON, initially the data comes from database.which have two below properties.

    var correlationData = [{
    "dataLocation": "",
    "acceptedValue": ""
}];

On delete button of table i want to delete selected Rows of table. My Query is How I can delete selected Values ?

score 0 · Accepted Answer · answered Apr 11 '17 at 14:48

0

sap.m.Table inherits from sap.m.ListBase so you can try using the removeSelections() function. See here for more information: https://sapui5.hana.ondemand.com/explored.html#/entity/sap.m.ListBase/methods

Also if you delete it from the model, as long as the table is binded to it then it will update automatically. You can therefore delete from the model instead.

answered Apr 11 '17 at 14:48

Developer

341
3
19

first I'll get table by Id and then i'll remove ? – Apr 11 '17 at 15:00
var table = that.getView().byId("idcorrelationData"); table.removeSelections(); It just deselect my selected items – Apr 11 '17 at 15:00
you're right, then use `getSelectedItems()` and use that to delete the items from the model. Then your table will update automatically if it's bound to the model. – Developer Apr 11 '17 at 15:35
yes I got the Selected Items. Now how i can remove these items from model? – Apr 11 '17 at 17:11
Then using the selected items use their index to update your JSON model. I guess you can use the index or key, however your function returns the selected items. To remove an item from JSON, check this http://stackoverflow.com/questions/5310304/remove-json-element, and then you can use `setData()` or `setJson()` to set the new data. – Developer Apr 11 '17 at 17:26

score 0 · Answer 2 · edited Dec 12 '18 at 21:22

If you want to remove them just from the UI user removeItem() in the sap.m.table object.

 var oTable = this.getView().byId("idcorrelationData");
 var aSelectedItems = oTable.getSelectedItems();

 for(var i=0; i<aSelectedItems.length; i++){
    oTable.removeItem(aSelectedItems[i])
 }

If you want to remove them from the model: get the data, splice the selected indexes and set the data again.

var oTable = this.getView().byId("idcorrelationData");
var aSelectedItems = oTable.getSelectedItems();

for(var i=aSelectedItems.length-1; i>=0; i--){ //start with highest index first 
   var oItemContextPath = aSelectedItems[i].getBindingContext().getPath()
   var aPathParts = oItemContextPath.split("/");
   var iIndex = aPathParts[aPathParts.length - 1]; //Index to delete into our array of objects

   var oJSONData = this.getView().getModel().getData();
   oJSONData.correlationData.splice(iIndex, 1); //Use splice to remove your object in the array
   this.getView().getModel().setData(oJSONData); //And set the new data to the model
 }

Remark: The index is being counted back so that path index always correctly correlates to oJSONData index. Otherwise, removing multiple items at once results in removal of wrong items, as the oJSONData index is being reset after splicing.

Here a functional snippet: https://jsbin.com/ziwejetife/edit?html,output

how to remove tables row in sapui5

2 Answers2