Bind DataSource in my Grid in my ViewModel - asp.net-mvc

Question

I have my app MVC Asp.net using MVVM. I am trying to bind my grid to my ViewModel but it doesn't work. This is my sample:
My ViewModel ...
var CompanyViewModel = kendo.observable({
container: null,
tabGeneral_tbx_NamelId: "tabGeneral_tbx_Name",
tabGeneral_tbx_AddresslId: "tabGeneral_tbx_Address",
tabContactPerson_tbx_namelId: "tabContactPerson_tbx_name",
tabContactPerson_tbx_lastNamelId: "tabContactPerson_tbx_lastName",
tabContactPerson_tbx_phoneNumberlId: "tabContactPerson_tbx_phoneNumber",
tabContactPerson_tbx_workStationlId: "tabContactPerson_tbx_workStation",
tabContactPerson_tbx_emaillId: "tabContactPerson_tbx_email",
name: null,
address: null,
contactPerson_name: null,
contactPerson_lastName: null,
contactPerson_phoneNumber: null,
contactPerson_workStation: null,
contactPerson_email: null,
contactPersons: new kendo.data.DataSource(),
employees: [],
init: function (container) {
this.container = container;
kendo.bind(document.body.children, this);
this.createGridContactPersons();
//this.createTextBox();
this.bindKendoUIWidgets();
},
bindKendoUIWidgets: function () {
kendo.bind($("#grid_contactPerson"), this.contactPersons);
//kendo.bind($("#" + this.tabContactPerson_tbx_namelId), this.contactPerson_name);
},
createGridContactPersons: function () {
$("#grid_contactPerson").kendoGrid({
datasource: {
//data: new kendo.data.DataSource({ data: this.contactPersons }),
schema: {
model: {
fields: {
name: { type: "string" },
lastName: { type: "string" },
phoneNumber: { type: "string" },
workStation: { type: "string" },
email: { type: "string" }
}
}
}
},
autobind: true,
columns: [{
field: "name",
title: "Nombre",
width: 150
}, {
field: "lastName",
title: "Apellidos",
width: 270
}, {
field: "phoneNumber",
title: "Teléfono",
width: 160
}, {
field: "workStation",
title: "Puesto de Trabajo",
width: 270
}, {
field: "email",
title: "Email"
}]
});
},
createTextBox: function () {
$("#" + this.tabContactPerson_tbx_namelId).kendoText();
},
click_btnAddPersonContact: function (e) {
this.get("contactPersons").add({
name: this.get("contactPerson_name"),
lastName: this.get("contactPerson_lastName"),
phoneNumber: this.get("contactPerson_phoneNumber"),
workStation: this.get("contactPerson_workStation"),
email: this.get("contactPerson_email")
});
//this.get("contactPersons").push({
// name: this.get("contactPerson_name"),
// lastName: this.get("contactPerson_lastName"),
// phoneNumber: this.get("contactPerson_phoneNumber"),
// workStation: this.get("contactPerson_workStation"),
// email: this.get("contactPerson_email")
//});
//var grid = $("#grid_contactPerson").data("kendoGrid");
//grid.dataSource.data(this.contactPersons);
//grid.dataSource.fetch();
}
My View ...
section scripts
{
<script src="~/Content/js/Company.js"></script>
<script type="text/javascript">
$(document).ready(function () {
CompanyViewModel.init();
});
</script>
}
<div class="row">
<div class="form-group">
<label for="tabContactPerson_lbl_name" class="col-sm-4 control-label">Nombre</label>
<label for="tabContactPerson_lbl_lastName" class="col-sm-8 control-label">Apellidos</label>
</div>
<div class="form-group">
<div class="col-sm-4">
Html.Kendo().TextBox().Name("tabContactPerson_tbx_name").HtmlAttributes(new { #class = "form-control100", placeholder = "Nombre", data_bind = "value: contactPerson_name" })
</div>
<div class="col-sm-8">
Html.Kendo().TextBox().Name("tabContactPerson_tbx_lastName").HtmlAttributes(new { #class = "form-control", style = "width:100%", placeholder = "Apellidos", data_bind = "value: contactPerson_lastName" })
</div>
</div>
</div>
<br />
<div class="row">
<div class="form-group">
<label for="tabContactPerson_lbl_phoneNumber" class="col-sm-4 control-label">Teléfono</label>
<label for="tabContactPerson_lbl_workStation" class="col-sm-4 control-label">Puesto de Trabajo</label>
<label for="tabContactPerson_lbl_email" class="col-sm-4 control-label">E-mail</label>
</div>
<div class="form-group">
<div class="col-sm-4">
Html.Kendo().TextBox().Name("tabContactPerson_tbx_phoneNumber").HtmlAttributes(new { #class = "form-control", style = "width:100%", placeholder = "Teléfono", data_bind = "value: contactPerson_phoneNumber" })
</div>
<div class="col-sm-4">
Html.Kendo().TextBox().Name("tabContactPerson_tbx_workStation").HtmlAttributes(new { #class = "form-control", style = "width:100%", placeholder = "Puesto de Trabajo", data_bind = "value: contactPerson_workStation" })
</div>
<div class="col-sm-4">
Html.Kendo().TextBox().Name("tabContactPerson_tbx_email").HtmlAttributes(new { #class = "form-control", style = "width:100%", placeholder = "E-mail", data_bind = "value: contactPerson_email" })
</div>
</div>
</div>
<br />
<div class="row">
<div class="form-group">
<div class="col-sm-12">
<div id="grid_contactPerson"></div>
</div>
</div>
</div>
<br />
<div class="row">
<div class="form-group">
<div class="col-sm-2">
<input data-bind="events:{ click: click_btnAddPersonContact }" type="button" id="btnAddPersonContact" value="Agregar Persona de Contacto" />
</div>
</div>
</div>
When I AddPerson the grid does not update with the data from my DataSource. How can I bind my ViewModel to the data of the grid???
Thanks