cancel
Showing results for 
Search instead for 
Did you mean: 

Dynamic Table: Need unique ID for each cell

Former Member
0 Kudos

Hi,

I am writing a UI5 app that will contain a dynamic table, which will be bound to a JSON model.

I would like to have each cell on the table have a unique ID. I then use this ID to group into another structure. So for example the table could have 3 rows, which I want to combine into 2 rows. Row 1 & 2 being mapped to the new Row 1 and Row 3 being mapped to the new Row 2.

This is the code I have so far: -


// Define some sample data

            var aData = [ {

                lastName : "Dente",

                lastNameID : "E1_1",

                name : "Al",

                nameID : "E2_1"               

            }, {

                lastName : "Friese",

                lastNameID : "E1_2",

                name : "Andy",

                nameID : "E2_2"               

            } ];

            // Create an instance of the table control

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

                title : "Table Example",

                visibleRowCount : 7,

                firstVisibleRow : 3,               

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

                enableColumnReordering : false,

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

                    items : [ new sap.ui.commons.Button({

                        text : "Button in the Toolbar",

                        press : function() {

                            alert("Button pressed!");

                        }

                    }) ]

                }),

                extension : [ new sap.ui.commons.Button({

                    text : "Button in the Extension Area",

                    press : function() {

                        alert("Button pressed!");

                    }

                }) ]

            });                   

            // Define the columns and the control templates to be used

            var oColumn = new sap.ui.table.Column({

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

                    text : "Last Name"

                }),

                template : new sap.ui.commons.TextField("lastNameID").bindProperty("value",

                        "lastName"),           

                width : "100px"

            });

            oTable.addColumn(oColumn);

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

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

                    text : "First Name"

                }),

                template : new sap.ui.commons.TextField("nameID").bindProperty("value",

                        "name"),               

                width : "100px"

            }));

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

            var oModel = new sap.ui.model.json.JSONModel();

            oModel.setData({

                modelData : aData

            });

            oTable.setModel(oModel);

            oTable.bindRows("/modelData");

            // Initially sort the table

            oTable.sort(oTable.getColumns()[0]);

            // Bring the table onto the UI

            oTable.placeAt("idViewRoot--idViewDetail--toolBar-content");

You will see on the JSON model, there is an element called " lastNameID". I would ideally like this to be used for the cell row 1, col 1 when the table is output. And likewise the element "nameID" would be set on Row 1, Col 2.

I hope this makes sense.

Is this possible, if not , I will need to think of another way of doing it.

Any help is much appreciated.

Thanks

Martin

Accepted Solutions (0)

Answers (3)

Answers (3)

Former Member
0 Kudos

Trying again to post the code.

// Define some sample data

            var aData = [ {

                lastName : "Dente",

                lastNameID : "E1_1",

                name : "Al",

                nameID : "E2_1"               

            }, {

                lastName : "Friese",

                lastNameID : "E1_2",

                name : "Andy",

                nameID : "E2_2"               

            } ];

            // Create an instance of the table control

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

                title : "Table Example",

                visibleRowCount : 7,

                firstVisibleRow : 3,               

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

                enableColumnReordering : false,

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

                    items : [ new sap.ui.commons.Button({

                        text : "Button in the Toolbar",

                        press : function() {

                            alert("Button pressed!");

                        }

                    }) ]

                }),

                extension : [ new sap.ui.commons.Button({

                    text : "Button in the Extension Area",

                    press : function() {

                        alert("Button pressed!");

                    }

                }) ]

            });                   

            // Define the columns and the control templates to be used

            var oColumn = new sap.ui.table.Column({

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

                    text : "Last Name"

                }),

                template : new sap.ui.commons.TextField("lastNameID").bindProperty("value",

                        "lastName"),           

                width : "100px"

            });

            oTable.addColumn(oColumn);

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

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

                    text : "First Name"

                }),

                template : new sap.ui.commons.TextField("nameID").bindProperty("value",

                        "name"),               

                width : "100px"

            }));

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

            var oModel = new sap.ui.model.json.JSONModel();

            oModel.setData({

                modelData : aData

            });

            oTable.setModel(oModel);

            oTable.bindRows("/modelData");

            // Bring the table onto the UI

            oTable.placeAt("idViewRoot--idViewDetail--toolBar-content");

kai2015
Contributor
0 Kudos

I don't understand what you want to do,

but do you know that each cell has already a unique id?

Look at the id attribute on each <td>-tag.

Former Member
0 Kudos

I know each cell has an ID, but I want to be able to specify my own ID.

kai2015
Contributor
0 Kudos

I believe it's not possible to give them a individual ID without extending this control.

And why do you need your own ID's? What do you want to do with that?

kai2015
Contributor
0 Kudos

lol ... your Code isn't really readable.

Please use this:

And then format your coding please.