在我的ViewModel中绑定Grid中的DataSource

时间:2017-05-26 10:51:55

标签: asp.net-mvc kendo-grid

我有我的应用MVC Asp.net使用MVVM。我试图将我的网格绑定到我的ViewModel但它不起作用。这是我的样本:

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

我的观点......

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>

当我使用AddPerson时,网格不会使用我的DataSource中的数据进行更新。如何将ViewModel绑定到网格数据???

由于

0 个答案:

没有答案