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（）有两个问题：

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

2 - 不使用edit in命令调用函数只使用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添加到包装文本框的div并替换此代码kendo.bind($("#textbox-wrapper"), item);上的绑定

根据您想要将所选行的值与文本框绑定的问题，我认为您的问题类似于this，他希望将所选行绑定到textbox，datepicker或checkbox。除了这个问题，它不使用mvvm。我也提供了jsfiddle，但它不是mvvm

编辑我在这里创建了mvvm jsfiddle

如何绑定剑道网格的选定行值与文本框？

1 个答案: