set the value in UI5 DropDownBox

Hi All,

One of my requirement is to get the value from the oTable and set the value to the DropDownbox.

My code

var shift =oModelCalc.getProperty("Shift",selectedRow);

alert(shift);

oDropDownBox.setValue(shift);

I am getting the right value in the alert "shift" but the value is not passing through dropbox.

I also tried with

if(shift="A")

{

oDropDownBox.setValue("A");

}

else

{

oDropDownBox.setValue("B");

}

but no solution ... can any one help.

Regards

G.Partheeban

SAP Managed Tags:
SAP Manufacturing Integration and Intelligence

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Accepted Solutions (0)

Answers (2)

Hi Partheeban,

setValue() should work for your requirement. May be you can ensure that the value that you are trying to set as value for the dropdownbox is one of the allowed set of values.

How have you defined the list of items/values for the dropdownbox? I believe if the value you are trying to set is one of those values then it should work. When you say it is not working, what is the value that it shows.. is it the default- 1st value in the allowed items for the dropdownbox.

Answers to the above queries may help us find why it is not working for you.

Regards,

Ria

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Hi Ria,

DropDownBox definition:

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

oModel.setData({

Shift:[

{Shift:"A"},

{Shift:"B"},

{Shift:"C"}],

editable: true,

tooltip: "Shift"});

sap.ui.getCore().setModel(oModel);

//Drop down box definition

var oDropdownBox3 = new sap.ui.commons.DropdownBox("DropdownBox3");

oDropdownBox3.bindProperty("tooltip", "/tooltip");

oDropdownBox3.bindProperty("editable", "/editable");

oDropdownBox3.setWidth("50px");

oDropdownBox3.setModel(oModel);

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

oItemTemplate1.bindProperty("text", "Shift");

oItemTemplate1.bindProperty("enabled", "enabled");

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

On select:

var shift =oModelCalc.getProperty("Shift",selectedRow);

oDropdownBox3.setValue(shift);

alert(shift);

I am getting the values "A","B" and "C" in the alert. But it is not changing in the dropdownbox.

Please let me know any other doubts you have.

Regards

G.Partheeban

Hi Partheeban,

I tried using your code in my example, where I have just 1 dropdownbox and on changing the value in the dropdown, I always reset it to "C".

<!DOCTYPE html>

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

oModel.setData({

Shift:[

{Shift:"A"},

{Shift:"B"},

{Shift:"C"}],

editable: true,

tooltip: "Shift"});

sap.ui.getCore().setModel(oModel);

//Drop down box definition

var oDropdownBox3 = new sap.ui.commons.DropdownBox("DropdownBox3");

oDropdownBox3.bindProperty("tooltip", "/tooltip");

oDropdownBox3.bindProperty("editable", "/editable");

oDropdownBox3.setWidth("50px");

oDropdownBox3.setModel(oModel);

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

oItemTemplate1.bindProperty("text", "Shift");

oItemTemplate1.bindProperty("enabled", "enabled");

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

oDropdownBox3.attachChange(setValueinDDB);

function setValueinDDB() {

var shift = "C";

oDropdownBox3.setValue(shift);

}

oDropdownBox3.placeAt("content");

</script>

</head>

</body>

</html>

The above code works fine.

Can you please share the code that use on select and the part where you do setValue().

I don't get the reason for it to not work, but could be it is not done in the right place.

Regards,

Ria

Hi Ria,

Thanks for the reply...

The code you sent working for me too... but my requirement is on selecting the Row in the table as shown below

oTableCalc.attachRowSelectionChange(function(oEvent){

var oCore = sap.ui.getCore();

var reftable = oCore.byId("maintable");

var i = oTableCalc.getSelectedIndex() ;

var selectedRow = oTableCalc.getContextByIndex(i);

oTF1.setValue(oModelCalc.getProperty("UF_SS", selectedRow));

oTF2.setValue(oModelCalc.getProperty("Cyclone_SS",selectedRow));

oTF3.setValue(oModelCalc.getProperty("45_I_SS",selectedRow));

oTF4.setValue(oModelCalc.getProperty("HGP_SS",selectedRow));

oTF5.setValue(oModelCalc.getProperty("45_II_SS",selectedRow));

oTF6.setValue(oModelCalc.getProperty("Conc_I_H2O",selectedRow));

oTF7.setValue(oModelCalc.getProperty("45_III_SS",selectedRow));

oTF8.setValue(oModelCalc.getProperty("Conc_II_H2O",selectedRow));

oTF9.setValue(oModelCalc.getProperty("BCC_SS",selectedRow));

oTF10.setValue(oModelCalc.getProperty("Conc_III_H2O",selectedRow));

oTF11.setValue(oModelCalc.getProperty("Remark",selectedRow));

var Date = oModelCalc.getProperty("Current_DateTime",selectedRow);

oDatePicker1.setValue(Date);

//alert(oModelCalc.getProperty("Shift",selectedRow));

var shift =oModelCalc.getProperty("Shift",selectedRow);

//alert(shift);

oDropdownBox3.setValue(shift);

});

Regards

G.Partheeban

Hi Ria,

Can you help me out on this?

Regards

G.Partheeban

Hi Partheeban,

I tried your scenario and have a working example as shown below. In this example, there is a layout into which I have added a table and then a dropdownbox. Based on the row selected in the table, the value in the dropdownbox changes.

<!DOCTYPE html>

var olayout = new sap.ui.commons.layout.MatrixLayout({

id: "MATRIX", // sap.ui.core.ID,

width : "20%"

});

// create the DataTable control

var oTable = new sap.ui.table.Table({editable:true});

// define the Table columns

var oControl = new sap.ui.commons.TextView({text:"{Shift}"}); // short binding notation

oTable.addColumn(new sap.ui.table.Column({label: new sap.ui.commons.Label({text: "Shift"}), template: oControl, sortProperty: "Shift", filterProperty: "Shift", width: "20px"}));

// create some local data

var aData = [

{Shift: "A"},

{Shift: "B"},

{Shift: "C"}

];

// create a JSONModel, fill in the data and bind the Table to this model

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

oModelTable.setData({modelData: aData});

oTable.setModel(oModelTable);

oTable.bindRows("/modelData");

olayout.createRow(oTable);

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

oModel.setData({

Shift:[

{Shift:"A"},

{Shift:"B"},

{Shift:"C"}],

editable: true,

tooltip: "Shift"});

sap.ui.getCore().setModel(oModel);

//Drop down box definition

var oDropdownBox3 = new sap.ui.commons.DropdownBox("DropdownBox3");

oDropdownBox3.bindProperty("tooltip", "/tooltip");

oDropdownBox3.bindProperty("editable", "/editable");

oDropdownBox3.setWidth("50px");

oDropdownBox3.setModel(oModel);

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

oItemTemplate1.bindProperty("text", "Shift");

oItemTemplate1.bindProperty("enabled", "enabled");

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

olayout.createRow(oDropdownBox3);

oTable.attachRowSelectionChange(function(oEvent){

var i = oTable.getSelectedIndex() ;

var selectedRow = oTable.getContextByIndex(i);

//alert(selectedRow);

var shift =oModelTable.getProperty("Shift",selectedRow);

alert(shift);

oDropdownBox3.setValue(shift);

});

olayout.placeAt('content');

</script>

</head>

</body>

</html>

You can compare your code with the above example and do let me know if you have further questions.

Best Regards,

Ria

Hi Ria,

Your code is working fine for me... but my scenario is placing the DropDown box in different div.

Is that this causes the issue? Please check the code attached.Thanks...

Regards

G.Partheeban

Hi Partheeban,

I checked your code, and just modified the data bound to the table(with some static data) to get the example working for me - rest of your code is the same!

The value in the dropdownbox changes when I change row selection in the table. Please check the attached example code and let me know if you have any questions.

Best Regards,

Ria

Hi Ria,

I am not sure whats happening... when I execute your code its working...

but when I pass my data in oTable its not working...

I guess the oModel is problem. Since I am loading the data initially as below

var oModelCalc= new sap.ui.model.json.JSONModel("/XMII/Illuminator?QueryTemplate=HZL/LABRoasterCalcine/Call_StorProc&Param.19="+DateTime+" 00:00:00"+"&Param.20="+DateTime+" 23:59:59"+"&Content-Type=text/json");

oTableCalc.setModel(oModelCalc);

oTableCalc.bindRows("/Rowsets/Rowset/0/Row");

Regards

G.Partheeban

Hi Partheeban,

Sorry, I'm not sure why this is not working for you. But probably you can try something as shown below for binding model to the table.

var sUrl = <URL FOR DATA>

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

$.ajax({

type: 'GET',

url: sUrl,

success: function (data) {

var rows = data.Rowsets.Rowset[0].Row; //returns all the rows

oModel.setData({modelData: rows});

oTable.setModel(oModel);

oTable.bindRows("/modelData");

}

});

Best Regards,

Ria

Hi Ria,

I got something that...

When I pass a static query like

select 'A' as shift

union

select 'B' as shift

union

select 'C' as shift

then I am able to set the value.

If it is the data from the table then I am not able to....Please advice how to proceed.

Regards

G.Partheeban

Oh ok.. did you still try the code for binding model to table.

Sorry, I cannot think of anything else.

Best Regards,

Ria

Hi Ria,

Thanks for the help...

I tried in below way also,

var sUrl = <URL FOR DATA>

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

$.ajax({

type: 'GET',

url: sUrl,

success: function (data) {

var rows = data.Rowsets.Rowset[0].Row; //returns all the rows

oModel.setData({modelData: rows});

oTable.setModel(oModel);

oTable.bindRows("/modelData");

}

});

Is that the bug or how?

Is that working for you if you pass from query?

Can you please help with the below threads if you have any idea?

http://scn.sap.com/thread/3597797

Regards

G.Partheeban

Hi Partheeban,

It works for me even when I pass data to table using query.

What is the version of UI5 you are using..? I have 1.20.4 and it works for me.

I'll check your other question.

Best Regards,

Ria

Hi Ria,

I am using "1.22.4". Can you please share me the code?

Is that your using the tables to fetch the data.

see my code.

Regards

G.Partheeban

Hi Partheeban,

By "works with query" I meant that the scenario works when I pass data to table by making MII service call through AJAX. Please find attached the code for the same.

I'm not sure if this is what you are actually looking for. I still don't get why the same code doesn't work for you.

Best Regards,

Ria

Hi ria,

Thanks... but I am not able to solve.

Can you just check by creating table which returns the shift "ABC"?

Is that is a problem with the UI5 version?

Can you also answer the other thread if possible.

Regards

G.Partheeban

Sorry, I didn't get what you mean by table that returns shift "ABC".. ? Is it that you mean the value of shift for a row is "ABC".

Best Regards,

Ria

Hi Ria,

I have tested by just creating the table shift in the DB and in the table I am getting only shift "A,B,C".

When I tried to select and set the value I am not able to. But when I use

select 'A' as shift

union

select 'B' as shift

union

select 'C' as shift

I am able to. I dont know what is the difference between this two.

Please advice.

Regards

G.Partheeban

Maybe try the setSelectedKey or setSelectedItemId methods.

You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.

Comment

Ask a Question

Top Q&A Solution Author

User

Count