cancel
Showing results for 
Search instead for 
Did you mean: 

editable property is not working for Table

former_member201407
Participant
0 Kudos

Hi Folks

Here I'm trying to make a table non-editable with following code (setting the property editable as false.

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

                        id: "FuncAreaTable",

                        visibleRowCount: 6,

                        firstVisibleRow: 2,

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

                        width: "100%",

                        editable: false

                        });

Still the table contents are editable. How to make it non-editable

Please note: We are developing UI5 based pages in MII Workbench.

Regards

Som

Accepted Solutions (1)

Accepted Solutions (1)

former_member201407
Participant
0 Kudos

Thanks Rohit.

This is working. Now my concern is to make this TextField as editable on pressing a button.

Kindly post a sample code how to set editable true with id : "textfld" since this control has id.

Regards

Som

Former Member
0 Kudos

Hi Som,

sap.ui.getCore().byId("textfld").setEditable(true);

should do the trick.

Regards

Stefan

Former Member
0 Kudos

Hi Stefan Lotterle

Your ques seems little obscure. Plz come up with some more information like give us your table definition structure to help u out.

Thanks

Rohit

Former Member
0 Kudos

Hi Som,

As per your requirement is to make the TextField as editable on pressing a button. This is possible by modifying the template of that particular column.

As Rohit mentioned that how to non-editable the particular column, I am starting from that point...

table1.addColumn(new sap.ui.table.column("col1",{

          label: new sap.ui.commons.Label({test:"Name"}),

          width:"100px"

          template: new sap.ui.commons.TextField({editable:false}).bindProperty("value","name")

         }));

Here in the above example code, you don't need to provide any id for the TextField template. Now, suppose You have the button which required to edit the column ...So, let's add control code in that button.

new sap.ui.commons.Button({

       text: "Make Second Column Editable",

       press: function() {

                     alert("This Column Editable Now!");

                     (oTable.getColumns()[1]).setTemplate(new sap.ui.commons.TextField({editable:true}).bindProperty("value", "name"));

       }

})

In the above code, you can see that template will be modify on button press. This way you can able to meet your business requirement.

Best Regards,

Bibhas Das


Former Member
0 Kudos

Hi Som,

In my previous solution that is for updating the column level. Now, if you want to update/edit a particular row on click of a button on that particular row, you have to do by handling the DOM.

Please find the below example.

In the above image, every rows have a edit button. Now, the requirement is on click of 'Edit' button user can edit all field of that particular row. For example, here I have given the option to edit 'Designation' of a particular row. Please see below code. You can apply this code in the SAPUI5 API's Table Control page and able to test. Blue colored part code is very important where exist the main logic.

Code:-

 

          //Define some sample data

          var aData = [

              {lastName: "Dente", name: "Al", designation: "Associate 1", rank: 4},

              {lastName: "Friese", name: "Andy", designation: "IT Specialist", rank: 1},

              {lastName: "Mann", name: "Anita", designation: "Architect", rank: 3},

              {lastName: "Schutt", name: "Doris", designation: "Associate 2", rank: 4},

              {lastName: "Opel", name: "Doris", designation: "Manager", rank: 2}

          ];

          //Create an instance of the table control

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

               id: "empl",

               title: "Employee Data",

              visibleRowCount: 7,

              firstVisibleRow: 3,

              selectionMode: sap.ui.table.SelectionMode.Single

          });

          //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.TextView().bindProperty("text", "lastName"),

              sortProperty: "lastName",

              filterProperty: "lastName",

              width: "200px"

          });

          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().bindProperty("value", "name"),

              sortProperty: "name",

              filterProperty: "name",

              width: "100px"

          }));

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

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

              template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "designation"),

              sortProperty: "designation",

              filterProperty: "designation",

              width: "75px",

              hAlign: "Center"

          }));

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

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

              template: new sap.ui.commons.RatingIndicator().bindProperty("value", "rank"),

              sortProperty: "rank",

              filterProperty: "rank"

          }));

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

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

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

                                    text : "Edit",

                                    press : function(oEvent) {                                                         

                                                          var iRowIndex = this.getParent().getIndex();

                                                          var celID = this.getParent().getId() +"-col2"; // col2 is 'designation' column

                                                          var tdCell= document.getElementById(celID);

                                                          var inputF= tdCell.getElementsByTagName("input");

                                                        

                                                          var btnText = oEvent.getSource().getText();

                                                              if ( btnText == "Edit"){

                                                                         inputF[0].readOnly = false;

                                                                         oEvent.getSource().setText("Update");

                                                             } else if ( btnText == "Update") {

                                                                     inputF[0].readOnly = true;

                                                                     oEvent.getSource().setText("Edit");

                                                             }

                                               }

                               })

          }));

         //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("sample1");


I hope this two different solution will fulfill your development requirements.

Best Regards,

Bibhas Das

Answers (3)

Answers (3)

Former Member
0 Kudos

Hi,

If you want to make the fields inside table either editable/ non-editable,

then you need to set the template of the fields you are using in your column.

See the below example:-

I am adding one column to my table and a textfield in that column,

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

                    label : new sap.ui.commons.Label( {text : 'mytext', hAlign : "Center", wrapping : true }),

                    template : new sap.ui.commons.TextField('textFieldId', {

                              editable : false

                    }).bindProperty("value", "salesOredrNo"),

                    width : "100px"

          }));

Hope this will help you.

Thanks

Gouri Shankar

Former Member
0 Kudos

Hi Som

you must be adding the column in this way

table1.addColumn(new sap.ui.table.column("col1",{

          label: new sap.ui.commons.Label({test:"Name"}),

          width:"100px"

          template: new sap.ui.commons.TextField("textfld",{editable:false}).bindProperty("value","name")

         }));

Note: Set TextField property  editable to false in order to make your cells non editable.

Thanks

Rohit

ChandraMahajan
Active Contributor
0 Kudos

Hi,

As per SAPUI5 documentation https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/ui/table/demokit/Table.html

editablebooleanFlag whether the controls of the Table are editable or not (currently this only controls the background color!)

and as per that, I guess setting this property will not control table contents as non-editable.

But if your columns are of UI type TextField, you can set non-editable using property editable or enabled

Regards,

Chandra