新しい行をプログラムで作成し、その行を剣道グリッドの編集モードにする方法

Question

私の剣道のグリッドで、ツールバーの代わりにコマンド列のヘッダー（タイトル）に「新しいアイテムを作成」ボタンを配置しようとしています。ここに私のグリッド定義の一部である：

var grid = $("#grid").kendoGrid({ 
columns: [{ command: { name: "edit", title: "Edit", text: { edit: "", cancel: "", update: "" } }, 
headerTemplate: "<a onclick ='NewItemClick()' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>"}, 

私の質問は：新しい行を作成し、中に編集モードでその行を置く方法「NewItemClick（）」

Answer 1

ときに、いくつかの厄介なスコープの問題があります。テンプレート定義自体のclickイベントをバインドしてみてください。

代わりに、リンクにIDを割り当て、後でクリックイベントをバインドする方が簡単です。私はそれにid = createを与えたことに注目してください。

headerTemplate: "<a id='create' class='k-button k-button-icontext k-create-alert' id='new-item-button' title='Click to add a new item'><div>New Item</div></a>" 

はその後、文書準備で、私は、クリックイベントをバインド：

$("#create").click(function() { 
    var grid = $("#grid").data("kendoGrid"); 
    if (grid) { 
     //this logic creates a new item in the datasource/datagrid 
     var dataSource = grid.dataSource; 
     var total = dataSource.data().length; 
     dataSource.insert(total, {}); 
     dataSource.page(dataSource.totalPages()); 
     grid.editRow(grid.tbody.children().last()); 
    } 
}); 

上記の機能は、データソースを操作することによって、グリッドの一番下に新しい行を作成します。次に、新しい行を行 "編集"として扱います。 OnaBaiの答えhereから新しい行を作成するアクションを借用しました。

ここでは動作しますjsfiddle、それが役立ちます。

Answer 2

私はgisitgoの答えを完了したいと思います。データソースの更新に時間がかかる場合、page(...)を呼び出すと、グリッドをリフレッシュするとエディタのポップアップがキャンセルされます。これは"change"イベントにeditRowへの呼び出しを結合することによって回避される：

var grid = $("#grid").data("kendoGrid"); 
if (grid) { 
    //this logic creates a new item in the datasource/datagrid 
    var dataSource = grid.dataSource; 
    var total = dataSource.data().length; 
    dataSource.insert(total, {}); 
    dataSource.one("change", function() { 
    grid.editRow(grid.tbody.children().last()); 
    }); 
    dataSource.page(dataSource.totalPages()); 
} 

NB：あなたのグリッドがソートされている場合、新しい行は必ずしも最後ではありませんので、問題が生じるであろう。このアプローチ私が持っている

Answer 3

挿入された行が編集用に開かれていないなど、複数のページがある場合に問題が発生することがあります。 コピーされた行の現在のインデックスに基づくコードです。

さらに精度を高めるために、UIDに基づいて行を編集します。

function cloneRow(e) { 
    var grid = $("#grid").data("kendoGrid"); 
    var row = grid.select(); 

    if (row && row.length == 1) { 
     var data = grid.dataItem(row); 

     var indexInArray = $.map(grid.dataSource._data, function (obj, index) 
     { 
      if (obj.uid == data.uid) 
      { 
       return index; 
      } 
     }); 

     var newRowDataItem = grid.dataSource.insert(indexInArray, { 
      CustomerId: 0, 
      CustomerName: null,     
      dirty: true 
     }); 
     var newGridRow = grid.tbody.find("tr[data-uid='" + newRowDataItem.uid + "']"); 
     grid.select(newGridRow); 
     grid.editRow(newGridRow); 
     //grid.editRow($("table[role='grid'] tbody tr:eq(0)")); 
    } else { 
     alert("Please select a row"); 
    } 
    return false; 
}