Skip to Content
avatar image
Former Member

Adding a table row dynamically in sap ui5


I have a requirement like i want to keep adding rows on click of hyperlink

HyperLink -Add one more Country

for every click of Hyperlink("Add one more Country") i want to add one more drop down to add Country, where user can add any number of countries.

The initial page: alreday in place

Expected output/behavior

if possible please give me plunket kind of

Thanks in advance,

Venkat

india.png (2.5 kB)
output.png (4.4 kB)
output.png (3.9 kB)
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Sep 11, 2017 at 01:17 PM
    var mModel = new sap.ui.model.json.JSONModel({
    			"Items": [{
    				"selectItems": [{
    					"Text": "India"
    				}, {
    					"Text": "Brazil"
    				}, {
    					"Text": "Australia"
    				}, {
    					"Text": "China"
    				}]
    			}]
    });
    this.getView().setModel(mModel, "mModel");
    
    
    ---------------------------------------------------------------------------------------------------------------
    <Table items="{mModel>/Items}">
         <columns>
    	<Column>
    	    <Label text="Country" design="Bold"/>
    	</Column>							
        </columns>
        <ColumnListItem>
    	<cells>
    	     <Select items="{ path: 'mModel>selectItems'}" width="100%">
    	           <core:Item key="{mModel>Text}" text="{mModel>Text}"/>
    	     </Select>
    	</cells>
       </ColumnListItem>
    </Table>
    <Link text="Add one more Country" press="addMore"/>
    -----------------------------------------------------------------------------------------------------------------
    
    addMore: function(oEvent) {
       var oModel = this.getView().getModel("mModel");
       var aItems = oModel.getProperty("/Items");
       var obj = {
          "selectItems": [{
    			"Text": "India"
    		       }, {
    			"Text": "Brazil"
    		       }, {
    			"Text": "Australia"
    		       }, {
    		        "Text": "China"
    		     }]
    	};
    	aItems.push(obj);
    	oModel.setProperty("/Items",aItems);
    	oModel.refresh();
    }
    
    
    
    Add comment
    10|10000 characters needed characters exceeded