Browse by Tags

All Tags » igGrid
  • 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
  • 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
  • igGrid でカスタムのリモートページングを実装する(Web API を使用)

    igGrid のページング機能はレコードデータを複数のページに分け、データの読み込みを表示するページ分のみとすることでパフォーマンスを向上させる機能です。 データの取得はローカルまたはリモートで実行できますが、今回ご紹介するのはリモートでデータチャンクを取得し、表示する方法です。 igGrid のリモートページングは Infragistics ASP.NET MVC ラッパーを使用する場合は GridDataSourceActionAttribute 属性を付与したアクションメソッドを作成し、 ActionResult として IQueryable タイプのデータを返すだけで自動的にページング処理が行われます。 ここでは、そのような ...
    Posted to mikam (Weblog) by Mihoko Kamiishi on December 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
  • igGrid 新規追加行の初期値(デフォルト値)を指定しよう

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

    igGrid の列をスタイリングしてみましょう。 セルは columnCssClass オプション、ヘッダは headerCssClass オプションを利用してそれぞれスタイリングを行うことができます。 igGrid では通常セルやヘッダのテキストを左寄せで表示するようになっています。今回は columnCssClass と headerCssClass を利用してテキストのアラインメントを指定します。 ヘッダ・・・すべての列で中央寄せ セル・・・数値列は右寄せ、テキスト列は左寄せ   スタイル: <style> /*ヘッダのスタイル*/ .headerStyle { text-align: ...
    Posted to Yuki Mita (Weblog) by ymita on August 3, 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
  • [jQuery] [ASP.NET MVC] igGrid の各種設定を Controller 側で行う方法

    弊社の igGrid (jQuery コントロール) では、ASP.NET MVC を利用する場合はグリッドの定義や各種設定を行うのに View 側で Razor 構文を用いるケースが一般的です。 以下はその例です。 View 側の Grid 定義部分 @(Html.Infragistics().Grid(Model.Customers.AsQueryable()) .ID(''testGrid'') .AutoGenerateColumns(false) .Columns(column => { column.For(x => ...
    Posted to Satoru Yamaguchi - 山口 慧 (Weblog) by Satoru Yamaguchi on August 15, 2014
  • [jQuery]+[ASP.NET MVC] Chart + Grid の Excel出力

    以前、[ASP.NET]チャート+グリッドのExcel出力という記事を書きましたが、今回はそれの jQuery 版を書きます。弊社では Ignite UI という jQuery コントロールが提供しておりますが、今回はそれにMVCヘルパーを使ってチャートとグリッドを1ページ内に表示し、サーバ処理でそのチャート画像とグリッドの内容を Excel 出力する方法をご紹介します。   概要 本ポストでは、Ignite UIの基本的な使用方法やチャートとグリッドの表示方法についての詳しい説明は割愛させていただき、以下の点にフォーカスしたいと思います。 ・チャート(Canvasタグ)の画像化とサーバへの送信 ・グリッドの Excel ...
    Posted to Satoru Yamaguchi - 山口 慧 (Weblog) by Satoru Yamaguchi on April 15, 2014
Powered by Community Server (Commercial Edition), by Telligent Systems