locked
HTML Cascading Drop Down Lists RRS feed

  • Question

  • I have been working on a Cascading Lists based on Multiple Tables as explained by Beth Massi’s blog (https://blogs.msdn.microsoft.com/bethmassi/2012/01/12/creating-cascading-drop-down-lists-in-visual-studio-lightswitch/). Everything works as explained but still I cannot make the app to clear the city when the state changes neither using the State_Changed method, that by the way in a Multiple Tables approach the State_Changed it is not available at the Customer due to the fact that the Customer entity only contains the Id, CustomerName, and related City fields.

    Please advise how to build the relationships that will allow to clear the child field whenever the parent selection changes.

    Thank you.

    Wednesday, April 13, 2016 3:06 AM

Answers

  • Thank you, it perfectly works. You are the best Weiwei Cai. Best Regards.
    • Marked as answer by LEAM.MX Thursday, May 5, 2016 11:44 AM
    Thursday, May 5, 2016 11:44 AM

All replies

  • Never succeeded on what you ask maybe you can find something helpful here

    Reset Cascading issue

    Hope this helps you!

    Wednesday, April 13, 2016 9:18 AM
  • To clear the dependent picker on change of another picker you would use dataBind as in the above linked thread.  Although this does indeed set the contentItem value to null, there is a bug in msls-2.5.1 and before which prevents the picker search input box from clearing - the UI isn't updated so it appears not to work - but if you close the screen an go back in you will see that it did indeed clear the dependent picker.  This bug was fixed in msls-2.5.2.

    More info here:

    https://social.msdn.microsoft.com/Forums/vstudio/en-US/1aaed7d6-6fd8-472f-bd63-03b22992e6dd/how-to-call-clear-button-of-html-details-picker-control-programmaticaly?forum=lightswitch

    HTH,

    Josh

    • Proposed as answer by Angie Xu Thursday, April 21, 2016 2:30 AM
    • Marked as answer by Angie Xu Thursday, April 21, 2016 2:30 AM
    • Unmarked as answer by LEAM.MX Saturday, April 23, 2016 1:18 AM
    • Unproposed as answer by Weiwei CaiModerator Tuesday, April 26, 2016 10:07 AM
    Wednesday, April 13, 2016 2:04 PM
  • Mr. Booker, Could you please show it as a walkthrough? Regards.
    Saturday, April 23, 2016 1:22 AM
  • Do you have tried the code in the link that joshbooker provided?
    Monday, April 25, 2016 10:14 AM
  • Hi LEAM.MX,

    Please try add a AddEventListener for Details Picker which can help us monitor the Details Modal Picker when it changed.

    For example, if I have a Cascading Drop Down Lists which use to choose Province and City. I will add a AddEventListener for the Province Details Picker and when its value changed, I will clear the content in City Details Picker. Please refer to following code.

     screen.addChangeListener("SelectedProvince", function () {
           // clear city content    });


    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Tuesday, April 26, 2016 10:57 AM
    Moderator
  • Thank you for your help. Yes, I do tried the code that Josh provided, but still I am trying to figure it out how it works. Regards.
    Tuesday, April 26, 2016 2:57 PM
  • Thank you so much, seems easier. Where exactly do I call for this method?
    Tuesday, April 26, 2016 3:00 PM
  • Hi LEAM.MX,

    Please add that code in your screen's created method, which is similar with following code.

    myapp.AddEditCustomer.created = function (screen) {
        // Write code here.
        screen.addChangeListener("SelectedProvince", function () {
           
    };
    

    Please select your screen and choose the created under the Write Code menu.

    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    • Proposed as answer by Angie Xu Thursday, April 28, 2016 8:38 AM
    Wednesday, April 27, 2016 10:05 AM
    Moderator
  • Weiwei Cai, sorry for annoying but I do not know what I am doing wrong here is what I have in the Screens\Customers\AddEditCustomer1.lsml.js file and at the end what you suggested:

    /// <reference path="~/GeneratedArtifacts/viewModel.js" />
    
    myapp.AddEditCustomer1.columns_postRender = function (element, contentItem) {
    
        // Display Initial Values
        var CustomerName = contentItem.value.CustomerName;
        var City = contentItem.value.City
     
        var InitialValues = 'Initial Values:'
                                + ' CustomerName = '
                                + CustomerName
                                + ' City = '
                                + City;
                              
        toastr.info(InitialValues);
    
        // Binding to only the CustomerName property
        contentItem.dataBind("value.CustomerName", function (newValue) {
    
            var newCustomerName = newValue;
    
            var updatedCustomerNameOnly = 'Updated CustomerNameOnly: '
                                        + newCustomerName;
    
            toastr.info(updatedCustomerNameOnly);
        });
    
        // Binding to City is Changed property
        contentItem.dataBind("value.details.properties.City.isChanged", function (newValue) {
    
            var isChangedCity = 'City.isChanged: '
                                    + newValue;
    
            toastr.info(isChangedCity);
        });
    };
    
    myapp.AddEditCustomer1.created = function (screen) {
    
        screen.addChangeListener("SelectedState", function () {
    
        })
    };

    As you can see in the following image the Toastr is working but still it is not clearing when the State changes. I really appreciate your kind help.



    • Edited by LEAM.MX Thursday, April 28, 2016 7:42 PM
    Thursday, April 28, 2016 7:41 PM
  • Hi LEAM.MX,

    According to your code, you just add a listener for the SelectedStates but don't operate the City Choice list.

    Please add following code in the AddChangeListener method to clear the previous selected City.

    myapp.AddEditCustomer.created = function (screen) {
    
        screen.addChangeListener("SelectedState", function() {
            screen.Customer.City = null;
    
        });
    
    };
    Best Regards,
    Weiwei


    We are trying to better understand customer views on social support experience, so your participation in this interview project would be greatly appreciated if you have time. Thanks for helping make community forums a great place.
    Click HERE to participate the survey.

    Thursday, May 5, 2016 9:50 AM
    Moderator
  • Thank you, it perfectly works. You are the best Weiwei Cai. Best Regards.
    • Marked as answer by LEAM.MX Thursday, May 5, 2016 11:44 AM
    Thursday, May 5, 2016 11:44 AM