We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Hide Div upon loading of Drop down list

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.


3 Replies

KR Keerthana Rajendran Syncfusion Team August 24, 2017 09:37 AM UTC

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:   
   
   
   
Regards,      
Keerthana.   
 



AJ Andrew Jang August 24, 2017 04:02 PM UTC

Nice, It works!

Thank you very much for your help!



KR Keerthana Rajendran Syncfusion Team August 25, 2017 04:30 AM UTC

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon