Browse by Tags

All Tags » インフラジスティックス » グリッド
  • [18.2] Ignite UI for Angular 2018 Vol.2新機能その2 - グリッドの新機能

    Angularグリッドの新機能 今回は2018 Vol.2で追加されたAngularグリッドの新機能をご紹介します。とはいえIgnite UI for Angularは継続的デリバリー(CD)で短期間に少しずつ機能を追加しているため、いくつかは既にご覧いただいたことがあるかもしれません。 それでは行ってみましょう!Angularで業務アプリケーションを構築する際に有用な機能ばかりです。 Outlookスタイルグループ化 ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on November 12, 2018
  • 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 のセルに縦罫線を表示してみましょう。下記 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 の提供する 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 複数行表示・複数行入力

    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
  • 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
  • igGrid 新規追加行の初期値(デフォルト値)を指定しよう

    igGrid には新規追加行の機能を提供しており、新たな行追加を簡易に行うことができます。この機能を使う際に、特定のセルに初期値(デフォルト値)を指定したい場面があります。 このような場合には、編集機能の持つ defaultValue オプションを利用することができます。   defaultValue オプションの指定: Updating > columnSettings から列単位で指定します。 $(''#grid'').igGrid({ ...省略... features:[{ name: ''Updating'', columnSettings: [ ...省略... ...
    Posted to Yuki Mita (Weblog) by ymita on August 9, 2016
  • igGrid 動的にセル編集可/不可を制御する

    - 2016/08/03(水)時点の情報に基づいています -   こんにちは。デベロッパーサポートの桐生です。 弊社のjQuery/HTMl5用コントロールIgnite UIのグリッド igGridの更新機能をお使いで、動的にセルの編集可/不可を制御したい、というお問い合わせがよくありますので、 その方法をご紹介したいと思います。   基本:イベントキャンセルによるセル編集制御 Ignite UI の各コントロールには、大抵の場合において「XXX」の処理をする際の ・前イベントとして「XXXing」イベント ・後イベントとして「XXXed」イベント が用意されています。 「XXXing」イベントハンドラ内では false ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on August 2, 2016
  • xamDataGrid と xamDataChart で簡易 BI アプリケーションを作る

    先日の記事では xamDataGrid にテンプレート列を作成する方法を紹介致しました。この記事で利用した xamDataGrid に、xamDataChart を加えて簡易な BI アプリケーションを作ってみます。 xamDataChart の定義 <ig:XamDataChart Name=''xamDataChart1'' Title=''Personal Score''> <ig:XamDataChart.Axes> <ig:CategoryXAxis x:Name=''xmXAxis'' ItemsSource=''{Binding Path=., ...
    Posted to Yuki Mita (Weblog) by ymita on August 14, 2014
  • WebDataGrid 利用方法一覧

    NetAdvantage for ASP.NET で提供させて頂いている主力グリッドコントロール WebDataGrid の利用方法エントリ一覧です。よくご質問頂く内容が中心のエントリとなっていますので、初めて WebDataGrid を利用される方や、UltraWebGrid から WebDataGrid へ移行を予定されている方は特にご活用いただけると思います。また、これまで WebDataGird をご活用いただいてきたお客様にも新しい機能やこれまでご利用いただいていなかった機能をご紹介出来ればと思います。多くのエントリで実行可能なサンプルを用意していますので、サンプルを動かしながら実装内容をご確認いただけます。 スタイリング / CSS ...
    Posted to Yuki Mita (Weblog) by ymita on August 15, 2013
  • マイクロソフトのVisual Studio 2008のテクニカルセミナー

    Wow!昨日開催されたのVS2008Launchにマイクロソフト様よりご招待をいただいたことに大変感謝をしています。昨日のイベントは12月にリリース予定のVS2008のマスコミへの発表会でした。(VS2008の英語版は先週RTMしました。)インフラジスティックスはマイクロソフト様からこのイベントへの参加の打診をいただきました。幸いにもVS2008の優れた点を上げることはとても簡単です。最高の開発環境ツールといっても過言ではないでしょう。  個人的にはデザイナーと開発者がアプリケーション開発上で協力し合えるということは喜ばしいことだと思っています。もう見苦しいアプリケーションはうんざりなのです。グラフィックデザイナーと共同して、アプリケーションの見栄えをもっとよくしましょう ...
    Posted to デビッド・クーニング (Weblog) by David Keuning on November 29, 2007
Powered by Community Server (Commercial Edition), by Telligent Systems