Skip to Content

UI5 Grid Table Add new row

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.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

6 Answers

  • Dec 09, 2017 at 07:19 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

    • 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.

  • Dec 08, 2017 at 11:15 AM

    Hi Adnan,

    whats exactly your question?

    Regards
    Simon

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 09, 2017 at 05:15 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 09, 2017 at 05:31 AM

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

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

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 16, 2017 at 04:37 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • Dec 16, 2017 at 04:51 AM

    Hi,

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

    Regards,

    Arjun Biswas

    Add comment
    10|10000 characters needed characters exceeded