Telerik Kendo MVC Cascading Combobox Issue

Question

I'm having a problem with my Telerik Kendo MVC UI code. My code seems pretty cookie cutter, but when I put the '.CascadeFrom' property on the combobox it stops loading properly. It seems to be related to the fact that when I insert the definition of the javascript function it doesn't seem to register. I'm getting the following message in the

web developer console:

[08:19:25.006] ReferenceError: getCountyVal is not defined in /Employer/Details/1

I think I've isolated the problem to situations where I'm using the .CascadeFrom property or a javascript function; I've definitely been able to load when I don't require a javascript call or an input variable in the JSON returning server-side code.

Front End Code: (2 comboboxes, partial view in .cshtml file)

    <td>
        <p>
        @(Html.Kendo().ComboBox()
                .Name("countyselector")
                .Placeholder("Select County....")
                .DataTextField("NameStr")
                .DataValueField("CountyTypeID")
                .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("getCountyTypes", "Employer");
                        });
                    }
                )
                //.Events(e => { e.Select("onCountySelectorSelect"); })
            )
        </p>
    </td>
    <td>
        <p>
        @(Html.Kendo().ComboBox()
                .Name("countycityselector")
                .Placeholder("Select City / Area...")
                .DataTextField("NameStr")
                .DataValueField("CountyCityTypeID")
                .DataSource(source =>
                {
                    source.Read(read =>
                        {
                            read.Action("getCityAreas", "Employer")
                                .Data("getCountyVal");
                        }).ServerFiltering(true);
                }

                )
                .Enable(false)
                .AutoBind(false)
                .CascadeFrom("countyselector")
        )
        <script type="text/javascript">
            function getCountyVal() {
                return $("#countyselector").val();
            }
        </script>

Controller Code:

public JsonResult getCityAreas(int CountySel)
{
    // Return a set of CountyCityAreaTypeID's and their associated names based on a countyID.
    //return Json(db.vw_CountyCities.Where(x => x.CountyTypeId == Convert.ToInt16(CurrCountyValue))
    //            .Select(i => new { i.CountyCityAreatypeId, i.NameStr }), JsonRequestBehavior.AllowGet);
    var retval = Json(db.vw_CountyCities
                .Select(i => new { i.CountyCityAreatypeId, i.NameStr }), JsonRequestBehavior.AllowGet);
    return retval;
}

public JsonResult getCountyTypes()
{
    return Json(db.CountyTypes.Select(i => new { i.CountyTypeId, i.NameStr }), JsonRequestBehavior.AllowGet);
}

Answer 1

Please put below code snippet in beginning of the other code/markup.

JS

 <script type="text/javascript">
        function getCountyVal() {
            return {
                CountySel: $("#countyselector").data("kendoComboBox").input.val()
            };
        }
    </script>

OR

    <script type="text/javascript">
         function getCountyVal() {
             return {
                 CountySel: $("#countyselector").val()
             };
         }
    </script>