IgbGrid – 列の並べ替え後の列順を取得する

IgbGridではMovingプロパティをtrueに設定することにより、マウスドラッグでの列の並べ替えが可能になります。

<IgbGrid Id="myGrid1"
         Moving=true
.....
>
</IgbGrid>

並べ替え後の列順はjavascriptコードにてグリッドのcolumnsコレクションより取得することができます。
以下はボタンクリックのイベントで現在の列順を取得するサンプルコードです。

<button @onclick="GetColumnOrder">
    Get Column Order
</button>

@inject IJSRuntime JSRuntime
private async Task GetColumnOrder()
{
	//wwwroot/igbGrid_JavaScript.jsをインポートします。
	await using var module = await JSRuntime.InvokeAsync<IJSObjectReference>("import", "./igbGrid_JavaScript.js");
	//javascriptファンクションgetCurrentColumns()を実行し、現在の列順を取得します。
	string[] currentColIds = await module.InvokeAsync<string[]>("getCurrentColumns", "#myGrid1");
}

//wwwroot/igbGrid_JavaScript.js
export const getCurrentColumns = (gridSelector) => {
    //グリッドのインスタンスを取得します。
    const grid = document.querySelector(gridSelector);
    if (!grid) return [];
    //グリッドのcolumnsコレクションのデータを返します。
    return grid.columns.map(c => c["field"]);
}