できます。
上下ボタンのクリックによって選択されている行を上下に動かすことができるようにするには、データソースのデータから選択されている行のデータを検索し、データソース側で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リファレンス
- selectedRowメソッド
- dataメソッド
- deleteRowメソッド
- insertRowメソッド
