Combo Box in a DataTable

[Former Member]

Hi guys,

I'm having trouble with dropdown boxes within DataTable (JS view). Whenever I click on the arrow icon no data is displayed. It all works okay in case items are manually added to the combo box (without context binding).

I couldn't find any obvious reason for this. Besides, if the dropdown is embedded in a MatrixLayout (as opposed to DataTable), it all works okay.

Any clue?

sap.ui.jsview("testproject.Main", {
          getControllerName : function() {
                    return "testproject.Main";
          },
          createContent : function(oController) {
                    var testForm = new sap.ui.commons.layout.MatrixLayout({
                              id : 'testForm',
                              layoutFixed : true,
                              width : '960px',
                              columns : 1
                    });
                    var productData = [ {
                              "MATNR" : "1"
                    }, {
                              "MATNR" : "2"
                    }, ];
                    var oProductModel = new sap.ui.model.json.JSONModel();
                    oProductModel.setData({
                              modelData : productData
                    });
                    var oItemTable = new sap.ui.table.DataTable();
                    oItemTable.setTitle("Item Table");
                    oItemTable.setVisibleRowCount(10);
                    oItemTable.setExpandedVisibleRowCount(10);
                    oItemTable.setFirstVisibleRow(10);
                    oItemTable.setSelectionMode(sap.ui.table.SelectionMode.Multi);
                    oItemTable.setEditable(true);
                    var oDeviceModel = new sap.ui.model.json.JSONModel();
                    oDeviceModel.setData({
                              hardware : [ {
                                        "device" : "PC",
                                        "enabled" : true
                              }, {
                                        "device" : "Camera",
                                        "enabled" : true
                              } ]
                    });
                    // Create a DropdownBox
                    var oDropdownBox3 = new sap.ui.commons.DropdownBox("DropdownBox3Test");
                    oDropdownBox3.bindProperty("tooltip", "tooltip");
                    oDropdownBox3.bindProperty("editable", "editable");
                    var oItemTemplate1 = new sap.ui.core.ListItem();
                    oItemTemplate1.bindProperty("text", "device");
                    oItemTemplate1.bindProperty("enabled", "enabled");
                    oDropdownBox3.setModel(oDeviceModel);
                    oDropdownBox3.bindItems("hardware", oItemTemplate1);
                    var oControl = new sap.ui.commons.TextField().bindProperty("value", "MATNR");
                    oItemTable.addColumn(new sap.ui.table.Column({
                              label : "Selected",
                              template : oControl
                    }));
                    oItemTable.addColumn(new sap.ui.table.Column({
                              label : "Material Code",
                              template : oDropdownBox3,
                    }));
                    oItemTable.bindRows("modelData");
                    oItemTable.setModel(oProductModel);
                    testForm.createRow(oItemTable);
                    return testForm;
          }
});

[pmuessig · Accepted solution]

Hi Marco,

we found the issue. It is not related to the selectionBehavior as stated before. Furthermore this is an issue in the databinding framework. We will analyse this in more details and provide a proper fix. Thanks for the code sample you provided to us. It helped to reproduce this issue.

Just some comments on the code:

• Please avoid trailing commas in arrays as this would cause errors in IE:

        var productData = [ {

            "MATNR" : "1"

        }, {

            "MATNR" : "2"

        }, ];

• Whenever you want your path to be resolved starting with the root-Element of the data model, you have to add a slash at the beginning of the binding path (use an absolute binding path - this is required beginning with 1.6+):

        oDropdownBox3.bindItems("/hardware", oItemTemplate1);

        oItemTable.bindRows("/modelData");

Here the workaround for this issue:

• Simply add the data of the device model to the common model of the Table - this would not change the rest of your coding but it avoids the issue that when applying a model on a control the binding context is not set properly:

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

        oProductModel.setData({

            modelData : productData,

            hardware : [ {

                "device" : "PC",

                "enabled" : true

            }, {

                "device" : "Camera",

                "enabled" : true

            } ]

        });

With this change finally your example works.

Sorry for this issue and best regards,

Peter

[Former Member · Accepted solution]

Hello Peter,

thanks for the detailed information but the solution you provided is still not fine with me.

I was using neo-sdk-1.5.2 earlier. I then downloaded the newest version (neo-sdk-1.7.1) but had all sorts of problems with Eclipse Indigo 32-bit. I had to reinstall a fresh new Instance (this time Juno 32-bit) and configure it for NW Cloud development.

I'm all set now. I've developed this simple program (which mirrors the application we're developing) but no joy with DDBox & DataTable.

Would you mind checking this out?

Besides, the documentation I managed to download (HTML5Evaluation_complete.zip) still refers to SAPUI5 1.4. Isn't there a newer version available?

Thanks in advance.

Regards

sap.ui
                    .jsview(
                                        "test.orderCreate2",
                                        {
                                                  getControllerName : function() {
                                                            return "test.orderCreate2";
                                                  },
                                                  createContent : function(oController) {
                                                            var oOrderForm = new sap.ui.commons.layout.MatrixLayout({
                                                                      id : 'orderCreationExternalLayout',
                                                                      layoutFixed : true,
                                                                      width : '960px',
                                                                      columns : 5,
                                                                      widths : [ '150px', '250px', '200px', '200px', '200px' ]
                                                            }); 
                                                            var pData = [
                                                                                {
                                                                                          "MATNR" : "000000000000040782",
                                                                                          "MATKL" : "4040300",
                                                                                          "MEINS" : "ST",
                                                                                          "QUANTITY" : "1",
                                                                                },
                                                                                {
                                                                                          "MATNR" : "000000000000040783",
                                                                                          "MATKL" : "4040300",
                                                                                          "MEINS" : "ST",
                                                                                          "QUANTITY" : "1",
                                                                                }
                                                            ];
                                                            var matData = [ {
                                                                      "MATNR" : "000000000000040782"
                                                            }, {
                                                                      "MATNR" : "000000000000040783"
                                                            } ];
                                                            var oProductModel = new sap.ui.model.json.JSONModel();
                                                            oProductModel.setData({
                                                                      productData : pData,                                                   
                                                                      materialData : matData
                                                            });
                                                            var oMaterialModel = new sap.ui.model.json.JSONModel();
                                                            oMaterialModel.setData({
                                                                      materialData : matData
                                                            });
                                                            function createCallout(sText) {
                                                                      var oButton = new sap.ui.commons.Button({
                                                                                text : sText,
                                                                                lite : true
                                                                      });
                                                                      var oCallout = new sap.ui.commons.Callout({
                                                                                content : oButton
                                                                      });
                                                                      return oCallout;
                                                            }
                                                            oOrderForm.createRow(lblRequestedDelDate, tfRequestedDelDate);
                                                            var oCell = new sap.ui.commons.layout.MatrixLayoutCell({
                                                                      colSpan : 4
                                                            });
                                                            var oItemTable = new sap.ui.table.DataTable("itemTable");
                                                            oItemTable.setTitle("Item Table");
                                                            oItemTable.setVisibleRowCount(10);
                                                            oItemTable.setExpandedVisibleRowCount(10);
                                                            oItemTable.setFirstVisibleRow(10);
                                                            oItemTable.setSelectionMode(sap.ui.table.SelectionMode.Multi);
                                                            oItemTable.setEditable(true);
                                                            var oDropdownBoxMatnr = new sap.ui.commons.DropdownBox("ddlb_matnr");
                                                            oDropdownBoxMatnr.setModel(oProductModel);
                                                            var oItemTemplateMatnr = new sap.ui.core.ListItem();
                                                            oItemTemplateMatnr.bindProperty("text", "MATNR");
                                                            oDropdownBoxMatnr.bindItems("/materialData", oItemTemplateMatnr);
                                                            oItemTable.addColumn(new sap.ui.table.Column({
                                                                      label : "Mat. Number",
                                                                      template : oDropdownBoxMatnr
                                                            }));
                                                            oControl = new sap.ui.commons.TextField();
                                                            oControl.bindProperty("value", "MATNR");
                                                            oItemTable.addColumn(new sap.ui.table.Column({
                                                                      label : "Mat. Description",
                                                                      template : oControl
                                                            }));
                                                            oControl = new sap.ui.commons.TextField();
                                                            oControl.bindProperty("value", "QUANTITY");
                                                            oItemTable.addColumn(new sap.ui.table.Column({
                                                                      label : "Order Quantity",
                                                                      template : oControl
                                                            }));
                                                            oItemTable.bindRows("/productData");
                                                            oItemTable.setModel(oProductModel);
                                                            oCell.addContent(oItemTable);
                                                            oOrderForm.createRow(oCell);
                                                            // Row of buttons (Create Sales Order, Cancel, etc)
                                                            oCell = new sap.ui.commons.layout.MatrixLayoutCell({
                                                                      colSpan : 2
                                                            });
                                                            var oButtonRow = new sap.ui.commons.layout.MatrixLayout({
                                                                      id : 'oButtonRow',
                                                                      layoutFixed : true,
                                                                      width : '20px',
                                                                      columns : 2,
                                                                      widths : [ '100px', '100px' ]
                                                            });
                                                            var createOrderBtn = new sap.ui.commons.Button({
                                                                      text : "Create Order",
                                                                      tooltip : "Click to create an Order",
                                                                      press : oController.onCreateSalesOrder
                                                            });
                                                            var cancelOrderBtn = new sap.ui.commons.Button({
                                                                      text : "Cancel Order",
                                                                      tooltip : "Click to cancel an Order",
                                                                      press : function() {
                                                                                alert('Alert from ' + oButton1.getText());
                                                                      }
                                                            });
                                                            oButtonRow.createRow(createOrderBtn, cancelOrderBtn);
                                                            oCell.addContent(oButtonRow);
                                                            oOrderForm.createRow(oCell);
                                                            return oOrderForm;
                                                  }
                                        });

Message was edited by: Marco Paciucci One more thing. At runtime, an error is logged in the JS console: "adding element with duplicate id '__item0-ddlb_matnr-col0-row0-0' .... There are 2 lines in the table and, apparently, the framework does not create unique IDs for DDLBs. Could you have a look at this too? Cheers

[pmuessig · Accepted solution]

Hi Marco,

regarding a later version of SAPUI5 - the SAPUI5 Eclipse Tools including the SAPUI5 Runtime 1.6.1 is part of the NW Cloud Update site. You should be able to install them as plugins into your Eclipse. Unfortunately we have not upgraded SCN download available since we currently discuss the shipping alternative for SAPUI5.

Once you have the tools installed you should be able to create a SAPUI5 application project. You can also have a look into the documentation here: https://sapui5.netweaver.ondemand.com/sdk/#docs/guide/CreateApp.html.

If you have not been authenticated to the application before the hash as direct link to the SAPUI5 Development Tools > Application Development Tools > Create an Application Project is lost. Just append the hash or apply the full URL again and the topic should be directly opened.

Regarding your issue - the problem appears if you apply a model to the Dropdown (we are investigating this issue since it already persists for 1.6). In SAPUI5 the model is inherited over the control tree, e.g. if you set a model on the Table, this model will be available for all controls of the Table.

So I used the 1.4 version and tried out your code and it works smooth when removing the following strikethrough line:

        var oDropdownBoxMatnr = new sap.ui.commons.DropdownBox("ddlb_matnr"); 

       oDropdownBoxMatnr.setModel(oProductModel); 

        var oItemTemplateMatnr = new sap.ui.core.ListItem(); 

        oItemTemplateMatnr.bindProperty("text", "MATNR"); 

        oDropdownBoxMatnr.bindItems("/materialData", oItemTemplateMatnr);

Afterwards you sample application worked for me.

Best regards,

Peter

[Former Member · Accepted solution]

Hi Peter,

that's perfect, it works like a charm (been using neo-sdk-1.7.1).

Warm Regards,

Marco

[schfer_christian · Accepted solution]

Hello, thanks for your information.

The main issue in my case was this:

var productData = [ {

            "MATNR" : "1"

        }, {

            "MATNR" : "2"

        }, ];

the comma here cause confusing errors downwards in the code.

[matt_steiner]

Happy you got it working... and special thanks to Peter for providing the hint how-to do it.

[As this topic is more SAP UI5 than NW Cloud I've moved the thread to the corresponding topic though.]

[Former Member]

Hi Marco,

I am new to UI5 so tried to run your application for gaining handson. But when I did copy paste of above code under view and run its landing to a blank page. Can you help how can I make it run so that I can get some functionality features.

Thanks

[mylesfenlon]

Where did you copy and paste this code? You need to provide more information if you want people to help

Have you made sure that you have installed the UI5 toolkit in Eclipse, for example?

[Former Member]

I hac=ve downloaded UI5 toolkit. I am able to run simple programe of creating a buttom. But want to explore with multiple options. So need tried this pasted above code which didnt work. Seems I am missing controller part of code.

[pmuessig]

Hi Marco,

which version of SAPUI5 do you use? For the 1.6.x version there is a bug with the ComboBox/DropdownBox and the DataTable but it should work if you use the sap.ui.table.Table control. This issue will be check and a fix will be provided for later 1.6.x versions.

Best regards,

Peter