How to Create Master-Detail ListBox (JSWindowsStoreAppMasterDetailListBox)

Introduction

This sample demonstrates how to create master-detail ListBox in Windows Store app through CollectionViewSource.

Build the Sample

1.       Start Visual Studio 2012 and select File > Open > Project/Solution.

2.       Go to the directory in which you download the sample. Go to the directory named for the sample, and double-click the Microsoft Visual Studio Solution(.sln) file.

3.       Press F7 or use Build > Build Solution to build the sample.

Running the Sample

1.       Press F5 to run it.

2.       After the sample is launched, the screen will display this.

3.       You can change the selection in each ListBox, the detail ListBox's items will change based on the selected item in master ListBox.

Using the Code

The code below shows how to Design the UI

HTML
Edit|Remove 

          
                

                        
<label>Countries:</label>

                        
                        <select id="countryselect" size="2">
                            <option value="1" selected="selected">Country1</option>
                            <option value="2">Country2</option>
                        </select>
                

                

                        
<label id="selectedContry">Country1</label>

                        
                        <select id="provinceselect" size="2">
                            <option value="1" selected="selected">Province1</option>
                            <option value="2">Province2</option>
                        </select>
                

                
           
 

Use the onactivated event handler to register our event handlers. The codes below show how to register the change event handler with the Select control

JavaScript
Edit|Remove 
app.onactivated = function (args) {
        if (args.detail.kind === activation.ActivationKind.launch) {
            if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
                // TODO: This application has been newly launched. Initialize
                // your application here.
            } else {
                // TODO: This application has been reactivated from suspension.
                // Restore application state here.
            }
            args.setPromise(WinJS.UI.processAll().then(function completed() {
                // Retrieve select
                var countryselect = document.getElementById("countryselect");
                var provinceselect = document.getElementById("provinceselect");
                var cityselect = document.getElementById("cityselect");


                // Register the event handler
                countryselect.addEventListener("change", countryChanged, false);
                provinceselect.addEventListener("change", provinceChanged, false);
                cityselect.addEventListener("change",cityChanged,false);
            }));
        }
    };
 

Change the value of select control when it change. The codes below show how to implement the event handler that we register in last step:

JavaScript
Edit|Remove 
function countryChanged(eventInfo) {


       objCountrySelect = document.getElementById("countryselect");
       objProvinceSelect = document.getElementById("provinceselect");


       var selectedCountry = objCountrySelect.options[objCountrySelect.selectedIndex].value;
       var selectedText = objCountrySelect.options[objCountrySelect.selectedIndex].text;


    
       // show selected Country
       document.getElementById("country").innerText = selectedText;
       document.getElementById("selectedContry").innerText = selectedText;


       if (selectedCountry == 1) {
           objProvinceSelect.innerHTML = "<select><option>Province1</option><option>Province2</option></select>";
           document.getElementById("province").innerText = objProvinceSelect.options[0].text;
           document.getElementById("selectedProvince").innerText = objProvinceSelect.options[0].text;


           // Select first item
           objProvinceSelect.options[0].selected = "selected";
           document.getElementById("city").innerText = "Province1 City1";
           fillCitySelect(objProvinceSelect.options[0].text);
       
       }
       else {
           objProvinceSelect.innerHTML = "<select><option>Province3</option><option>Province4</option></select>";
           document.getElementById("province").innerText = objProvinceSelect.options[0].text;
           document.getElementById("selectedProvince").innerText = objProvinceSelect.options[0].text;


           // Select first item
           objProvinceSelect.options[0].selected = "selected";
           document.getElementById("city").innerText = "Province3 City1";
           fillCitySelect(objProvinceSelect.options[0].text);
       }
   }


   function provinceChanged(eventInfo) {
       objProvinceSelect = document.getElementById("provinceselect");
       var selectedProviceText = objProvinceSelect.options[objProvinceSelect.selectedIndex].text;


       // show selected Country
       document.getElementById("province").innerText = selectedProviceText
       document.getElementById("selectedProvince").innerText = selectedProviceText;




       // Fill City Select
       fillCitySelect(selectedProviceText);
       document.getElementById("city").innerText = selectedProviceText + " City1";
   }


   function cityChanged(eventInfo) {
       objCitySelect = document.getElementById("cityselect");
       var selectedCityText = objCitySelect.options[objCitySelect.selectedIndex].text;


       // show selected Country
       document.getElementById("city").innerText = selectedCityText;
   }


   // Fill City Select
   function fillCitySelect(province) {      
       objCitySelect = document.getElementById("cityselect");
       objCitySelect.innerHTML = "<select><option>" + province + " City1" + "</option><option>" + province + " City2" + "</option><option>" + province + " City3" + "</option></select>";


       objCitySelect.options[0].selected = "selected";
   }
 

More Information

Create your first Windows Store app using JavaScript

http://msdn.microsoft.com/en-us/library/windows/apps/br211385.aspx

Layout and views (Windows Store apps using JavaScript and HTML)

http://msdn.microsoft.com/en-us/library/windows/apps/jj841108.aspx

Manage app lifecycle and state (Windows Store apps using JavaScript and HTML)

http://msdn.microsoft.com/en-us/library/windows/apps/hh986966.aspx