ASP.NET MVC razor DropDownList doesn't show the KendoGrid

Question

I have an ASP.NET MVC DropDownList:

@{var selectionList = new List<SelectListItem>
         {
          new SelectListItem { Text = "All Patients", Value="All Patients" },
          new SelectListItem { Text = "Chosen Patients", Value="Chosen Patients" }         
         };

        }
        @Html.DropDownList("Selection",new SelectList(selectionList,"Value","Text"))

I have also a KendoGrid that should be hided before click on the list item: "Chosen Patients":

<script type="text/javascript"> 
    $('#CheckedPatientsRep').hide();
</script>

This is KendoGrid:

 @(Html.Kendo().Grid<RunSummary>()
          .Name("CheckedPatientsRep")          
          //.Events( events => events.DataBinding("onDataBinding"))
          .DataSource(datasource => datasource
                .Ajax().PageSize(25)        
                .ServerOperation(false)
                .Sort(sort => sort.Add("UniqueId").Ascending())                        
                .Read(read => read.Action("GetRunSummaries", "PatientReport")))               

          .Columns(columns =>
              {

etc. I would like to show the KendoGrid after click on "Chosen Patients" in the DropDownList. This is my code for click:

<script>
    $("#Selection").click(function () {
        var selectedValue = $(this).find('option:selected').val();
        if (selectedValue.toLower() == "chosen patients") {            
            $('#CheckedPatientsRep').show();
        }
    });
</script>

I have two problems: the KendoGrid is not hided at first, and the second is that the click doesn't work. How to solve this? Thank you in advance for any help.

Answer 1

Everything is ok now :). I only put the code

<script type="text/javascript">
    $('#CheckedPatientsRep').hide();
</script>

before KendoGrid. The code for click also works, except it should use the function toLowerCase() instead of toLower().