title: Kendo UI grid drag&drop placeholder
body: <p>I have grid with drag&amp;drop functionality:</p>
  
  <pre><code>var data = [
      { id: 1, text: "text 1", position: 0 },
      { id: 2, text: "text 2", position: 1 },
      { id: 3, text: "text 3", position: 2 }
  ]
  
  var dataSource = new kendo.data.DataSource({
          data: data,        
          schema: {
              model: {
                  id: "id",
                  fields: {
                      id: { type: "number" },
                      text: { type: "string" },
                      position: { type: "number" }
                  }
              }
          }
      });
  
  var grid = $("#grid").kendoGrid({
      dataSource: dataSource,  
      scrollable: false,    
      columns: ["id", "text", "position"]            
  }).data("kendoGrid");
  
  grid.table.kendoDraggable({
      filter: "tbody &gt; tr",
      group: "gridGroup",
      threshold: 100,
      hint: function(e) {
          return $('&lt;div class="k-grid k-widget"&gt;&lt;table&gt;&lt;tbody&gt;&lt;tr&gt;' + e.html() + '&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;&lt;/div&gt;');
      }
  });
  
  grid.table.kendoDropTarget({
      group: "gridGroup",
      drop: function(e) {        
          e.draggable.hint.hide();
          var target = dataSource.getByUid($(e.draggable.currentTarget).data("uid")),
              dest = $(document.elementFromPoint(e.clientX, e.clientY));
  
          if (dest.is("th")) {
              return;
          }       
          dest = dataSource.getByUid(dest.parent().data("uid"));
  
          //not on same item
          if (target.get("id") !== dest.get("id")) {
              //reorder the items
              var tmp = target.get("position");
              target.set("position", dest.get("position"));
              dest.set("position", tmp);
  
              dataSource.sort({ field: "position", dir: "asc" });
          }                
      }
  });
  </code></pre>
  
  <p>(working example: <a href="http://jsfiddle.net/JBeQn/" rel="nofollow">http://jsfiddle.net/JBeQn/</a> )</p>
  
  <p>Is it possible to show the placeholder where the row will be dropped? From current implementation it's not obvious. So I would like to make something like this:
  <a href="http://demos.telerik.com/kendo-ui/sortable/events" rel="nofollow">http://demos.telerik.com/kendo-ui/sortable/events</a></p>
  
  <p>or this:</p>
  
  <p><a href="http://jsfiddle.net/bgrins/tzYbU/" rel="nofollow">http://jsfiddle.net/bgrins/tzYbU/</a></p>
  
  <p>In the demo above placeholder is showed and it's quite easy to understand where the row will be dropped.</p>
  
  <p>So any ideas?</p>