Skip to Content
0

UI5 Grid Table Add new row

Dec 07, 2017 at 05:42 PM

200

avatar image
Former Member

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.

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

6 Answers

Iftah Peretz
Dec 09, 2017 at 07:19 AM
1

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.


Show 6 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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();

0
Former Member

Above mentoned is my Odata structure

odatastructure.jpg (45.6 kB)
0

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]

0
Former Member

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.

0
Former Member

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

0

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.

0
Simon Perstorfer Dec 08, 2017 at 11:15 AM
0

Hi Adnan,

whats exactly your question?

Regards
Simon

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Dec 09, 2017 at 05:15 AM
0

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.

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Dec 09, 2017 at 05:31 AM
0

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

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

Share
10 |10000 characters needed characters left characters exceeded
avatar image
Former Member Dec 16, 2017 at 04:37 AM
0

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.

Share
10 |10000 characters needed characters left characters exceeded
Arjun Biswas Dec 16, 2017 at 04:51 AM
0

Hi,

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

Regards,

Arjun Biswas

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

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 .

0

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.

0