$(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
0

Remove Items from Table SAPUI5

Apr 10, 2017 at 03:24 PM

89

avatar image

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": ""
			}]

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

4 Answers

Best Answer
Akhilesh Upadhyay Apr 10, 2017 at 06:57 PM
0

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.

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

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)
0
Jun Wu Apr 10, 2017 at 04:01 PM
0

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.

Share
10 |10000 characters needed characters left characters exceeded
Srikanth KV Apr 10, 2017 at 03:47 PM
0

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

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

and what if i set mode="Delete" how to fire event on that click.

<Table id="idcorrelationData" 	mode="Delete"  items="{/correlationData}">
<br>

deleted.png (7.9 kB)
0

check the api link

0
Akhilesh Upadhyay Apr 12, 2017 at 08:48 AM
0
Share
10 |10000 characters needed characters left characters exceeded