Limit entered text to combobox datasource

Question

I am trying to set up my MVC 5 app so that Users cannot enter a value that doesn't appear in the dropdown list.

I found the following solution,JSFiddle Here ,but I am having great difficulty translating this into Razor Syntax.

Below is what I have so far. What I cannot figure out is how to get the "datasource" to check against.

<div class="form-group">
        @Html.LabelFor(model => model.loadType, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @(Html.Kendo().ComboBox()
                    .Name("loadType")
                    .Filter(FilterType.Contains)
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(Model.LoadTypes)
                    .Suggest(true)
            )
            @Html.ValidationMessageFor(model => model.loadType)
        </div>
    </div>

    <div class="form-group">
        @Html.LabelFor(model => model.loadDescrip, new { @class = "control-label col-md-2" })
        <div class="col-md-10">
            @(Html.Kendo().ComboBox()
                    .Name("loadDescrip")
                    .Filter(FilterType.Contains)
                    .DataTextField("DocCode")
                    .DataValueField("DocCode")
                    .DataSource(source =>
                    {
                        source.Read(read =>
                        {
                            read.Action("GetCascadeDocumentNumbers", "DockDoor")
                                .Data("filterLoadDescription");
                        })
                      .ServerFiltering(true);
                    })
                    .Enable(false)
                    .AutoBind(false)
                    .CascadeFrom("loadType")
                    .Events(e =>
                        {
                            e.Change("onChange");
                        })
            )
            @Html.ValidationMessageFor(model => model.loadDescrip)
        </div>
    </div>


    function onChange() {
    var lT = $("#loadType").data("kendoComboBox").input.val();
    if (lT != "Generic") {
        var lD = $("#loadDescrip").data("kendoComboBox").input.val();

        // Here I need to compare 'lD' to what is populated in the comboBox dropdown
        var combobox = $("#loadDescrip").data("kendoComboBox");

        //this is for Testing purposes only
        alert(lD +" " + lT);
    }
};

Answer 1

You can get the DataSource for any Kendo widget off the widget's .dataSource property. So for example:

var loadDescripDataSource = $("#loadDescrip").data("kendoComboBox").dataSource;

From there you can call .view() on the DataSource to get the array of items in the datasource, then loop over them to find what you need.