Hide Div upon loading of Drop down list

[Andrew Jang]

Hello there, I have the following drop down list in my frontend code:

@Html.EJ().DropDownList("schoolStatusList").Datasource((IEnumerable<ELLBooking.Models.ControlInfo>)Model.Where(m => m.ControlName == "SchoolStatus").ToList()).DropDownListFields(df => df.ID("ControlID").Text("ControlValue").Value("ControlValue")).Value(Model.Where(m => m.ControlID == ViewBag.datasource.PreviousSchoolStatus.ToString()).Select(m => new { m.ControlValue }).Single().ControlValue.ToString()).ClientSideEvents(evt => evt.Change("onChange"))

I have a Javascript function to hide div id = wDate1 and wDate2 (shown below) .

It only works after the form is fully loaded, and when I change the value of the drop down list manually.

<script>

    function onChange(args)

    {  

        if (args.text == "Withdrawn")

        {

            $("#wDate1").show();

            $("#wDate2").show();

        }

        else

        {

            $("#wDate1").hide();

            $("#wDate2").hide();

        }

    }

</script>

What is still missing is that if the dropdown list's value is "Withdrawn" upon loading, I need to hide wDate1 and wDate2 divs after rendering.

[Keerthana Rajendran]

Hi Andrew   

   

Thank you for contacting Syncfusion Support.   

   

Change event will be triggered only when the value of DropDownList is changed.    

   

You can show or hide the wDate1 and wDate2 upon loading by checking the value in create event of DropDownList as shown below    

   

@Html.EJ().DropDownList("schoolStatusList").Datasource((IEnumerable<ELLBooking.Models.ControlInfo>)Model.Where(m => m.ControlName == "SchoolStatus").ToList()).DropDownListFields(df => df.ID("ControlID").Text("ControlValue").Value("ControlValue")).Value(Model.Where(m => m.ControlID == ViewBag.datasource.PreviousSchoolStatus.ToString()).Select(m => new { m.ControlValue }).Single().ControlValue.ToString()).ClientSideEvents(evt => evt.Change("onChange").Create("oncreate"))   

   

function oncreate(args) {   

   

            if (args.model.value == "Withdrawn")    

          {   

                $("#wDate1").show();   

                $("#wDate2").show();   

            }   

            else {   

                $("#wDate1").hide();   

                $("#wDate2").hide();   

            }   

        }   

   

We have attached a sample for your reference. Please download the sample from:   

   

http://www.syncfusion.com/downloads/support/forum/132271/ze/DropDownList-835438443.zip   

   

   

Regards,      

Keerthana.   

 

[Andrew Jang]

Nice, It works!

Thank you very much for your help!

[Keerthana Rajendran]

Hi Andrew, 

 

Thanks for your update. We are glad to hear that our suggestion resolved your issue. Please get back to us if you require further assistance on this. We will be happy to assist you 

 

Regards, 

Keerthana.