Kendo Combobox not clearing underlying model data MVC 4

4 posts, 1 answers
  1. Gordon
    Gordon avatar
    5 posts
    Member since:
    May 2013

    Posted 01 Jun 2013 Link to this post

    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

  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 05 Jun 2013 Link to this post

    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
    // 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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Gordon
    Gordon avatar
    5 posts
    Member since:
    May 2013

    Posted 10 Jun 2013 Link to this post

    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();
            }
    }

  5. Answer
    Gordon
    Gordon avatar
    5 posts
    Member since:
    May 2013

    Posted 10 Jun 2013 Link to this post

    Petur,

    I had to upgrade to 2013.1.514 to get it to work.
Back to Top
Kendo UI is VS 2017 Ready