UI5 Grid Table Add new row

[adnanmaqbool]

Dear All

I am using a Grid Table, my requirement is to add new rows in this table using a Add button.

Grid Table is for maintaining Sale Order Line Items, user can add 1 - 10 line items in Grid Table based on business requirement.

[iftah_peretz]

Hey,

I took the basic grid table sample and made these changes to the view (note the addition of the button at the table footer)

<mvc:View controllerName="sap.ui.table.sample.Basic.Controller" xmlns="sap.ui.table" xmlns:mvc="sap.ui.core.mvc" xmlns:u="sap.ui.unified"
	xmlns:c="sap.ui.core" xmlns:m="sap.m" height="100%">
	<m:Page showHeader="false" enableScrolling="false" class="sapUiContentPadding">
		<m:content>
			<Table rows="{/ProductCollection}" title="Products" selectionMode="MultiToggle" visibleRowCount="7">
				<columns>
					<Column width="11rem">
						<m:Label text="Product Name"/>
						<template>
							<m:Text text="{Name}" wrapping="false"/>
						</template>
					</Column>
					<Column width="11rem">
						<m:Label text="Product Id"/>
						<template>
							<m:Input value="{ProductId}"/>
						</template>
					</Column>
					<Column width="6rem" hAlign="End">
						<m:Label text="Quantity"/>
						<template>
							<m:Label text="{Quantity}"/>
						</template>
					</Column>
					<Column width="9rem">
						<m:Label text="Status"/>
						<template>
							<m:ObjectStatus text="{Status}" state="{ path: 'Available', formatter: '.formatAvailableToObjectState' }"/>
						</template>
					</Column>
					<Column width="9rem">
						<m:Label text="Price"/>
						<template>
							<u:Currency value="{Price}" currency="{CurrencyCode}"/>
						</template>
					</Column>
					<Column width="12rem">
						<m:Label text="Supplier"/>
						<template>
							<m:ComboBox value="{SupplierName}" items="{/Suppliers}">
								<c:Item text="{Name}"/>
							</m:ComboBox>
						</template>
					</Column>
					<Column width="9rem">
						<m:Label text="Image"/>
						<template>
							<m:Link text="Show Image" href="{ProductPicUrl}" target="_blank"/>
						</template>
					</Column>
					<Column width="9rem">
						<m:Label text="Details"/>
						<template>
							<m:Button text="Show Details" press="handleDetailsPress"/>
						</template>
					</Column>
					<Column width="7rem">
						<m:Label text="Heavy Weight"/>
						<template>
							<m:CheckBox selected="{ path: 'Heavy', type: 'sap.ui.model.type.String' }"/>
						</template>
					</Column>
					<Column width="12rem">
						<m:Label text="Category"/>
						<template>
							<m:Select selectedKey="{Category}" items="{/Categories}">
								<c:Item text="{Name}" key="{Name}"/>
							</m:Select>
						</template>
					</Column>
					<Column width="6rem" hAlign="Center">
						<m:Label text="Status"/>
						<template>
							<c:Icon src="{ path: 'Available', formatter: '.formatAvailableToIcon' }"/>
						</template>
					</Column>
					<Column width="11rem" hAlign="Center">
						<m:Label text="Delivery Date"/>
						<template>
							<m:DatePicker value="{ path: 'DeliveryDate', type: 'sap.ui.model.type.Date', formatOptions: {source: {pattern: 'timestamp'}} }"/>
						</template>
					</Column>
				</columns>
				<footer>
					<m:Toolbar>
						<m:ToolbarSpacer/>
						<m:Button icon="sap-icon://add" tooltip="Add a Row" press="onPressAddRow"/>
					</m:Toolbar>
				</footer>
			</Table>
		</m:content>
	</m:Page>
</mvc:View>

And in the controller, I added the onPressAddRow function (you can fit the line variable to your own needs)

		onPressAddRow: function() {
			var oModel = this.getView().getModel(),
			    line = oModel.oData.ProductCollection[1]; //Just add to the end of the table a line like the second line
			oModel.oData.ProductCollection.push(line);
			oModel.refresh();
		},

The result is the button at the footer, after pressing it you can scroll down and see the added line

add-row-to-grid-table.png

If you want to keep the changes for later sessions, you'll need to pass them back to the backend.

[adnanmaqbool]

Thanks a lot. It looks like it will resolve the issue.

Its giving me following error . I am using /InterimOrderSet as EntitySet of OData

Uncaught TypeError: Cannot read property '1' of undefined

My Code

var oModel = this.getView().getModel(),
  line = oModel.oData.InterimOrderSet[1]; //Just add to the end of the table a line like the second line
 oModel.oData.InterimOrderSet.push(line);
 oModel.refresh();

[adnanmaqbool]

Above mentoned is my Odata structure

[iftah_peretz]

You need to have the data there. It looks like there is no item in oModel.oData.InterimOrderSet[1]. Try using

oModel.oData.InterimOrderSet[0]

[adnanmaqbool]

Hi Simon

Data is there as you can see in screen shot. Secondly I am using oData entityset is not completely like an Array hence push can not be used.

Can you refer some other example which is using OData to fill the table.

[adnanmaqbool]

Please also confirm in your case {/ProductCollection} is Json or OData

[iftah_peretz]

Hey,

First, I'm not Simon.

Second, the code's point is just to show you how to add a line. Use whatever method needed to add data, the same way it is organized in it.

Third, If you want coding help, I need you to recreate this example on some public sandbox / the entire code fitted to some public OData like Northwind, so I can handle it.

[former_member484715]

Hi,

You can add a row using the addRow method in sap.ui.table.Table .

Regards,

Arjun Biswas

[adnanmaqbool]

Thanks Arjun.

My problem is that my Table is already bind with Odata and having 5 records in it.

Now I want to append 6th record so I have to append 6th record in Odata so that data can be pushed finally back to SAP Table.

addRow method is good to push array in table but how to append same in Odata .

[former_member484715]

Hi Adnan Maqbool,

In that case, you have to perform create operation on your OData model. If you create a new row in your OData, then it will have 6 rows and the same will display in your table. Could you go through this link for more information.

Regards,

Arjun Biswas.

[adnanmaqbool]

Guys

Issue still exist , I think only solution is to move Odat Model of Table to Json and update records within Json Model, once all is done move Json Model back to Odata and call create entity.

Any idea , how to move Odata to Json and Json back to Odata.

[adnanmaqbool]

Basically you can refer to following thread, I am facing similar situation.

https://archive.sap.com/discussions/thread/3825529

[adnanmaqbool]

Basically want to insert new Sale Order Line Items in a Smart or Grid Table by pressing Add/New button.

All available examples are showing how to retrieve data using oData and display in table but how to enter a new item.

[former_member194549]

Hi Adnan,

whats exactly your question?

Regards
Simon