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: 

Add/Insert row to SAPUI5 Table Dynamically

Go to solution
tharaka_fernando
Contributor

on ‎09-26-2014 1:48 PM

0 Kudos

Dear All Gurus,

I need to create a UI5 table (Empty) to add records manually. Below is my coding..

Requirement : When user click on AddNew button on the table , a new row will be added.a new row will be added with LineItem Column id incremental.




var oTable = new sap.ui.table.Table({


title: "Line Items",


visibleRowCount: 7,


firstVisibleRow: 3,


  selectionMode: sap.ui.table.SelectionMode.Single,


  toolbar: new sap.ui.commons.Toolbar({items: [ 


  new sap.ui.commons.Button({


  text: "Addnew", 


  style: sap.ui.commons.ButtonStyle.Accept,


  press: function() {addnew(); }})


  ]}),


});




oTable.addColumn(new sap.ui.table.Column({


  label: new sap.ui.commons.Label({text: "LineItem"}),


  sortProperty: "LineItem",


  filterProperty: "LineItem",


  width: "200px"


  }));




  oTable.addColumn(new sap.ui.table.Column({


  label: new sap.ui.commons.Label({text: "AccAss"}),


  sortProperty: "AccAss",


  filterProperty: "AccAss",


  width: "200px"


  }));




  oTable.addColumn(new sap.ui.table.Column({


  label: new sap.ui.commons.Label({text: "material"}),


  sortProperty: "material",


  filterProperty: "material",


  width: "200px"


  }));

function addnew(){

  • How to add an Empty row to enter values?
  • How to auto increment the line id?


} a

Show replies
Show replies
Answer

Accepted Solutions (1)

Accepted Solutions (1)

former_member184578
Active Contributor
‎09-26-2014 1:56 PM
0 Kudos

Hi,

you haven't binded your table to any model! Bind your table to model and on Addnew add a new row to the model and then render the table.

Regards,

Kiran

Show replies
Show replies
tharaka_fernando
Contributor
‎09-26-2014 2:01 PM
0 Kudos

Hi Kiran,

thank you for your quick response.. Can you elaborate more in this regard..if possible in example coding Since I am a novel to UI5

The table is an empty table initially..

\user will enter values manually and I have to fetch data and do the rest..

Thanks inadvance

former_member184578
Active Contributor
‎09-26-2014 2:38 PM
0 Kudos

Hi,

Here is the code:



<!DOCTYPE HTML>  


<html>  


<head>  


<title>Selected Row of Table Editable Demo </title>  


    <meta http-equiv="X-UA-Compatible" content="IE=edge">  


    <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />  


    <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">  


    </script>  


    <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->  


    <script>  


        


            // Model Data (local)  


            var aData = [{ID: "1", lname: "Kiran",   fname: "Valluru"},


                         {ID: "2", lname: "Kishore", fname: "Valluru"}];  


            // Define a table    


           var oTable = new sap.ui.table.Table({  


                  title: "Line Items",  


                  visibleRowCount: 7,  


                firstVisibleRow: 3,  


               selectionMode: sap.ui.table.SelectionMode.Single,  


               toolbar: new sap.ui.commons.Toolbar({items: [   


                            new sap.ui.commons.Button({  


                                text: "Addnew",   


                                style: sap.ui.commons.ButtonStyle.Accept,  


                                press: function() { 




                                var modelData = oModel.getData();


                                var rowCount   = modelData.modelData.length;  


                                rowCount = rowCount + 1;


                                 aData.push({ID: rowCount, lname: " "}); // Push data to Model


                                   oModel.setData({modelData: aData}); // Set Model


                                }})  


                                ]}),  


                           });  


           oTable.addColumn(new sap.ui.table.Column({  


               label: new sap.ui.commons.Label({  


                   text: "ID"  


               }),  


               template: new sap.ui.commons.TextField({  


                   value: '{ID}',  


                


               }),  


               sortProperty: "ID",  


               filterProperty: "ID",  


               width: "125px"  


           }));   


           oTable.addColumn(new sap.ui.table.Column({  


               label: new sap.ui.commons.Label({  


                   text: "Last Name"  


               }),  


               template: new sap.ui.commons.TextField({  


                   value: '{lname}',  


                  


               }),  


               sortProperty: "lname",  


               filterProperty: "lname",  


               width: "125px"  


           }));  


           oTable.addColumn(new sap.ui.table.Column({  


               label: new sap.ui.commons.Label({  


                   text: "First Name"  


               }),  


               template: new sap.ui.commons.TextField({  


                   value: '{fname}',  


                 


               }),  


               sortProperty: "fname",  


               filterProperty: "fname",  


               width: "125px"  


           }));  


            //Create a model and bind the table rows to this model  


            var oModel = new sap.ui.model.json.JSONModel(); // created a JSON model        


            oModel.setData({ // Set the data to the model using the JSON object defined already  


                modelData: aData  


            });  


            oTable.setModel(oModel);  


            oTable.bindRows("/modelData"); // binding all the rows into the model  


                    


            //Place the Table on the UI  


            oTable.placeAt("MemTable");  


          


    </script>  


</head>  


<body class="sapUiBody">  


    <div id="MemTable"></div>  


</body>  


</html> 

hope this helps u,

Regards,

Kiran

Former Member
‎12-27-2014 3:57 PM
0 Kudos

what if I have the designstudio 1.4 crosstab sdk example table (should be identical to the SAPUI5 Table - shouldn't it?)

and I want to add a line to this filled table - how does that work dynamically?

Former Member
‎05-19-2016 4:52 PM
0 Kudos

Hi Kiran,

What if you have to add both columns and its its corresponding data in rows dynamically??

P.S: JSON Data is coming through xsjs service.

Thanks,

Maneesha

Answers (0)

Ask a Question