Skip to Content
avatar image
Former Member

Dynamic Table: Need unique ID for each cell

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

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Jan 09, 2015 at 08:15 AM

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

    Please use this: Asking for coding help - SAPUI5 - (please read before posting coding questions)

    And then format your coding please.

    Add comment
    10|10000 characters needed characters exceeded

  • Jan 09, 2015 at 08:23 AM

    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.

    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Former Member
    Jan 09, 2015 at 12:50 PM

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

    Add comment
    10|10000 characters needed characters exceeded