Browse by Tags

All Tags » グリッド
Showing page 1 of 2 (42 total posts)
  • igGrid 列固定時にクリック行の背景色を動的に変更する

    igGrid の列固定機能を利用した際に、クリックした行の背景色を変更する方法のご紹介です。 igGrid では、列を固定した際に、列の固定部分と非固定部分はそれぞれ別の table タグが生成されます。出力された HTML を見てみると、このようなレイアウトになっています。  igGrid の固定列利用時には、上記のように固定列部分と非固定列部分が別れていますので、それぞれの TR 要素に対してスタイリングを行います。 igGrid の rowAt メソッドでは、igGrid の対象行の非固定部分の TR のみが取得されます。列の固定部分を取得するには、rowAt メソッドと併せて fixedRowAt メソッドも呼び出します。rowAt ...
    Posted to Yuki Mita (Weblog) by ymita on September 28, 2017
  • Ignite UI with Angular

    - 2017/08/16(水) 時点の情報に基づいています - こんにちは、インフラジスティックス・ジャパン デベロッパーサポート の桐生です。 前回の記事(Ignite UI の始め方)では、Ignite UI そのもの構成方法や使い方などの基本をお伝えしました。今回から、Ignite UI を他のフレームワークと一緒に使う方法を紹介していきます。 今回は Angular と組み合わせる方法についてです。   0) 今回用意した環境 Windows 10 Node.js 8.4.0 - ダウンロードはこちらから npm 5.3.0   1) Angular CLI でプロジェクトを生成 Angular CLI ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on August 16, 2017
  • UltraGrid ソートの状態をクリアする

    UltraGrid では列ヘッダをクリックすることで列のソートを行うことができます。 但し、状況によってはソートをクリアして UltraGrid のデータを、グリッド初回表示時と同じ並びに戻したいことがあります。このような時には、下記コードを呼び出すことで対応することができます。 1.SortedColumns.Clear メソッド 2.Rows.Refresh メソッド private void button1_Click(object sender, EventArgs e) { this.ultraGrid1.DisplayLayout.Bands[0].SortedColumns.Clear(); ...
    Posted to Yuki Mita (Weblog) by ymita on June 20, 2017
  • 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
  • igGrid セルに縦罫線を表示

    igGrid のセルに縦罫線を表示してみましょう。下記 CSS を適用することで実現することができます。 <style> .ui-iggrid tbody td { border-right: 1px solid #dadada; } </style>   実行結果 セルの境界がわかりやすくなりました。シンプルな CSS の設定ですが、継続的にお問合わせを頂いておりますのでご紹介致しました。   サンプル サンプルのダウンロード(Infragistics Ignite UI 2016.2 バージョン) (本サンプルは 16.2.20162.2040 ...
    Posted to Yuki Mita (Weblog) by ymita on February 14, 2017
  • XamDataGrid 行のスタイルを変更する

    XamDataGrid では、デフォルトで選択行やアクティブ行、ホバー行など各種状態に対して青色を基調とした配色が行われています。これら行のスタイルを状況に応じて変更したいという状況はよくあります。今回は行のスタイルを状態毎に個別に変更する方法をご紹介します。   実装方法 XamDataGrid の行のスタイルは DataRecordPresenter クラスで設定することができます。XamDataGrid の各要素の構成は「xamDataGrid について」を参照下さい。 DataRecordPresenter に対するスタイルを作成します。Setter の Value には ComboBox で選択している色をバインドしています。実装の詳細は サンプル ...
    Posted to Yuki Mita (Weblog) by ymita on February 1, 2017
  • igGrid のパフォーマンスを体感できるオンラインサンプル

    - 2017/01/31(火)時点の情報に基づいています - こんにちは、インフラジスティック・ジャパン デベロッパーサポート の桐生です。 弊社のjQuery/HTML5用コントロール Ignite UI のコントロールの中で最もご利用頻度の高い igGrid ですが、 ・何行 × 何列 まで表示できるの? ・パフォーマンスはどうなの? といったお問い合わせをよく頂きます。そこで、弊社では、お客様ご自身でパフォーマンスを確認できるオンラインサンプルをご用意しております。   オンラインサンプル:Grid パフォーマンスオプション ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on January 31, 2017
  • igGrid のライフサイクルイベントを使ってカスタマイズの幅を広げよう

    - 2017/01/30(月)時点の情報に基づいています - こんにちは、インフラジスティック・ジャパン デベロッパーサポート の桐生です。 弊社のjQuery/HTML5用コントロール Ignite UI のコントロールの中で最もご利用頻度の高い igGrid のライフサイクルイベントについてご説明いたします。 Ignite UI のコントロールは、組み込みオプションでは実現できないことも、イベントを駆使することでより高度なカスタマイズを実現することができます。 特に igGrid ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on January 30, 2017
  • XamDataGrid 多段明細行

    XamDataGrid ではデータを横方向に連続して表示する以外にも、データを多段表示することもできます。 データを多段で表示できると、横幅が限られた画面幅に各レコードを収めることも可能ですし、データを俯瞰しやすくなります。   実装方法 FieldLayoutSettings にある AutoArrangeCells プロパティに “Never” を指定し、グリッドのフィールドが自動的に1段で整列する動作を無効化します。 <igDP:XamDataGrid x:Name=''xamDataGrid1'' DataSource=''{Binding People}''> ...
    Posted to Yuki Mita (Weblog) by ymita on January 10, 2017
  • XamDataGrid と XamBarcode を使ったレポートの作成

    XamDataGrid ではグリッドの内容を印刷する機能を提供しています。XamDataGrid の印刷は専用のメソッドを呼び出すことで簡単に実現することができます。今回は XamDataGrid のセルに XamBarcode(バーコードコントロール)を埋め込んで、商品リストを作ってみます。 XamDataGrid に XamBarcode を埋め込む部分は、以前にご紹介した XamDataGrid の TemplateField 機能を利用します。TemplateField 機能については下記をご覧ください。 XamDataGrid セルに任意のコントロールを埋め込む(テンプレートフィールド)  ...
    Posted to Yuki Mita (Weblog) by ymita on January 6, 2017
  • WebDataGrid クリック行のデータを取得する

    WebDataGrid のクリックした行のデータを取得してみます。よくあるシナリオとして、セルにボタンを埋め込み、ボタンをクリックした際にクリック行のデータを伴う処理を実施することがあります。このような場合、WebDataGrid のアクティブ化機能を利用することで簡潔に実装することができます。   実装方法 1.アクティブ化機能の有効化 下記のように WebDataGrid の Behaviors コレクションに Activation を設定します。 <ig:WebDataGrid ID=''WebDataGrid1'' runat=''server'' Height=''350px'' Width=''400px'' ...
    Posted to Yuki Mita (Weblog) by ymita on December 18, 2016
  • XamDataGrid 列の表示順序を取得

    XamDataGrid の列の表示順序を取得する方法をご紹介します。 XamDataGrid ではアプリケーション実行時に列の位置を左右で入れ替えたり、多段に組み替えることができます。 実行時の列の表示順序を取得するには、Field の ActualPosition.Column プロパティを利用します。 private void button_Click(object sender, RoutedEventArgs e) { FieldCollection fields = xamDataGrid1.FieldLayouts[0].Fields; for (int index = 0; index < fields.Count; index++) ...
    Posted to Yuki Mita (Weblog) by ymita on December 11, 2016
  • XamDataGrid セルのスタイルを状態に応じて変更

    XamDataGrid のセルのスタイルを、行の状態に応じて変更してみます。 XamDataGrid の提供する CellBinding 機能を利用することで簡潔に実装することができます。 Title 列の CellBindings コレクションに、セルの背景色(CellValuePresenter.Foreground)と ViewModel の ForegroundColor プロパティをバインドします。 <igDP:XamDataGrid DataSource=''{Binding Tasks}'' Grid.Row=''1''> <igDP:XamDataGrid.FieldLayouts> ...
    Posted to Yuki Mita (Weblog) by ymita on December 5, 2016
  • 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 レコードのドラッグアンドドロップを実装してみましょう。XamDataGrid 単体ではドラッグアンドドロップの機能ありませんが、 Infragistics WPF に含まれる Infragistics Drag and Drop Framework を組み合わせることで実現することができます。 XamDataGrid のレコードは DataRecordPresenter として描画されており、ドラッグアンドドロップ機能を DataRecordPresenter に割り当てていきます。 Snoop を使って XamDataGrid を覗いてみます。DataRecordPresenter はここです。 実装の手順 ...
    Posted to Yuki Mita (Weblog) by ymita on November 28, 2016
  • XamDataGrid FieldChooser に特定列を表示しない方法

    XamDataGrid では列の表示/非表示を切り替えることのできる、FieldChooser 機能を提供しています。 こんな見た目です。左側に表示されている小さなウィンドウが FieldChooser です。FieldChooser 上でチェックを切り替えると XamDataGrid の列表示も同期して切り替わります。   デフォルトでは全ての列を表示/非表示切り替えができるのですが、特定の列は非表示にされないようにしたいこともあります。このような時には、非表示にされたくない列のプロパティ変更を行うことで、FieldChooser から除外することができます。 例えば、ID 列を FieldChooser から除外するには FieldSettings の ...
    Posted to Yuki Mita (Weblog) by ymita on November 22, 2016
  • XamDataGrid チェックボックスの変更通知タイミング

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

    XamDataGrid の列をコードビハインドで生成する例をご紹介します。データソースには DataTable を利用しています。 XamDataGrid の定義(XAML) 表示する列は動的に変わることを想定し、XAML 側での定義は行っていません。XamDataGrid ではバインドデータから自動的にデータ型に応じた列を生成するようになっています。ここではバインドするデータのうち、表示しないフィールドもあるため AutoGenerateFields に False を指定し、列の自動生成を無効化します。 <igWPF:XamDataGrid DataSource=''{Binding}'' ...
    Posted to Yuki Mita (Weblog) by ymita on September 20, 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
  • WebDataGrid 新規追加行に EditorProvider を利用する

    WebDataGrid ではセル編集時にデフォルトで提供されるエディタ以外に EditorProvider という高機能エディタを提供しています。 過去にいくつかの記事で EditorProvider の利用方法をご紹介しておりました。今回は、新規追加行に DropDownProvider という EditorProvider を利用し、行の初期値を規定値の中から選択できるようにします。   EditorProvider の準備 EditorProvider は WebDataGrid 配下の EditorProviders コレクションに追加します。EditorProvider の定義方法は下記ブログ記事が参考になります。 WebDataGrid ...
    Posted to Yuki Mita (Weblog) by ymita on September 1, 2016
  • igGrid 編集内容をデータベースに更新する

    igGrid 上で編集を行い、編集内容をデータベースに更新するサンプルのご紹介です。Entity Framework と連携することで SQL 文を明示的に記述する必要なく、データベースへのコミットまでを行います。今回紹介するコードを反映したサンプルはこちらからダウンロードできますので、サンプルと比較しながら記事をご覧下さい。 ポイントは2点で、UpdateUrl オプションの指定と saveChanges メソッドの呼び出しです。   データについて データの生成は CodeFirst で行います。データのモデルは Customer.cs、コンテキストは DataContext.cs、イニシャライザは DataInitializer.cs ...
    Posted to Yuki Mita (Weblog) by ymita on August 29, 2016
  • igGrid Date 値のフォーマット

    igGrid に日付データを表示する際、標準では yyyy/MM/dd で表示されます。今回は時刻(時分)までを表示するように設定してみましょう。利用するオプションは、列(column)に用意されている format オプションです。   データの形式 データは下記の形式で用意されています。RegisterDate は年月日時分を指定して値を初期化しています。 { ''EmployeeID'': ''56250fa57ab1535722e564a6'', ...省略... ''RegistererDate'': new Date(2015, 07, 25, 12, 15), ...省略... } ...
    Posted to Yuki Mita (Weblog) by ymita on August 16, 2016
  • TypeScriptをブラウザ上で手軽に試す

    - 2016/08/11(木)時点の情報に基づいています - こんにちは。デベロッパーサポートの桐生です。 今回、TypeScript をブラウザ上で手軽に試すための方法をご紹介したいと思います。 Angular2 では TypeScript が使われており(必ずしも TypeScript を使わなければいけないわけではありませんが)、今後Angular2が正式リリースされた暁には TypeScript の需要がい一気に高まるのではないでしょうか。 ※弊社のjQuery/HTMl5用コントロールIgnite UIでも、TypeScriptへの対応を行っており、またAngular2 ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on August 10, 2016
1 2 Next >
Powered by Community Server (Commercial Edition), by Telligent Systems