如何用文本框绑定Kendo网格的选定行值？

Question

我想将所选行的值与文本框绑定

document.onreadystatechange = function () {

var selectedRow = null;
var viewModel = kendo.observable({
    Items: [],
    onUpdateItems: function (data) {
        alert('updating items');

        document.getElementById("id").value = data.models[0].Id,
             document.getElementById("ic").value = data.models[0].CurrentCurrencyCode,
               document.getElementById("isn").value = data.models[0].ShortName,
               document.getElementById("ifn").value = data.models[0].FullName,
                document.getElementById("icp").value = data.models[0].ContactPerson,
              document.getElementById("iadd").value = data.models[0].Address1,
              document.getElementById("icc").value = data.models[0].CompanyCity,
              document.getElementById("ics").value = data.models[0].CompanyState,
              document.getElementById("icco").value = data.models[0].CompanyCountry,
              document.getElementById("izpc").value = data.models[0].ZipPostCode,
              document.getElementById("ita").value = data.models[0].TelArea
    },
    products: new kendo.data.DataSource({
        transport: {
            read: {
                type: "GET",
                url: "/api/Companies/GetAllCompanies2",
                dataType: "json",
                async: false

            },
            create: {
                type: "PUT",
                url: "/api/Companies/UpdateDefCompny",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async: false

            },
            update: {
                url: "/api/Companies/SaveDefCompny",
                async: false,
                contentType: "application/json",
                dataType: "json",
                type: "POST"
            },

            destroy: {
                url: "/api/Companies/Delete", // here you need correct api url
                dataType: "json"
            },
            parameterMap: function (data, operation) {
                if (operation !== "read" && data) {
                    if (operation == "update") {
              // here i call the function change

         viewModel.Items.trigger("change",data);


                    }
                    else {
                    return JSON.stringify(data.models[0]);
                    }
                }

            }
        },
        serverPaging: true,
        serverFiltering: true,
        pageSize: 10,
        schema: {
            //data:"Data",
            total: "Count",

            model: {
                id: "Id",
                fields: {
                    Id: { type: "int" },
                    CurrentCurrencyCode: { editable: true, type: "int" },
                    ShortName: { editable: true, type: "string" },
                    FullName: { editable: true, type: "string" },
                    ContactPerson: { editable: true, type: "string" },
                    Address1: { editable: true, type: "string" },
                    CompanyCity: { editable: true, type: "string" },
                    CompanyState: { editable: true, type: "string" },
                    CompanyCountry: { editable: true, type: "string" },
                    ZipPostCode: { editable: true, type: "string" },
                    TelArea: { editable: true, type: "string" }

                }
            }
        },
        batch: true,
    })
});

viewModel.Items.bind('change', function (e) {
   //function called
    viewModel.onUpdateItems(e);
});

kendo.bind(document.getElementById("example"), viewModel);

 }

我使用命令编辑而不是在HTML代码命令行中进行更新，然后它可以工作。 这是我的HTML代码：

<!--data-editable="inline"-->

<div id="example">
    <div id="kendoGrid"
         data-role="grid"
         data-pageable=" true"
         data-sortable=" true"

         data-filterable="true"
         data-toolbar="['create','save', 'cancel']"
         data-columns="[

        { 'field': 'Id', 'width': 100 },
        { 'field': 'CurrentCurrencyCode', 'width': 100 },
        { 'field': 'ShortName', 'width': 100 },
        { 'field': 'FullName', 'width': 100 },
        { 'field': 'ContactPerson', 'width': 100 },
        { 'field': 'Address1', 'width': 100 },
        { 'field': 'CompanyCity', 'width': 100 },
        { 'field': 'CompanyState', 'width': 100 },
        { 'field': 'CompanyCountry', 'width': 100 },
        { 'field': 'ZipPostCode', 'width': 100 },
        { 'field': 'TelArea', 'width': 100 },
        { command: ['update'],  title: 'Actions', width: '250px' },

        ]"
         data-bind="source: products"
         style=" height :500px">
    </div>
</div>
<div>

    <input id="id" class="k-textbox" data-bind="value: Id " />
    <input id="ic" class="k-textbox" data-bind="value:  CurrentCurrencyCode " type="text" />
    <input id="isn" class="k-textbox" data-bind="value: ShortName " type="text" />
    <input id="ifn" class="k-textbox" data-bind="value:  FullName " type="text" />
    <input id="icp" class="k-textbox" data-bind="value:  ContactPerson " type="text" />
    <input id="iadd" class="k-textbox" data-bind="value:  Address1 " type="text" />
    <input id="icc" class="k-textbox" data-bind="value:  CompanyCity " type="text" />
    <input id="ics" class="k-textbox" data-bind="value:  CompanyState " type="text" />
    <input id="icco" class="k-textbox" data-bind="value:  CompanyCountry " type="text" />
    <input id="izpc" class="k-textbox" data-bind="value: ZipPostCode " type="text" />
    <input id="ita" class="k-textbox" data-bind="value:  TelArea " type="text" />

    <input id="Update" type="submit" value="Update" />
</div>

当我使用更新操作时触发的函数change（）转到onUpdateItems（）时存在2个问题：

1-i必须使用绑定方法而不是document.getelementbyId

2-在不使用命令中编辑的情况下调用函数仅在我使用更新时使用html代码中的更新不起作用，但是如果我使用

data-editable="inline"

与编辑一起工作

Answer 1

为什么不添加data-bind="change: onChange" and data-selectable="true"

然后在onChange函数上，您可以执行

function (e) {
            selectedRow = this.select();
            var item = this.dataItem(selectedRow);
            kendo.bind($("#textbox-wrapper"), item);
        }

不要忘记给包裹文本框的div添加id并替换此代码上的绑定kendo.bind($("#textbox-wrapper"), item);

从您想在其中将所选行的值与文本框绑定的问题来看，我认为您的问题与此类似，在他想将所选行绑定到文本框，日期选择器或复选框的问题。 除了这个问题，它不使用mvvm。 我也已经提供了一个jsfiddle，但是它不是mvvm

编辑我已经创建了mvvm一个是jsfiddle