ディーバ Blog

大阪発 C#の会社、株式会社ディーバの Blog です。

Xamarin.iOS SfDataGrid 編集時のキーボードに完了ボタンを追加する

Syncfusion SfDataGrid で編集する際に キーボードの種類(KeyboardType)を変更 した上で、完了ボタン(Done ボタン)を追加して、編集の確定とキーボードを閉じる方法です。

※ この記事の投稿時点の SfDataGrid のバージョンは v15.2.0.46 です。

f:id:jz5_diva:20170721222320p:plain

Editing 機能で Excel のセルのように編集できます。キーボードの種類を指定するには、カスタム GridCellTextViewRenderer クラスを使います。

さらに、数字のキーパッドの場合、入力を確定する方法・キーボードを閉じる方法がわかりにくいので「完了ボタン」を追加します。このアイデアは「(UITextViewの)キーボードに「閉じる」ボタンを追加する - ながいものには、まかれたくない」から。

public class GridCellTextViewRendererExt : GridCellTextViewRenderer
{
    public override void OnInitializeEditView(DataColumnBase dataColumn, UITextField view)
    {
        base.OnInitializeEditView(dataColumn, view);

        // KeyboardType 変更
        view.KeyboardType = UIKeyboardType.NumberPad;

        // Toolbar 追加
        var toolbar = new UIToolbar(new CGRect(0, 0, 60, 44))
        {
            BarStyle = UIBarStyle.Default,
            Translucent = true
        };
        toolbar.SizeToFit();
        var spacer = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace);
        var doneButton = new UIBarButtonItem(UIBarButtonSystemItem.Done, (o, e) =>
        {
            view.ResignFirstResponder();
        });
        doneButton.Clicked += (o, e) =>
        {
            // 編集を確定する
            dataColumn.Renderer.DataGrid.EndEdit();
        };

        toolbar.Items = new[] { spacer, doneButton };
        view.InputAccessoryView = toolbar;
    }
}

作成したカスタムレンダラーに差し替えます。

_dataGrid = new SfDataGrid(this);

// Add custom renderer    
_dataGrid.CellRenderers.Remove("TextView");
_dataGrid.CellRenderers.Add("TextView", new GridCellTextViewRendererExt());