связать данные строки сетки кендо с текстовыми полями onclick?

Question

Вот мой html-код, мне нужно отправить данные из таблицы kendo в текстовые поля, нажимая встроенную кнопку редактирования строки kendo, но я не хочу редактировать inline. после того, как editting через текстовые поля я хочу показать его в кендо сетки, как отредактированное значение

<!--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: ['edit'], 
     title: 'Actions', 
     width: '250px' 
    }, 
]" data-bind="source: products" style=" height :500px"></div> 
</div> 
<div> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.Id " /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.CurrentCurrencyCode " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.ShortName " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.FullName " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.ContactPerson " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.Address1 " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.CompanyCity " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.CompanyState " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.CompanyCountry " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.ZipPostCode " type="text" /> 
    <input id="ii" class="k-textbox" data-bind="value: data-columns.TelArea " type="text" /> 
    <input id="Update" type="submit" value="Update" /> 
</div> 

вот мой Javascript код, может кто-нибудь один связать свои значения строки кендо с текстовыми полями на кнопку инлайн нажмите Thanx

document.onreadystatechange = function() { 
    function showdata(e) { 
     alert("dataShown"); 
    } 

    var viewModel = kendo.observable({ 
     products: new kendo.data.DataSource({ 
      transport: { 
       //read: function() { 
       // type = "GET"; 
       // url = "/api/Companies/GetAllCompanies2"; 
       // dataType = "json"; 
       //}, 
       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" 
       // here you need correct api url 

      }, 
       destroy: { 
        url: "/api/Companies/Delete", // here you need correct api url 
        dataType: "json" 
       }, 
       parameterMap: function (data, operation) { 
        if (operation !== "read" && data) { 
         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, 
     }) 
    }); 
    kendo.bind(document.getElementById("example"), viewModel); 
} 

или вызвать функцию javascript на встроенной кнопке редактирования, которая передает значения переноса, но как вызвать функцию при нажатии кнопки, также скажите мне, что функция обновления также не работает при нажатии

Answer 1

В основном вам просто нужно передать элемент, который вы выберете и привязать его к е текстовое поле, DatePicker, numerictextbox или флажок, добавив в случае изменения на сетке

change: function (e) { 
      selectedRow = this.select(); 
      var item = this.dataItem(selectedRow); 
      kendo.bind($("#gridEditor"), item); 
     }, 

I может иметь один пример, который может удовлетворить все ваши потребности, я создал это, когда я пытался следовать некоторому учебнику по кендо сайта , пожалуйста, проверьте это jsfiddle