CODEWITHSUNDEEP
sapui5
user7149647
user7149647

Reputation:

how to remove tables row in sapui5

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. SAPUI5 Table

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 ?

Upvotes: 0

Views: 15869

Answers (2)

Rafael L&#243;pez Mart&#237;nez
Rafael L&#243;pez Mart&#237;nez

Reputation: 2265

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

Upvotes: 0

Developer
Developer

Reputation: 361

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.

Upvotes: 0

Related Questions