$(function () { pageContext.i18n.modTalk = 'moderation talk'; pageContext.i18n.replyToComment = 'Reply'; pageContext.i18n.modTalkEmpty = 'moderation talk is empty'; pageContext.url.getModTalk = "/comments/%25ID%25/listModTalk.json"; pageContext.url.possibleCommentRecipients = "/comments/%ID%/possibleRecipients.json"; pageContext.url.commentEdit = '/comments/%25ID%25/edit.html'; pageContext.url.commentView = '/comments/%ID%/view.html'; pageContext.i18n.commentVisibility = { 'full': 'Viewable by all users', 'op': 'Viewable by the original poster', 'mod': 'Viewable by moderators', 'opAndMod': 'Viewable by moderators and the original poster', 'other': 'Advanced visibility', 'dialogTitle': 'Comment visibility', 'selectGroups': 'Visible to groups', 'selectOther': 'Other recipients', 'selectOriginalPoster': 'Original poster', 'selectModerators': 'Moderators', 'selectAssignees': 'Asked to answer users' }; pageContext.i18n.commentMenuLabels = { 'comment-edit': 'comments.menu.edit', 'comment-delete': 'comments.menu.delete', 'comment-convert': 'comments.menu.convert' };pageContext.i18n.answer= { bestAnswer: 'Best Answer', controlBar : { accept: 'Accept', unaccept: 'Unaccept', acceptCommand: 'Accept this answer as correct', cancelAcceptedCommand: 'Remove this answers accepted status' } }; window.croles = { u: false, op: false, m: false, og: false, as: false, ag: false, dc: false, doc: false, eo: false, ea: false }; tools.init({ q: { e: false, ew: false, eo: false, r: false, ro: false, d: false, dow: false, fv: false, c: false, co: false, p: false, tm: false , ms: false, mos: false }, n: { f: false, vf: false, vfo: false, vr: false, vro: false, c: false, co: false, vu: false, vd: false, w: false, wo: false, l: false }, c: { e: false, eo: false, d: false, dow: false, ta: false, tao: false, l: false }, a: { e: false, ew: false, eo: false, d: false, dow: false, a: false, aoq: false, ao: false, tc: false, tco: false, p: false, tm: false }, pc: croles }, { tc: true, nsc: true }); commandUtils.initializeLabels(); }); Skip to Content
avatar image
Former Member

Remove Items from Table SAPUI5

I've a table

<Table id="idcorrelationData" inset="false" 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>
</Table>

which is binded with the JSON. I've a button Delete i want to remove all selected rows from table on press button. How i can do that

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

4 Answers

  • Best Answer
    Apr 10, 2017 at 06:57 PM

    are you looking like this ?

    https://jsfiddle.net/Akhilesh_U/utxk76vx/

    if you looking for delete all selected rows, then you need to get tables items (oTable.getItems()) and loop for each item and get particular row index with the hep of bindingcontext of the each item and perform deletion.

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member

      My GUI look like this. on delete Icon i want to remove selected Row. Here I just added the property mode= "multiSelect"

      <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>
      </Table>
      
      multiselect.png (17.9 kB)
  • Apr 10, 2017 at 04:01 PM

    var oTable=;


    var selectedIndices=oTable.getSelectedIndices()

    //sort the selectedIndices if necessary

    //write a loop which starts from the biggest index

    //in the loop

    //data array which is bound to your table

    tableData.splice(index,1)

    one small catch is the index of the table row is not always the index of the data element in the array.

    you are just playing, so it should be fine.

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 10, 2017 at 03:47 PM

    add another attribute to your json model ..something like 'isDeleted'

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

    In the event handler of 'delete' button get selected row and set the model property "isDeleted" to "true", and refresh model binding

    By default in table aggregation binding apply filter on attribute "isDeleted"=false, this will remove the deleted entries from table

    Add comment
    10|10000 characters needed characters exceeded

  • Apr 12, 2017 at 08:48 AM
    Add comment
    10|10000 characters needed characters exceeded