cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Adding Blank rows to the table in add new row button

former_member225463
Participant

on ‎12-29-2015 11:20 AM

0 Kudos

Dear Experts,

I am trying to achieve the add new blank row by pressing a ann new row button.

I have done it with the help of add item method of the table.

I need  suggestion on this , can we call the table and colummn list template in my controller and do the additem and passing the template

reference to it?I have tried this but iits not working for me.

as for example :

oTable.addItem("Columnlist template") - this is not working

where as oTable .addItem(new sap.m.input etc etc) - this code works perfectly.

Since i already have a template in my view so i want to reuse it by calling in controller but however am not able to achieve this.

Kindly suggest.

regards,

Vikash

Show replies
Show replies
Answer

Accepted Solutions (0)

Answers (1)

Answers (1)

vijay_kumar49
Active Contributor
‎12-29-2015 12:44 PM
0 Kudos

Please refer below example code.it should be useful. refer this JS Bin - Collaborative JavaScript Debugging

and Add Row in a SAPUI5 Table using xmlModel | SCN


  1. <!DOCTYPE HTML>   
  2. <html>   
  3. <head>   
  4. <title>Add Rows in Table without Data </title>   
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">   
  6.     <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />   
  7.     <script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.table" data-sap-ui-theme="sap_bluecrystal">   
  8.     </script>   
  9.     <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->   
  10.     <script>   
  11.          
  12.             // Model Data (local)   
  13.             var aData = [{ID: "1", lname: "Vijay",   fname: "Kalluri"}, 
  14.                          {ID: "2", lname: "Shyamu", fname: "K"}];   
  15.             // Define a table     
  16.            var oTable = new sap.ui.table.Table({   
  17.                   title: "Line Items",   
  18.                   visibleRowCount: 7,   
  19.                 firstVisibleRow: 3,   
  20.                selectionMode: sap.ui.table.SelectionMode.Single,   
  21.                toolbar: new sap.ui.commons.Toolbar({items: [    
  22.                             new sap.ui.commons.Button({   
  23.                                 text: "Addnew",    
  24.                                 style: sap.ui.commons.ButtonStyle.Accept,   
  25.                                 press: function() {  
  26.                                 var modelData = oModel.getData(); 
  27.                                 var rowCount   = modelData.modelData.length;   
  28.                                 rowCount = rowCount + 1; 
  29.                                  aData.push({ID: rowCount, lname: " "}); // Push data to Model 
  30.                                    oModel.setData({modelData: aData}); // Set Model 
  31.                                 }})   
  32.                                 ]}),   
  33.                            });   
  34.            oTable.addColumn(new sap.ui.table.Column({   
  35.                label: new sap.ui.commons.Label({   
  36.                    text: "ID"   
  37.                }),   
  38.                template: new sap.ui.commons.TextField({   
  39.                    value: '{ID}',   
  40.                  
  41.                }),   
  42.                sortProperty: "ID",   
  43.                filterProperty: "ID",   
  44.                width: "125px"   
  45.            }));    
  46.            oTable.addColumn(new sap.ui.table.Column({   
  47.                label: new sap.ui.commons.Label({   
  48.                    text: "Last Name"   
  49.                }),   
  50.                template: new sap.ui.commons.TextField({   
  51.                    value: '{lname}',   
  52.                    
  53.                }),   
  54.                sortProperty: "lname",   
  55.                filterProperty: "lname",   
  56.                width: "125px"   
  57.            }));   
  58.            oTable.addColumn(new sap.ui.table.Column({   
  59.                label: new sap.ui.commons.Label({   
  60.                    text: "First Name"   
  61.                }),   
  62.                template: new sap.ui.commons.TextField({   
  63.                    value: '{fname}',   
  64.                   
  65.                }),   
  66.                sortProperty: "fname",   
  67.                filterProperty: "fname",   
  68.                width: "125px"   
  69.            }));   
  70.             //Create a model and bind the table rows to this model   
  71.             var oModel = new sap.ui.model.json.JSONModel(); // created a JSON model         
  72.             oModel.setData({ // Set the data to the model using the JSON object defined already   
  73.                 modelData: aData   
  74.             });   
  75.             oTable.setModel(oModel);   
  76.             oTable.bindRows("/modelData"); // binding all the rows into the model   
  77.                      
  78.             //Place the Table on the UI   
  79.             oTable.placeAt("MemTable");   
  80.            
  81.     </script>   
  82. </head>   
  83. <body class="sapUiBody">   
  84.     <div id="MemTable"></div>   
  85. </body>   
  86. </html>


Kindly let me know if you need any more information

Show replies
Show replies
former_member225463
Participant
‎01-05-2016 12:50 PM
0 Kudos

Hi Vijay,

Suppose i dont need the model here to come.

I want to use the additem functionality of the table.

Can there is a way to call the template from the view and add it using the additem method?

Regards,

Vikash

vijay_kumar49
Active Contributor
‎01-05-2016 1:27 PM
0 Kudos

simply remove aData  and where we bind the aData  parameters also remove  

former_member225463
Participant
‎01-06-2016 10:02 AM
0 Kudos

Hi Vijay,

As you mentioned the step

var modelData = oModel.getData();


this is giving the table data which is currently binded.


For me if i use this i am getting null.I dont know why? but my table is having 3 records , so it should give me values right?


Can you pease comment here.I am using the XML view.


Regards,

Vikash

Ask a Question