できます。

上下ボタンのクリックによって選択されている行を上下に動かすことができるようにするには、データソースのデータから選択されている行のデータを検索し、データソース側でdeleteRowメソッドおよびinsertRowメソッドを使って順序を入れ替え、igGridに再バインドしてください。

// 「上へ」ボタンクリック時の処理
$("#buttonUp").click(function(){
    // https://jp.igniteui.com/help/api/2022.1/ui.iggridselection#methods:selectedRow
    const selectedRow = $("#grid1").igGridSelection("selectedRow");   // 選択されている行を取得する。
    const igDs = $("#grid1").data("igGrid").dataSource;   // igDataSourceインスタンス取得する。

    // https://jp.igniteui.com/help/api/2022.1/ig.datasource#methods:data
    const data = igDs.data(); // バインドされている全データを取得する。

    const indexOfSelectedRow = data.findIndex(item => item.ID === selectedRow.id);    // IDの値をもとに選択行がバインドデータのどの位置にあるのか取得する。
    if(indexOfSelectedRow <= 0) return; // これ以上上に移動できない場合は何もしない。

    const prevRow = data[indexOfSelectedRow-1];    // 1行前のデータを取得

    // データの入れ替え
    igDs.deleteRow(prevRow.ID, true);
    igDs.insertRow(prevRow.ID, prevRow, indexOfSelectedRow, true);
    $("#grid1").igGrid("dataBind");
});

// 「下へ」ボタンクリック時の処理
$("#buttonDown").click(function(){
    // #buttonUpのclickイベントと同様。

    const selectedRow = $("#grid1").igGridSelection("selectedRow");
    const igDs = $("#grid1").data("igGrid").dataSource;
    const data = igDs.data();

    const indexOfSelectedRow = data.findIndex(item => item.ID === selectedRow.id);
    if(indexOfSelectedRow < 0 || indexOfSelectedRow >= data.length - 1) return;

    const nextRow = data[indexOfSelectedRow+1];

    igDs.deleteRow(nextRow.ID, true);
    igDs.insertRow(nextRow.ID, nextRow, indexOfSelectedRow, true);
    $("#grid1").igGrid("dataBind");
    $("#grid1").igGrid("dataBind");
});

 

サンプル

 

APIリファレンス

 

Tagged:

製品について

Ignite UI for jQuery