Visual Studio 2013 LightSwitch HTML Cascading Dropdowns

Question

I'm currently helping a small team create a HTML LightSwitch business app that has a tier of 4 Cascading dropdowns. These drop downs are linked together just as the common example of when you select your state it filters to cities only in that state. However, the issue that we have run into is that upon changing one of the parent boxes the child box doesn't reset or revert to a blank state. How would it be possible to accomplish, if possible, the clearing the child boxes upon parent change. Im pretty sure we need an OnChange event handler but I'm not sure where to put this in LightSwitch because it creates the code for you.

Any idea's or code snippets that are able to fix this problem would be appreciated.

Thank you in advance for the help,

Jeremy

Answer 1

I think you need a change listener event on page created method screen.addChangeListener("DropDown1",DropDown1Changed);

    function DropDown1Changed(e){
    screen.findContentItem("DropDown2").value ="";
   screen.findContentItem("DropDown3").value ="";
    };

I havent tested this code. But, something similar to this should work. This should give you general idea about the solution. Dont forget to remove the listener.

Answer 2

Use pop-ups based on Queries instead of drop-downs. Make the parameters for your queries optional where necessary. LightSwitch will then update the page definition as selections are made. This is because the binding of the popup data values is done at run-time, whereas the binding for controls rendered when the page loads is static.

Michael Washington gives a pretty good summary of the technique in this article.