Browse by Tags

All Tags » 編集
  • igGrid 入力検証を利用してみよう

    igGrid の入力検証を利用してみましょう。 入力検証は、igGrid の編集機能(igGridUpdating)のオプションとして設定していきます。ここでは、igGridUpdating > columnSettings にある required オプションと validation オプションを設定していきます。 required オプション 入力が必須となる列であれば、required オプションを設定します。  $("#grid").igGrid({ ... features: [ { name: "Updating", ...
    Posted to Yuki Mita (Weblog) by ymita on May 28, 2017
  • XamDataGrid セルに任意のコントロールを埋め込む(テンプレートフィールド)

    グリッドでの編集機能を考えたときに、エンドユーザーがどの項目を編集対象で、どの項目は表示対象であるかを表現することは操作感の向上につながります。ここでは XamDataGrid のテンプレートフィールドを利用して、エンドユーザーが見た目でどの項目を編集できるのかを表現してみます。   テンプレートフィールドを使わない場合 どの項目を編集できるかはマウス操作やキーボード操作が発生するまで見分けがつきません。   テンプレートフィールドを使った場合 「商品名」、「在庫」、「発注数」列が編集できることが所見で分かるようになりました。   ではここからテンプレートフィールドの実装を行っていきます。   テンプレートフィールドの定義 ...
    Posted to Yuki Mita (Weblog) by ymita on December 1, 2016
  • XamDataGrid Field に ViewModel のデータをバインドする

    XamDataGrid の列に ViewModel のデータをバインドしてみましょう。例えば、ViewModel 側に編集可否を制御するフラグデータを保持しておき、フラグの状態に応じて列単位のセル編集可否を制御するシナリオを考えてみます。   ViewModel のプロパティ 編集可否を制御するフラグ、AllowTitleEdit プロパティ(デフォルト値 true)と AllowDueEdit プロパティ(デフォルト値 false)を用意します。 class MainViewModel : NotificationObject { ... private bool _allowTitleEdit; public bool ...
    Posted to Yuki Mita (Weblog) by ymita on December 1, 2016
  • XamDataGrid エクセルライクなセルの直接編集(IME 入力)

    XamDataGrid ではエクセルライクなセルの直接編集(IME 入力)をサポートしています。 FieldSettings 配下の IsAutoEditModeEnabled プロパティを True にすることでこの機能が有効になります。XamDataGrid ではデフォルトの動作として、セルクリック時に編集状態に入るようになっています。セルの直接編集ではクリック時にセルを選択するよう振る舞ってほしいので、CellClickAction プロパティに SelectCell を設定します。 XAML での実装   <igDP:XamDataGrid DataSource=''{Binding Tasks}''> ... ...
    Posted to Yuki Mita (Weblog) by ymita on November 30, 2016
  • XamDataGrid チェックボックスの変更通知タイミング

    XamDataGrid では、バインドデータへの値変更通知は編集を終える(セルエディタから抜ける)タイミングで発生致します。テキスト編集では直感的な動作ですが、場合によっては編集内容を即時バインドデータへ反映したい状況があります。 例えば、bool 値のデータをバインドすると、XamDataGrid がデータタイプに応じて自動的にチェックボックス列を表示します。このチェックボックスにチェックを入れる/外すタイミングでバインドデータへ即時に変更通知をしたいとします。 XamDataGrid のデフォルトの挙動では、チェックボックスからフォーカスが抜けるまで変更通知が行われませんが、DataItemUpdateTrigger プロパティに OnCellValueChange ...
    Posted to Yuki Mita (Weblog) by ymita on November 17, 2016
  • XamDataGrid 複数行表示・複数行入力

    XamDataGrid で折り返し表示と複数行入力の設定方法をご紹介します。 XamDataGrid では編集時に表示されるエディタとして、XamTextEditor や XamNumericEditor などの弊社エディタコントロールを利用しております。今回の例では string を扱うセルの折り返し表示と複数行の入力ができるようにしますので、string 列に対応する XamTextEditor へスタイリングを行うことになります。 実装方法 XamDataGrid の編集エディタには、Field.Settings.EditorStyle からスタイル設定を行うことができます。折り返し表示では、TextWrapping プロパティに Wrap ...
    Posted to Yuki Mita (Weblog) by ymita on September 16, 2016
Powered by Community Server (Commercial Edition), by Telligent Systems