title: Rebind DropDownList in KendoGrid, depending on Value Selected in other DropDownList on the same row
body: <p>This is a common problem, but i dont know how to figure it out with KendoUI widgets and Javascript.
  I have a KendoGrid whose datasource is coming from an AJAX call to a Web Services.
  Data is bound to the columns. Two columns (Source and Destination) are two drop down lists:</p>
  
  <p><a href="https://i.stack.imgur.com/uepRK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/uepRK.png" alt="enter image description here"></a></p>
  
  <p>Each column is defined as </p>
  
  <pre><code> if (stringStartsWith(colTitle, 'Source')) {
                      columns.push({
                          field: dataItem.replace(/\s+/g, ''),
                          title: colTitle,
                          width: 150,
                          locked: false,
                          editor: sourceDropDownEditor,
                          //template: "#=SourcetankIdentifier#",
                          attributes: { style: "text-align: left" },
                          type: "text"
                      });
                  }
  </code></pre>
  
  <p>And the SourceDropDownEditor is as follow:</p>
  
  <pre><code>function sourceDropDownEditor(container, options) {
      $('&lt;input id="sourcesDropDownList" required data-text-field="Source" data-value-field="Source" data-bind="value:' + options.field + '"/&gt;')
          .appendTo(container)
          .kendoDropDownList({
              dataTextField: "Source",
              dataValueField: "Source",
              dataSource: Sources           
          });
  }
  </code></pre>
  
  <p>The same is done for the Destination Drop Down List.</p>
  
  <p>Now, what i want is, when the user clicks into the Edit button (Grid is defined with In-Line Edit) and choose a certain Source Value from the Source DDL; the list into the Destination DDL must change according to this value.</p>
  
  <p>I wrote a function for retrieving the correct list, depending from the value chosen in the Source DDL. But what i CANNOT do, is to get the Destion DLL of THAT row and to set the Datasource accordingly.</p>
  
  <p><strong>More Details as requested</strong>: </p>
  
  <p>Grid is built dynamically:</p>
  
  <pre><code>function generateGrid(JSONData) {
  
      var model = generateModel(JSONData, selectedMenu);
      var columns = generateColumns(model);
      var data = generateData(gridData, columns);  
  
     var grid = $("#mainGrid").kendoGrid({              
          edit: function (e) {            
             ..
          },
          dataSource: {
              data: data,
              schema: {
                  model: model
              },
              sort:   {
                  field: defaultSort.replace(/\s+/g, ''),
                  dir: "desc"               
              }
          },
          toolbar: [
              ..
          ],
          columns: columns,        
          editable: "inline",       
          sortable: true,                 
          resizable: true,
          filterable: true,
          selectable: "multiple",
          cancel: function(e) {
              $('#mainGrid').data('kendoGrid').dataSource.cancelChanges();
          },
  </code></pre>
  
  <p><strong>KENDO DOJO</strong></p>
  
  <p>Here <a href="http://dojo.telerik.com/uXeKa" rel="nofollow noreferrer">dojo.telerik.com/uXeKa</a>  . It reflects basically the grid template and the column fields</p>
  
  <p><strong>FINAL SOLUTION</strong></p>
  
  <p>Final solution is here: <a href="http://dojo.telerik.com/uXeKa/2" rel="nofollow noreferrer">dojo.telerik.com/uXeKa/2</a> . 
  Don't need to add anything into the <em>Edit</em> function of the Grid. Just need to implement <em>onChange</em> function of the Source DDL, and to set the datasource of the destination.</p>