on 09-03-2012 6:20 PM
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;
}
});
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:
var productData = [ {
"MATNR" : "1"
}, {
"MATNR" : "2"
}, ];
oDropdownBox3.bindItems("/hardware", oItemTemplate1);
oItemTable.bindRows("/modelData");
Here the workaround for this issue:
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
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
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.]
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
93 | |
10 | |
10 | |
9 | |
9 | |
7 | |
6 | |
5 | |
5 | |
4 |
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.