adding add and delete buttons in sap.m.table

[former_member200679]

Hi,

I have created a table in xml view and i am binding its cell contents with json in controller.js.

Following is the code i have written to add delete button in the table for every row:

var oTable = this.getView().byId("adjustTable");   

  var mytemplate = new sap.m.ColumnListItem(

  {

  type : "Navigation",

  cells : [

  new sap.m.Text({

  text : "{action}"

  }),

  new sap.m.Text({

  text : "{item}",

  }),

  new sap.m.Text({

  text : "{main}"

  }),

  new sap.m.Text({

  text : "{Product}"

  }),

  new sap.m.Text({

  text : "{status}"

  }),

  new sap.m.Text({

  text : "{usage}"

  }),

  new sap.m.Text({

  text : "{unit}"

  }),

  new sap.m.Text({

  text : "{gross_amt}"

  }),

  new sap.m.Text({

  text : "{tax}"

  }),

  new sap.m.Text({

  text : "{c_smfld}"

  }),

  new sap.m.Text({

  text : "{net}"

  }),

  new sap.m.Text({

  text : "{c_smfld1}"

  }),

  new sap.m.Text({

  text : "{ref_doc}"

  }),

  new sap.m.Button(

              {

               icon : "sap-icon://sys-cancel",

               press : function(evt) {

                if (evt.getSource().getParent().getParent().getItems().length > 0) {

                 row = evt.getSource().getParent().getId();

                 evt.getSource().getParent().getParent().removeItem(row);

                }

               },

              }),

  ]

  });

  oTable.bindAggregation("items", {

         path : "/LineItems/",

         template : mytemplate

       });

  },

The delete button code is not working as it is not being reflected on ui. For now i am running the app on localhost using JSON data.

I want to add two buttons on every row of the table, one for adding a new row denoting plus sign button and another deleting a row denoting cross sign button.

Please share your inputs.

Thanks,

Saurabh.

[Former Member · Accepted solution]

Hi  Saurabh,

I've tried this.

               var oModel = new sap.ui.model.json.JSONModel("mock/data.json");
                var oTable = new sap.m.Table({
                    columns: [new sap.m.Column({
                        header : new sap.m.Text({
                            text : "Name"
                        })
                    }), new sap.m.Column({
                        header : new sap.m.Text({
                            text : "ID"
                        })
                    }), new sap.m.Column({
                        header : new sap.m.Text({
                            text : "DELETE"
                        })
                    }) ]
                });
                oTable.setModel(oModel);
                var mytemplate = new sap.m.ColumnListItem({
                    type : "Navigation",
                    cells : [
                                new sap.m.Text({text : "{name}"}),
                                new sap.m.Text({text : "{id}"}),
                                new sap.m.Button({
                                    icon : "sap-icon://sys-cancel",
                                    press : function(evt) {
                                        console.log("press")
                                        if (evt.getSource().getParent().getParent().getItems().length > 0) {
                                            row = evt.getSource().getParent().getId();
                                            evt.getSource().getParent().getParent().removeItem(row);
                                        }
                                    },
                                })
                    ]
                });
                oTable.bindAggregation("items", {
                    path : "/data",
                    template : mytemplate
                });

The button is working for me.

[former_member200679 · Accepted solution]

Thanks Daniel, there was a minor correction in the view and know i am able to see the button working properly. Now i want to add one more button for adding rows. How do i do that?

[Former Member · Accepted solution]

Do you want to display the button in each row?

Than you have to add a column in the table and a button in the cells of the template.

If you want to display only one button you should add it in the content of the page.

[karthikarjun · Accepted solution]

Hi,

Nice work Daniel.

For adding lineItem:

JS Bin - Collaborative JavaScript Debugging

Try this Saurabh.

Thanks,

Karthik A

[Former Member · Accepted solution]

Hi Saurabh,

Karthik's code works quite well.

But if you use it, you have to update the model when you delete a row.

Otherwise it will throw the following error, when you delete one of the original entries.

EDIT:

You can try following code:

if (evt.getSource().getParent().getParent().getItems().length > 0) {
     var item = evt.getSource().getParent();
     var index = evt.getSource().getParent().getParent().indexOfItem(item);
     var newData = oTable.getModel().getData();
     newData.data.splice(index, 1);
     oTable.getModel().setData(newData);
}

I use following mock data:

{
    "data":[
        {
            "name": "Test1",
            "id": "0001"
        },
        {
            "name": "Test2",
            "id": "0002"
        },
        {
            "name": "Test3",
            "id": "0003"
        },
        {
            "name": "Test4",
            "id": "0004"
        }
    ]
}

Regards

Daniel

[former_member182862 · Accepted solution]

Sorry, I do not advocate removing rows from table directly.

We should remove rows in model data.

JS Bin - Collaborative JavaScript Debugging

Thanks

-D

[former_member200679 · Accepted solution]

Thanks everyone for your inputs, i am able to add and delete from first row which contains data.

I am able to insert empty row as the 2nd row the table, but i am not able to add delete and add button to that empty row. How can i do that? Do i have put it in a loop? On clicking add i should get empty row or empty boxes to be filled along with add and delete button at the end of row.

[Former Member · Accepted solution]

Can you share your code, please?

It would make it easier for us to help you.

[former_member200679 · Accepted solution]

Here is the code:

var oTable = this.getView().byId("adjustTable");

  var mytemplate = new sap.m.ColumnListItem(

  {

  //type : "Navigation",

  cells : [

  new sap.m.Text({

  text : "{action}"

  }),

  new sap.m.Text({

  text : "{item}",

  }),

  new sap.m.Text({

  text : "{main}"

  }),

  new sap.m.Text({

  text : "{Product}"

  }),

  new sap.m.Text({

  text : "{status}"

  }),

  new sap.m.Text({

  text : "{usage}"

  }),

  new sap.m.Text({

  text : "{unit}"

  }),

  new sap.m.Text({

  text : "{gross_amt}"

  }),

  new sap.m.Text({

  text : "{tax}"

  }),

  new sap.m.Text({

  text : "{c_smfld}"

  }),

  new sap.m.Text({

  text : "{net}"

  }),

  new sap.m.Text({

  text : "{c_smfld1}"

  }),

  new sap.m.Text({

  text : "{ref_doc}"

  }),

  new sap.m.Button(

  {

  icon : "sap-icon://sys-cancel",

  press : function(evt) {

  console

  .log("press");

  if (evt

  .getSource()

  .getParent()

  .getParent()

  .getItems().length > 0) {

  row = evt

  .getSource()

  .getParent()

  .getId();

  evt

  .getSource()

  .getParent()

  .getParent()

  .removeItem(

  row);

  }

  },

  }),

      new sap.m.Button(

  {

  icon : "sap-icon://add",

  press : function(evt) {

  console

  .log("press");

  var colMatList = new sap.m.ColumnListItem(

  {

  cells : [

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Input(

  {

  value : ""

  }),

  new sap.m.Button(

    {

  icon : "sap-icon://sys-cancel",

  press : function(evt) {

  if (evt.getSource().getParent().getParent().getItems().length > 0) {

  row = evt.getSource().getParent().getId();

  evt.getSource().getParent().getParent().removeItem(row);

  }

  },

  }),

  ]

  });

  oTable.addItem(colMatList);

  }

  }),

  ],

  });

  oTable.bindAggregation("items", {

  path : "/LineItems/",

  template : mytemplate

  });

  },

[Former Member · Accepted solution]

Hi Saurabh,

as Dennis Seah mentioned you should update your table via model.

For example you can use following code.

Table.view.xml

<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
        controllerName="testapp.Table" xmlns:html="http://www.w3.org/1999/xhtml">
    <Page title="Table">
        <content>
            <Table id="adjustTable">
                <columns>
                    <Column/>
                    <Column/>
                       <Column/>
                    <Column/>
                </columns>
            </Table>
        </content>
    </Page>
    <Dialog id="createDialog" title="Create entity" contentWidth="1em" afterClose="clearDialog">
                <buttons>
                    <Button text = "Accept" press = "onSave"></Button>
                    <Button text = "Cancel" press = "onClose"></Button>
                </buttons>
                <content>
                    <Label text = "Name:" textAlign = "Center"></Label>
                    <Input id = "nameInput"></Input>
                    <Label text = "ID:" textAlign = "Center"></Label>
                    <Input id = "idInput"></Input>
                </content>
            </Dialog>
</core:View>

Table.controller.js

sap.ui.controller("testapp.Table", {
    onInit: function() {
        var oTable = this.getView().byId(this.createId("adjustTable"));
        var oModel = new sap.ui.model.json.JSONModel("mock/data.json");
        oTable.setModel(oModel);
        var controller = this;

        var mytemplate = new sap.m.ColumnListItem({
            cells : [
                     new sap.m.Text({
                         text : "{name}"
                     }),
                     new sap.m.Text({
                         text : "{id}",
                     }),
                     new sap.m.Button({
                         icon : "sap-icon://sys-cancel",
                         press : function(evt) {
                             if (evt.getSource().getParent().getParent().getItems().length > 0) {
                                 if (evt.getSource().getParent().getParent().getItems().length > 0) {
                                        var item = evt.getSource().getParent();
                                        var index = evt.getSource().getParent().getParent().indexOfItem(item);
                                        var newData = oTable.getModel().getData();
                                        newData.data.splice(index, 1);
                                        oTable.getModel().setData(newData);
                                    }
                             }
                         },
                     }),
                     new sap.m.Button({
                         icon : "sap-icon://add",
                         press : function(evt) {
                             controller.getView().byId(controller.createId("createDialog")).open();
                         }
                     })
              ],
        });
        oTable.bindAggregation("items", {
            path : "/data",
            template : mytemplate
        });
    },
    onClose: function(evt){
        this.getView().byId(this.createId("createDialog")).close();
    },
    onSave: function(evt){
        var name = this.getView().byId(this.createId("nameInput")).getValue();
        var id = this.getView().byId(this.createId("idInput")).getValue();
        var table = this.getView().byId(this.createId("adjustTable"));
        var modelData = table.getModel().getData();
        modelData.data.push({
            name: name,
            id: id
        });
        table.getModel().setData(modelData);
        this.getView().byId(this.createId("createDialog")).close();
    },
    clearDialog: function(evt){
        var dialog = evt.getSource();
        var content = dialog.getContent();
        content[1].setValue("");
        content[3].setValue("");
    }
});

Regards

Daniel

[elgoher · Accepted solution]

Hi I was looking for some code and It works yours

thanks for sharing

[Aison · Accepted solution]

Nice sharing! Solved my problem!