如何将 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-我必须使用绑定方法而不是 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);
        }

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

从你想将选定行的值与文本框绑定的问题来看，我认为你的问题类似于 this where he wanted to bind the selected row to textbox, datepicker, or checkbox. Except for this question its not using mvvm. I also already provided a jsfiddle 但它不是 mvvm

编辑我在这里创建了一个 mvvm jsfiddle

如何将 kendo 网格的选定行值与文本框绑定？

How to bind selected row-values of a kendo grid with textboxes?

javascript

asp.net

jquery

kendo-ui

kendo-grid