Kendo Combobox not clearing underlying model data MVC 4

[Gordon]

I am using Kendo()comboBox(). I cannot get the change event of CustomerId comboBox  to clear StateAbbreviation comboBox

<div class="SectionBoxGradient" style="padding: 10px">
    @using (@Html.BeginForm("AddCustomer", "TotalvCRM", FormMethod.Post, new{id="CustomerForm"}))
    {

        <table>
            <tr>
                <td class="FieldLabel"><input type="hidden" id="CustomerName" name="CustomerName"/>@Html.LabelFor(model => model.CustomerName):</td>
                <td>@(Html.Kendo().ComboBox().Name("CustomerId").DataTextField("Text").DataValueField("Value").BindTo(Model.Customers).Placeholder("-- Select a Customer --")) </td>
                <td class="FieldLabel">@Html.LabelFor(model => model.CustomerId):</td>
                <td class="FieldLabel" style="text-align: left;"><input type="text" id="lblCustomerId" value="@Model.CustomerId" style="background: #569bbe; border:none;" disabled="disabled"/></td>
                <td class="FieldLabel"><label id="labelCreateDate" title="CreateDate"></label></td>
            </tr>
            <tr>
                <td class="FieldLabel">@Html.LabelFor(model => model.Address1)</td>
                <td>@Html.TextBoxFor(model => model.Address1,new{tabindex="2"})
                    @Html.ValidationMessageFor(model => model.Address1)</td>
                <td class="FieldLabel">@Html.LabelFor(model => model.BusinessPhoneNumber)</td>
                <td>@Html.TextBoxFor(model => model.BusinessPhoneNumber,new{tabindex="7"})</td>
                <td class="FieldLabel" style="text-align: left;"><label id="labelAssignedReps" title="Assigned Representitive" >Assigned Representatives:</label></td>
            </tr>
            <tr>
                <td class="FieldLabel">@Html.LabelFor(model => model.Address2)</td>
                <td>@Html.TextBoxFor(model => model.Address2,new{tabindex="3"})</td>
                <td class="FieldLabel">@Html.LabelFor(model => model.FaxPhoneNumber):</td>
                <td>@Html.TextBoxFor(model => model.FaxPhoneNumber, new { tabindex = "8" })</td>
                <td rowspan="3">@Html.ListBox("AssignedReps",Model.AssignedReps, new{disabled = "disabled", style = "width:100px"})</td>
            </tr>
            <tr>
                <td class="FieldLabel">@Html.LabelFor(model => model.City)</td>
                <td>@Html.TextBoxFor(model => model.City, new{tabindex = "4"})
                    @Html.ValidationMessageFor(model => model.City)</td>
                <td class="FieldLabel">@Html.LabelFor(model => model.WebUrl):</td>
                <td>@Html.TextBoxFor(model => model.WebUrl, new { tabindex = "9" })</td>
            </tr>
            <tr>
                <td class="FieldLabel"><label id="labelState" title="State">State:</label></td>
                <td> @(Html.Kendo().ComboBox()
                        .Name("StateAbbreviation")
                        .DataTextField("Text")
                        .DataValueField("Value")
                        .Filter(FilterType.Contains)
                        .DataSource(source => source.Read(read => read.Action("GetStatesList", "List")))
                        .Placeholder("-- Select a State --"))</td>
                <td class="FieldLabel"></td>
                <td></td>
            </tr>
            <tr>
                <td class="FieldLabel">@Html.LabelFor(model => model.ZipCode)</td>
                <td>@Html.TextBoxFor(model => model.ZipCode, new{tabindex="6"})
                    @Html.ValidationMessageFor(model => model.ZipCode)</td>
                <td></td>
                <td></td>
                <td>
                    @if (Model.CustomerId == 0)
                     { <a href=@Url.Action("AssignReps", "TotalvCRM", new { id = Model.CustomerId}) id="lnkAssignRepsAction" disabled = "disabled" class="button" >Assign Reps...</a> }
                     else
                     {<a href=@Url.Action("AssignReps", "TotalvCRM", new { id = Model.CustomerId }) id="lnkAssignRepsAction" class="button">Assign Reps...</a>}
                </td>
            </tr>
            <tr>
                <td class="FieldLabel"><label id="labelNotes" title="Notes" >Notes:</label></td>
                <td colspan="3">@Html.TextAreaFor(model => model.Note, new { @cols = "75", @rows = "5", tabindex = "11" })</td>
                <td>
                    <table>
                        <tr>
                            <td class="FieldLabel" style="text-align: left;"><label id="labelCustomerCategories" title="CustomerCategories" >Customer Categories:</label></td>
                        </tr>
                        <tr>
                            <td>@Html.ListBox("CustomerCategories", Model.CustomerCategories, new { disabled = "disabled", style = "width:100px" })</td>
                        </tr>
                        <tr>
                            <td>@if (Model.CustomerId == 0)
                     { <a href=@Url.Action("CustomerCategories", "TotalvCRM", new { id = Model.CustomerId}) id="lnkCustomerCategories" disabled = "disabled"  class="button" >Customer Categories...</a> }
                     else
                     {<a href=@Url.Action("CustomerCategories", "TotalvCRM", new { id = Model.CustomerId }) id="lnkCustomerCategories"  class="button">Customer Categories...</a>} </td>
                        </tr>
                    </table>

                </td>
            </tr>
            <tr>
                <td colspan="4" >
                    <a href="JavaScript:void(0);" onclick="formSubmit();"  class="button">Add Customer</a>
                    @if (Roles.IsUserInRole("Administrator") || Roles.IsUserInRole("Manager"))
                    {
                                <a href="javascript:void(0);" onclick="DeleteCustomer()"  class="button">Delete Customer</a>
                    }
                     @if (Model.CustomerId == 0)
                      {
                          <a href="@Url.Action("UploadCustomerFile", "TotalvCRM", new {id= Model.CustomerId })" disabled="disabled"  class="button">Add Attachment</a>
                      }
                      else
                      {
                          <a href="@Url.Action("UploadCustomerFile", "TotalvCRM", new { id = Model.CustomerId })"  class="button">Add Attachment</a>
                      }
                     @Html.ActionLink("Export To Excel...", "ExportCustomersToExcel", null,new{@class="button"})
                </td>
            </tr>
        </table>
    }
</div>

Here is the Jquery:

var customerCombobox = $("#CustomerId").kendoComboBox();
customerCombobox.bind("change", function (e) {
    var customerId = this.value;
    var stateAbbreviation = $("#StateAbbreviation");

    if (!$.isNumeric(customerId)) {
        //$("#CustomerId").val(this.value);
        $("#CustomerName").val(this.value);
        $("#lblCustomerId").val("0");
        $("#Address1").val('');
        $("#Address2").val('');
        $("#City").val('');
        $("#ZipCode").val('');
        $("#WebUrl").val('');
        $("#CustomerTypeId").val('');
        $("#BusinessPhoneNumber").val('');
        $("#FaxPhoneNumber").val('');
        $("#AssignedReps").val('');
        stateAbbreviation.val('');


    } else {
        window.location = '/Controller/Customer/' + this.value;
    }
});

var $stateAbbreviation = $("#StateAbbreviation").kendoComboBox();
$stateAbbreviation.bind("change", function(e) {
    e.preventDefault();
});

Here is the model:

[NotMapped]
public class EditCustomer
{
    #region Customer Attributes

    public int CustomerId { get; set; }

    [Display(Name = "Customer Name")]
    [StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]
    public string CustomerName { get; set; }

    [Display(Name = "Type")]
    public int? CustomerTypeId { get; set; }

    [Display(Name = "Web Site")]
    public string WebUrl { get; set; }

    [Display(Name = "Group")]
    public string Group { get; set; }

    public string Note { get; set; }

    #endregion

    #region Address Attributes

    [Display(Name = "Address Id:")]
    public int AddressId { get; set; }

    [Display(Name = "Address Type:")]
    public CRMAddressType AddressType { get; set; }

    [StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]
    [Display(Name = "Address 1:")]
    public string Address1 { get; set; }

    [StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]
    [Display(Name = "Address 2:")]
    public string Address2 { get; set; }

    [StringLength(100, ErrorMessage = "The {0} must be less than 100 characters long.")]
    [Display(Name = "City:")]
    public string City { get; set; }

    [Display(Name = "State:")]
    [StringLength(2, ErrorMessage = "The {0} must be 2 characters long.")]
    public string StateAbbreviation { get; set; }

    [StringLength(10, ErrorMessage = "The {0} must be less than 10 characters long.")]
    [Display(Name = "ZipCode:")]
    public string ZipCode { get; set; }

    #endregion

[Petur Subev]

Hello Gordon,

There are several problems with your code. I have added comments to the lines

var customerCombobox = $("#CustomerId").kendoComboBox(); //to get the client object you need to either use
// 1) .data('kendoComboBox');
// 2) .getKendoComboBox; //if using latest version

customerCombobox.bind("change", function (e) {
    var customerId = this.value; //to get the value you need to use the value method, there is not such field called value
    var stateAbbreviation = $("#StateAbbreviation");

    if (!$.isNumeric(customerId)) {
        //$("#CustomerId").val(this.value);
        $("#CustomerName").val(this.value);
        $("#lblCustomerId").val("0");
        $("#Address1").val('');
        $("#Address2").val('');
        $("#City").val('');
        $("#ZipCode").val('');
        $("#WebUrl").val('');
        $("#CustomerTypeId").val('');
        $("#BusinessPhoneNumber").val('');
        $("#FaxPhoneNumber").val('');
        $("#AssignedReps").val('');
        stateAbbreviation.val('');


    } else {
        window.location = '/Controller/Customer/' + this.value;
    }
});

var $stateAbbreviation = $("#StateAbbreviation").kendoComboBox(); //same problem as above
$stateAbbreviation.bind("change", function(e) {
    e.preventDefault();
});

Kind Regards,
Petur Subev
Telerik

[Gordon]

Petur,

I had to upgrade to 2013.1.514 to get it to work.

<td>@(Html.Kendo()
                    .ComboBox()
                    .Name("CustomerId")
                    .DataTextField("Text")
                    .DataValueField("Value")
                    .BindTo(Model.Customers)
                    .Placeholder("-- Select a Customer --")
                    .Events(e => e.Change("onChange")))</td>

function onChange() {
    var $elem = $("#CustomerId").data("kendoComboBox");
        var customerId = $elem.value();
        var stateAbbreviation = $("#StateAbbreviation").data("kendoComboBox");
        var customerContacts = $("#customerContacts");

        if (!$.isNumeric(customerId)) {
            $("#lblCustomerId").val("0");
            $("#Address1").val('');
            $("#Address2").val('');
            $("#City").val('');
            $("#ZipCode").val('');
            $("#WebUrl").val('');
            $("#CustomerTypeId").val('');
            $("#BusinessPhoneNumber").val('');
            $("#FaxPhoneNumber").val('');
            $("#AssignedReps")[0].options.innerHTML = '';
            $("#CustomerCategories")[0].options.innerHTML = '';
            stateAbbreviation.value(null);
            customerContacts[0].innerHTML = '';
        } else {
            window.location = '/TotalvCRM/Customer/' + $elem.value();
        }
}

[Gordon]

Petur,

I had to upgrade to 2013.1.514 to get it to work.