title: How to bind selected row-values of a kendo grid with textboxes?
body: <p>I want to bind values of a selected row with text boxes</p>
  
  <pre><code>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" &amp;&amp; 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);
  
   }
  </code></pre>
  
  <p>I use command edit instead of update in HTML code command row then it works.  Here is my HTML-code:</p>
  
  <pre><code>&lt;!--data-editable="inline"--&gt;
  
  &lt;div id="example"&gt;
      &lt;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"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
  
      &lt;input id="id" class="k-textbox" data-bind="value: Id " /&gt;
      &lt;input id="ic" class="k-textbox" data-bind="value:  CurrentCurrencyCode " type="text" /&gt;
      &lt;input id="isn" class="k-textbox" data-bind="value: ShortName " type="text" /&gt;
      &lt;input id="ifn" class="k-textbox" data-bind="value:  FullName " type="text" /&gt;
      &lt;input id="icp" class="k-textbox" data-bind="value:  ContactPerson " type="text" /&gt;
      &lt;input id="iadd" class="k-textbox" data-bind="value:  Address1 " type="text" /&gt;
      &lt;input id="icc" class="k-textbox" data-bind="value:  CompanyCity " type="text" /&gt;
      &lt;input id="ics" class="k-textbox" data-bind="value:  CompanyState " type="text" /&gt;
      &lt;input id="icco" class="k-textbox" data-bind="value:  CompanyCountry " type="text" /&gt;
      &lt;input id="izpc" class="k-textbox" data-bind="value: ZipPostCode " type="text" /&gt;
      &lt;input id="ita" class="k-textbox" data-bind="value:  TelArea " type="text" /&gt;
  
      &lt;input id="Update" type="submit" value="Update" /&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>
  </p>
  
  <p>the function change() that is triggered when i use update operation it goes to onUpdateItems()
  there are 2 problems:</p>
  
  <p>1-i have to use binding method instead of document.getelementbyId</p>
  
  <p>2-call a function without using edit in command only use update in html code
  when i use update it doesnot work but if i use </p>
  
  <pre><code>data-editable="inline"
  </code></pre>
  
  <p>along with edit it works </p>