populating textboxes based on selection of kendo combo box - kendo-ui

Question

I need to populate two textbox controls based on a selection of combo box in my MVC 5 application. The combo box is a kendo MVC control. The values that need to be assigned to the text box controls are there in the collection that is bound to the combo box control. Could somebody let me know how to go about it. Does this need to be handled in javascript/ jquery or is it handled in kendo combo box events. An example would be great.
Combo box
#Html.LabelFor(model => model.Name1, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-4">
<div class="editor-field">
#(Html.Kendo().ComboBoxFor(model => model.Name1)
.HtmlAttributes(new { style = "width:300px" })
.DataTextField("Name1")
.DataValueField("CustomerMasterDataId")
.DataSource(dataSource => dataSource
.Read(read => read.Action("RequestHeader_CustomerData", "Request").Type(HttpVerbs.Post))
)
)
</div>
#Html.ValidationMessageFor(model => model.CustomerNumber, "", new { #class = "text-danger" })
</div>
Textbox
<div class="form-group">
#Html.LabelFor(model => model.CustomerNumber, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
<div class="editor-field">
#Html.EditorFor(model => model.CustomerNumber, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.CustomerNumber, "", new { #class = "text-danger" })
</div>
</div>
<div class="clearfix"></div>
<div class="form-group">
#Html.LabelFor(model => model.CustomerGroup, htmlAttributes: new { #class = "control-label col-md-4" })
<div class="col-md-6">
<div class="editor-field">
#Html.EditorFor(model => model.CustomerGroup, new { htmlAttributes = new { #class = "form-control" } })
</div>
#Html.ValidationMessageFor(model => model.CustomerGroup, "", new { #class = "text-danger" })
</div>
</div>
Controller method that poulates the combo
public ActionResult RequestHeader_CustomerData()
{
var response = requestRepository.GetCustomerData().AsQueryable().ProjectTo<CustomerViewModel>();
var jsonResult = Json(response, JsonRequestBehavior.AllowGet);
jsonResult.MaxJsonLength = int.MaxValue;
return jsonResult;
}
Please note that the CustomerNumber and Name1 field would be used to populate the text boxes
ViewModel
public class CustomerViewModel
{
public int CustomerMasterDataId { get; set; }
public int CustomerNumber { get; set; }
[Display(Name = "Customer Name")]
public string Name1 { get; set; }
[Display(Name = "Customer Group")]
public string CustomerGroup { get; set; }
}

Answer 1

Yes, handle the change event:
#(Html.Kendo().ComboBoxFor(model => model.Name1)
.HtmlAttributes(new { style = "width:300px" })
.DataTextField("Name1")
.DataValueField("CustomerMasterDataId")
.DataSource(dataSource => dataSource
.Events(e => e.Change(onComboChange))
.Read(read => read.Action("RequestHeader_CustomerData", "Request").Type(HttpVerbs.Post))
)
)
Now handle it in js:
#section scripts
{
<script type="text/javascript">
function onComboChange(e) {
var dataItem = e.sender.dataItem();
if (dataItem) {
//set the value of text box (input)
$("#CustomerNumber").val(dataItem.CustomerNumber);
$("#CustomerGroup").val(dataItem.CustomerGroup);
};
};
</script>
}
Here is a js equivalent: http://jsfiddle.net/sg53719/74LwhebL/1/