Multiple Drop-downs on same page


#1

I have a page with 2 native script-drop-down’s the content of the second is driven by the selection from the first. However when the second one is bound to data, it overwrites the first, but doesn’t show any selections. I have ensured I have unique names/id/selectonchanged text but still have an issue.

<Page class="page" xmlns="http://www.nativescript.org/tns.xsd" navigatingTo="onNavigatingTo" xmlns:dd="nativescript-drop-down">
	<ActionBar title="Settings" class="action-bar"></ActionBar>
	<ScrollView>
		<StackLayout class="home-panel" verticalAlignment="top">
			<GridLayout columns="*, 60" rows="80,40,40,40,40,60" width="100%" borderWidth="0px">
				<Label text="Show future games only" row="0" col="0" colSpan="1" />
				<Switch checked="true" row="0" col="3" />
				<Label text="Choose your Division" row="1" col="0" colSpan="1" />
				<dd:DropDown id="mydiv" color="black" width="100%" horizontalAlignment="center" borderWidth="1px" backgroundColor="white" items="{{ divList }}" 
				selectedIndex="{{ selectedDivIndex }}" selectedIndexChanged="dropDownSelectedIndexChanged" row="2" colSpan="2" />
				<Label text="Choose your Team" row="3" col="0" colSpan="1" />
				<dd:DropDown id="teampicker" color="black" width="100%" horizontalAlignment="center" borderWidth="1px" backgroundColor="white"
				 items="{{ teamList }}" selectedIndex="{{ selectedTeamIndex }}" row="4" colSpan="2" />
				<Button text="Continue" tap="{{ onButtonTap }}" row="5" col="0" colSpan="2" height="200px" width="60%" borderWidth="1px" marginTop="100px"
				/>
			</GridLayout>
		</StackLayout>
	</ScrollView>
</Page>

JS File is

var http = require("http");
const fromObject = require("data/observable").fromObject;

function onNavigatingTo(divargs) {
  global.divList = ['','Monday Div 1', 'Monday Div 2', 'Wednesday Div 1', 'Wednesday Div 2'];
  var divsource = fromObject({
    items: divList
  });
  divsource.set("divList", divList);
  const divpage = divargs.object;
  divpage.bindingContext = divsource;
}
exports.onNavigatingTo = onNavigatingTo;
function dropDownSelectedIndexChanged(teamargs) {
  var myDiv = global.divList[teamargs.newIndex];
  var shortDiv;
  if (myDiv == "Monday Div 1") {
    shortDiv = "mon_1";
  }
  else if (myDiv == "Monday Div 2") {
    shortDiv = "mon_2";
  }
  else if (myDiv == "Wednesday Div 1") {
    shortDiv = "wed_1";
  }
  else if (myDiv == "Wednesday Div 2") {
    shortDiv = "wed_2";
  }
  if (shortDiv != "") {
    var sqlstr = "myURL" + shortDiv;
    http.getJSON(sqlstr).then(function (r) {
      //alert(JSON.stringify(r));
      var jsonArray = JSON.parse(JSON.stringify(r));
      global.teamList = "['',"
      for (i = 0; i < jsonArray.length; i++) {
        var team = jsonArray[i].team;
        global.teamList = global.teamList + "'" + team + "',";
      }
      global.teamList = global.teamList + "]"
      var teams = global.teamList.replace(",]", "]");
      //alert(teams);
      var teamsource = fromObject({
        items: teams
      });
      teamsource.set("teamList", teams);
      const teampage = teamargs.object;
      teampage.bindingContext = teamsource;
    }, function (e) {
      alert(e);
    });
  }
}
exports.dropDownSelectedIndexChanged = dropDownSelectedIndexChanged;

I have replaced the URL to my web service for security.

When teampage.bindingContext = teamsource; applies, the first drop-down is overwritten and no data is display. I have testing the returning JSON and the data is there.


#2

There is no issue with showing multiple DropDown at same page, I can confirm that. But in some cases there is issue with retaining the selected item when spinner is opened in iOS (it should not affect the selected item being displayed in label).

If you are facing a different issue please try to elaborate with more details like which platform you are facing the issue, when exactly it happens etc.,


#3

I’m using playground for NativeScript and running the app via Playground on iOS for design and testing.

If I change the fist drop-down to select the Division, this then calls a web service that return JSON. I want to write the teams associated with that division into the second drop-down and this is where the problem lies. The first drop-down goes blank and nothing is written to the second drop-down so there is nothing to select.


#4

Is it possible to share the playground link where we can see the issue.


#5

I cannot see an option to share a project. All I have is New, QR Code, Save, Fork or Download. I thought there was a share option somewhere.


#6

Save is what saves your changes and generates a link that can be shared. You must take a close look to the guides shown on first launch :wink:


#7

Sorry yes, I was looking for a share menu option.

I have PM you the link.


#8

Hi Guys, any solutions on this ?


#9

@Konrad It was a bug with @mrwrighty code, the plugin works great still. To be more precise, he just missed to set the right source for dropdown in the view model.


#10

@manojdcoder thx for this info. You are doing awesome work on this forum bro !