Browse by Tags

All Tags » jQuery
Showing page 1 of 6 (131 total posts)
  • Ignite UI の始め方

    - 2017/07/21(金) 時点の情報に基づいています - こんにちは、インフラジスティックス・ジャパン デベロッパーサポート の桐生です。 Ignite UI の始め方と題して Ignite UI のオンラインサンプル Ignite UI のダウンロード Ignite UI の最小構成 Ignite UI の実装基礎 Ignite UI の他フレームワークへの組み込み(次回以降) について整理していきたいと思います。既出の情報もあるかと思いますがご容赦ください。   Ignite UI ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on July 21, 2017
  • Ignite UI for JavaScript 2017 Vol.1 新機能

    先日リリースを発表しました Infragistics Ultimate 2017 Vol.1 には JavaScript/HTML5、Angular、React、ASP.NET MVC に対応するライブラリー、Ignite UI が含まれています。この新機能についてより詳しく解説します。 新機能のハイライト グリッドの新機能 – テキスト フィルタリング、GroupBy 集計、グリッドのキャプション機能が高機能、高速グリッドである igGrid に追加 新コントロール: スプレッドシートコントロール – Microsoft Excel ライクなスプレッドシート UI を実現 新コントロール: スケジュール コントロール – ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on July 13, 2017
  • Write Fast, Run Fast: Infragistics Ultimate 2017 Vol.1 の新機能

    モバイル、Web、デスクトップ全てに対応する UI コントロール開発スイート、Infragistics Ultimate の最新バージョンである、Infragistics Ultimate 2017 Vol.1 がリリースされました! 新機能の概要を各プラットフォームごとにご紹介します。 Ignite UI for JavaScript インフラジスティックスの開発ツールは、“Write Fast, Run Fast”—アプリケーションを迅速に開発し、また、高いパフォーマンスを実現する、というコンセプトで開発されています。今回のリリースでもこのコンセプトを踏襲しつつ、お客様からのニーズに応える新コントロールや新機能を追加しました。 スケジュール 2017 Vol.1 ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on June 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
  • 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
  • [16.2] Infragistics Ultimate 16.2 新機能情報まとめ [What’s New]

    このエントリは 2016 年 10 月にリリースされた Infragistics Ultimate 2016 Vol.2 の新機能についてのまとめです。それぞれのプラットフォームの新機能をまとめています。 Infragistics Ultimate とは? Web、モバイル、デスクトップの様々なプラットフォームやテクノロジーでの画面開発を強力にサポートする統合開発 UI コンポーネント スイートです。Angular や React、jQuery、ASP.NET MVC などのフレームワークに対応した JavaScript コンポーネントや、Android や iOS といったネイティブのモバイル アプリケーションを構築するための Xamarin.Forms ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on January 27, 2017
  • [16.2] Ignite UI 2016 Vol.2 の新機能

    Ignite UI 2016 Vol.2 がリリースされました!! 今回のリリースでは日本のお客様の声から実装された データグリッドでの複数行レイアウト インライン編集のサポートを含む機能拡張、チャートの機能拡張、オープンソース化など非常に多岐に渡る拡張を行いました。 オープンソース化とAngular 2、React への対応 データ グリッドの機能向上 新チャートの追加と機能向上 ASP.NET Core サポート その他の新機能 オープンソース化と Angular 2、React への対応 JavaScript は長い間、「Web ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on November 2, 2016
  • Ignite UI components for Angular 2 を見てみよう

    - 2016/08/17(水)時点の情報に基づいています - こんにちは、インフラジスティック・ジャパン デベロッパーサポート の桐生です。 弊社のjQuery/HTML5用コントロールIgnite UI が Angular 2 に対応した Ignite UI components をご紹介したいと思います。 Ignite UI components for Angular 2 は、Angular 2 beta 版からサポートを開始し、現時点では RC4 に対応しています。 Angular 2 については、つい先日8/10(水) にRC5がリリースされましたので、Ignite UI components もそのうちアップデートがあるのではないかと期待しています。 ソースコードは ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on August 17, 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 の列をスタイリングしてみましょう。 セルは 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
  • igGrid - ツールチップのカスタマイズ

    igGrid のツールチップをカスタマイズしてみます。 例えば、igGrid のデフォルト状態では日付のデータは下記のように date オブジェクトがそのまま表示されます。ツールチップをカスタマイズして、セルと同じ形式で日付のデータを表示してみましょう。   ツールチップのカスタマイズは、ツールチップ表示タイミングで発生する tooltipShowing イベント内でコンテンツを書き換えることで実現できます。ここでは日付データを yyyy/MM/dd の形式に変換しています。 $(''#grid'').igGrid({ ... features: [ { name: ''Tooltips'', ...
    Posted to Yuki Mita (Weblog) by ymita on July 28, 2016
  • Ignite UI のカスタムビルドを使用してパフォーマンス改善を図る

    - 2016/07/21(水)時点の情報に基づいています -   Ignite UI のJSファイルのロードに時間がかかってパフォーマンスが遅い場合は・・・ Ignite UI の機能を使用するためには https://jp.igniteui.com/getting-started infragistics.core.js    410KB   // 基本ロジックおよびデータ ソース コンポーネント infragistics.dv.js      3.28 MB // チャートおよびマップ コントロール ...
    Posted to Tatsushi Kiryu (Weblog) by tkiryu on July 21, 2016
  • igDataChart - 条件によるスタイリングの変更

    棒グラフに表示されているデータのうち、特定の条件にあるデータポイントの色を変えてみます。 ここでは売上データのうち、売上が一定値を下回るデータポイントに赤色を配色することで、 初見でも注目すべきデータが強調されます。 手順 1.assigningCategoryStyle イベント発生の有効化 assigningCategoryStyle イベント内でスタイリングのロジックを実装しますが、デフォルトでは assigningCategoryStyle イベントは発生しないようになっています。isCustomCategoryStyleAllowed オプションに true を設定してこのイベントが発生するようにします。 series: [ { ...
    Posted to Yuki Mita (Weblog) by ymita on July 11, 2016
  • [15.2] Ignite UI, ASP.NET MVC 新機能 [jQuery/HTML5]

    Ignite UI は最新の HTML5、JavaScript、ASP.NET MVC に対応した Web コントロール セットです。デスクトップ、タブレット、スマートフォンといった様々な端末や解像度に適合した Web ソリューション構築をサポートしています。 2015 Vol.2 では将来を見据えたコントロールのリファクタリングと開発生産性向上のための機能追加が行われました。 エディター コントロール - 新コントロール 今回のリリースの大きな目標として我々のコントロールの機能と保守性、品質のバランスをより良くするというものがありました。我々は多くのエディター ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on October 26, 2015
  • [15.2] 次期リリースに向けて - 概要

    このエントリは弊社開発ツール部門シニア バイス プレジデントである、Jason Beres の 2015/09/30 Blog にて公開された内容を元に日本語版製品の状況もふまえて作成しています。 原文:  Jason Beres » Preview - What’s Coming in 15.2 2015 Vol.2 のリリースが近づいてきました! このエントリでは次期リリースの概要をご紹介します。 現時点では日本語版のリリースを 10 月下旬に予定していますが、このリリースにおいても様々なプラットフォームで新機能や新コントロールの提供を開始します。インフラジスティックスは WPF, Windows Forms といったリッチクライアント ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on October 1, 2015
  • [15.1] Ignite UI: HTML5, jQuery, ASP.NET 新機能

    Ignite UI は HTML5, JavaScript または ASP.NET MVC に対応した Web、ハイブリッド対応 UI コンポーネントです。レスポンシブ Web デザインやタッチ対応など最新の Web テクノロジーを業務用アプリケーションで利用することができます。 今回リリースされた 2015 Vol.1 における新機能をご紹介します。 igTreeGrid - 新コントロール 2014 Vol.2 において CTP としてリリースしていましたツリー形式のグリッド コントロールが正式リリースとなりました。このグリッドはファイル エクスプローラーや BOM ツリーなど階層構造かつ複数の列情報を持つデータを整列し表現することができます。igGrid ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on April 22, 2015
  • [15.1] Infragistics Ultimate 2015 Vol.1 リリース!

    本日、Infragistics Ultimate 2015 Vol.1 のリリースを正式に告知させていただきました! 今回のリリースでは、iOS、Android、Windows Phone 向けネイティブ アプリケーションを共通のコードで作成可能な Xamarin.Forms 対応コントロールの提供を開始し、更に HTML5/jQuery 対応コントロールの拡充も併せて行っています。 その他新機能のハイライトについては下記でご紹介していますのでご確認ください。 トライアル版は下記よりダウンロードいただけます。(サイトへのログインが必要となります。) また、トライアル期間でも技術サポートを提供いたしておりますのでこちらも併せてご利用ください。 また、サポート ...
    Posted to Daizen Ikehara (Weblog) by Daizen Ikehara on April 21, 2015
  • [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
  • Ignite UI でダッシュボードアプリケーションを作ろう! その3:igPieChart 編

    ダッシュボードアプリケーション作成の第三回です。 前回、前々回と igDataChart を利用してウェブサイトの月間アクセス数や、アクセスからセッション数や1セッションの平均ページビューを表示する画面を作成しました。今回は igPieChart という円グラフを表示するコントロールを利用して、トラフィック流入の分類を表示してみます。 HTML igPieChart ではチャート本体と凡例部分を別々に定義します。div id=”piechart” の部分にパイチャート本体、div id=”piechartLegend” の部分にパイチャートの凡例を表示します。   <!-- igPieChart --> <div ...
    Posted to Yuki Mita (Weblog) by ymita on July 18, 2014
  • Ignite UI でダッシュボードアプリケーションを作ろう! その2:igGrid テンプレート編

    ダッシュボードアプリケーション作成の第2回目となります。今回は igGrid のテンプレートとして igDataChart をセルに埋め込み、月間のサイトアクセスからセッションやページビューの情報を表示します。 下記赤枠内のチャートとチャート右側の説明は、それぞれ igGrid のセルに埋め込むことで実現します。左列に igDataChart を、右列に数値+文字列の組み合わせを表示します。   1.データの整形 data.js 内に含まれる月間アクセス数(monthlyAccessData)から、月のセッション合計、ページビュー合計、セッションの平均ページビューを計算します。chartInGridData リストの各 val ...
    Posted to Yuki Mita (Weblog) by ymita on July 11, 2014
  • IgniteUI でダッシュボードアプリケーションを作ろう! その1:igDataChart スタイリング編

    今回から3回に分けて、IgniteUI コントロールを利用したダッシュボードアプリケーションを作っていきたいと思います。IgniteUI コントロールは jQuery + jQueryUI をベースに開発されていますので、サーバーサイドのテクノロジーに特に制限されること無くウェブアプリケーションを作成できる利点があります。これから紹介するサンプルは HTML と JavaScript の組み合わせでできており、HTML5 に対応するブラウザであれば動作します。 ダッシュボードにはサイトの月間アクセス数、セッション数やアクセスに対する平均ページビュー、トラフィック情報などを表示します。アプリケーション内で IgniteUI の igDataChart、igGrid、igPieChart ...
    Posted to Yuki Mita (Weblog) by ymita on June 23, 2014
  • Ignite UI igDataChart のデータバインドとデータフォーマット

    Ignite UI で提供しているチャートコントロール、igDataChart を取り上げます。今回はデータのバインド方法や軸の設定など基本的なプロパティの利用方法と、よくお問い合わせのある X 軸のフォーマット、更にツールチップのカスタマイズ方法をご紹介します。 1.データバインド 1-1.データの準備 まずはバインドするデータを用意します。jQuery でよく利用される JSON 形式データに monthlyAccess と accessDate という2つのメンバを用意します。 var data = [ { ''monthlyAccess'':900, ''accessDate'': new Date(2014, 05, 01) }, { ...
    Posted to Yuki Mita (Weblog) by ymita on May 19, 2014
1 2 3 4 5 Next > ... Last »
Powered by Community Server (Commercial Edition), by Telligent Systems