このトピックでは、igGrid
™ で列集計を構成する方法を紹介します。
このトピックは、以下のセクションで構成されます。
以下のリストは、このトピックの情報を完全に理解するために前提条件を示しています。
以下の表は、igGrid
コントロールの columnSummaries
機能の構成可能な [画面要素] とビヘイビアを示しています。
構成可能なビヘイビアー/機能 | 構成の詳細 | 構成プロパティ |
---|---|---|
集計タイプ | 集計計算のタイプは、プロパティで設定されます。 | type |
自動/手動計算 | 計算は、値を入力した直後に自動的に、またはユーザーがボタンをクリックした後に実行できます。この機能は、2 種類のレンダリング モードで提供されます。 | calculateRenderMode |
集計の最適化 | 集計は特殊なレンダリング モードにより最適化して描画できます。 | compactRenderingMode |
集計ボタン | 専用プロパティから構成可能な、ヘッダー セルの集計ボタン。 | showSummariesButton |
集計メニュー ボタン | 集計メニュー ボタン - 専用プロパティから構成可能な、フッター セルの集計メニュー ボタン。 | showDropDownButton |
集計計算をキャンセルする | summaryCalculation イベントを処理し、ある条件下でキャンセルします。 |
- |
構成可能イベント | これらのプロパティの詳細情報は、プロパティ参照セクションのリストを参照してください。列集計のイベント (igGrid) |
注: 定義済み集計関数は列の
dataType
に基づいて有効されます。たとえば、列のdataType
が "number" または "numeric" の場合、デフォルトの集計関数は "Count"、"Min"、"Max"、"Sum"、"Avg" (平均) です。dataType が "date" または "time" の場合、デフォルトの集計関数は "Count"、"Min"、および "Max" です。それ以外の場合 (dataType が "string"、"bool"、または "object")、デフォルトの集計関数は "Count" のみです。
集計タイプには、ローカルおよびリモートの 2 種類があります。このオプションは、集計の計算をクライアントで行うか、サーバーで行うかを指定します。オプションが local に設定されていて、ユーザーが集計関数を選択する場合、計算はブラウザーですぐに行われますが、remote に設定されて、ユーザーが集計関数を追加する場合 (右側の画像)、ユーザーが選択を完了した後に計算値がサーバーに送信されます。
以下の図では、タイプは local (左側の画像)、また remote (右側の画像) に設定されています
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridSummaries オプションからアクセスされます。
プロパティ | 設定 |
---|---|
type | local |
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Summaries',
type: 'local'
}
]
});
});
</script>
MVC の場合:
<%= Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Summaries().Type(OpType.Local);
}).DataBind().Render()
%>
関連リンク:
どのように計算を行うか 2 種類のレンダリング モードが定義されています。これらのモードは calculateRenderMode
プロパティで管理されています。このオプションは、すぐに計算を行うか、[OK] ボタンをクリックした後に行うかを指定します。オプションを onselect に設定すると、[OK]/[キャンセル] ボタンは表示されません (右側の画像)。集計をオンまたはオフにすると、計算は即座に更新され、ドロップダウン メニューの外でクリックすると、自分で計算方法を選択できます。集計をオンまたはオフにする場合にオプションを okcancelbuttons に設定すると (左側の画像)、計算されず、選択または選択解除されるだけです。ドロップダウンの外でクリックすると、[キャンセル] ボタンをクリックした場合と同じ操作になります。
以下の図では、オプション calculateRenderMode は okcancelbuttons (左側の画像) および「onselect」(右側の画像) に設定されています。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridSummaries
オプションからアクセスされます。
プロパティ | 設定 |
---|---|
calculateRenderMode | onselect |
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Summaries',
calculateRenderMode: 'onselect'
}
]
});
});
</script>
MVC の場合:
<%= Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature => { feature.Summaries().CalculateRenderMode(SummaryCalculateRenderMode.OnSelect); }).DataBind().Render()
%>
igGridSummaries オプションを使用してレンダリング モードを設定する:
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGridSummaries('option', 'calculateRenderMode', 'onselect');
});
</script>
この機能は、描画される集計を最適化する方法を指定します。この機能は compactRenderingMode
オプションで制御されており、true (上の画像)、false (中央の画像)、auto (下の画像) という 3 つの値を取ることができます。true が設定されている場合、集計表示の最小化が有効になり、複数の集計を 1 行に表示します。
false オプションを指定すると、集計はタイプごとに行を変えて表示されます。オプションが auto に設定されている場合、表示できる集計の最大数が 1 の場合は true、それ以外の場合は false を使用します。
以下の図では、compactRenderingMode
は true (上の画像)、false (中央の画像)、auto (下の画像) に設定されています。
以下の表は、プロパティ設定の推奨構成をマップしています。
プロパティは igGridSummaries
オプションからアクセスされます。
プロパティ | 設定 |
---|---|
compactRenderingMode | true |
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Summaries',
compactRenderingMode: true
}
]
});
});
</script>
ASPX の場合:
<%= Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{ feature.Summaries().CompactRenderingMode(SummaryCompactRenderingMode.True); }).DataBind().Render()
%>
igGridSummaries
オプションを使用してコンパクト モードを設定します。
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGridSummaries('option', 'compactRenderingMode', true);
});
</script>
showSummariesButton
プロパティにより、列のヘッダーで集計ボタンを表示または非表示にすることができます。true に設定されている場合 (上の画像)、ユーザーはボタンをクリックして、グリッドの集計を非表示または表示できます。showSummariesButton
オプションが false に設定されている場合 (下の画像)、ボタンは表示されません。
以下の図では、showSummariesButton
オプションは true (上の画像) および false (下の画像) に設定されています。
以下の表は、プロパティ設定の推奨構成をマップしています。
プロパティは igGridSummaries
オプションからアクセスされます。
プロパティ | 設定 |
---|---|
showSummariesButton | true |
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Summaries',
showSummariesButton: true
}
]
});
});
</script>
ASPX の場合:
<%= Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Summaries().ShowSummariesButton(true);
}).DataBind().Render()
%>
igGridSummaries
オプションを使用して集計ボタンを設定する:
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGridSummaries('option', 'showSummariesButton', true);
});
</script>
showDropDownButton
プロパティにより、使用可能なボタン集計でメニューを開くボタンを表示または非表示にすることができます。このオプションを true に設定している場合 (上の画像)、集計メニュー ボタンが使用できます。
showDropDownButton
プロパティが false に設定されている場合 (下の画像)、集計メニュー ボタンはグリッドに表示されません。これは特定の集計を表示し、初期化後にユーザーがその集計を変更できないようにする場合に便利です。
以下の図では、showDropDownButton
は true (上の画像) および false (下の画像) に設定されています。
以下の表は、プロパティ設定の推奨構成をマップしています。プロパティは igGridSummaries
オプションからアクセスされます。
プロパティ | 設定 |
---|---|
showDropDownButton | true |
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Summaries',
showDropDownButton: true
}
]
});
});
</script>
ASPX の場合:
<%= Html.Infragistics().Grid(Model)
.AutoGenerateColumns(true)
.Features(feature =>{
feature.Summaries().ShowDropDownButton(true);
}).DataBind().Render()
%>
igGridSummaries
オプションを使用してドロップダウン ボタンを設定します。
HTML の場合:
<script type="text/javascript">
$(function () {
$("#grid1").igGridSummaries('option', 'showDropDownButton', true);
});
</script>
summariesCalculating
イベントを処理することで、集計計算をキャンセルできます。
以下はプロセスの概念的概要です。
summariesCalculating
イベントを処理する
ハンドラー関数を定義します。
summariesCalculating
イベントが発生した場合に呼び出される関数を定義します。
HTML と ASPX の場合:
<script type="text/javascript">
function gridSummariesCalculating (evt, ui) { ... };
</script>
ハンドラーを igGrid の summariesCalculating イベントに設定します。
いったんハンドラーを定義したら、summariesCalculating
イベントのハンドラーとして設定する必要があります。jQuery では、これはウィジェットがインスタンス化されるときに行うことができます。
ASP.NET MVC では、jQuery live または bind API を使用してイベントを添付する必要があります。また live または bind API の使用は、純粋な jQuery 実装のイベントを添付するためのオプションです。このイベントの型は iggridsummariessummariescalculating
です。
HTML の場合:
$(function () {
$("#grid1").igGrid({
autoGenerateColumns: true,
dataSource: adventureWorks,
responseDataKey: 'Records',
features: [
{
name: 'Summaries',
showDropDownButton: true,
summariesCalculating: gridSummariesCalculating
}
]
});
});
HTML と ASPX の場合:
$("#grid1").live("iggridsummariessummariescalculating ", gridSummariesCalculating);
false を返すことでイベントをキャンセルする
HTML と ASPX の場合:
<script type="text/javascript">
function gridSummariesCalculating (evt, ui) {
if (conditionNotMet)
return false;
};
</script>
カスタム summaryOperands オブジェクト (custom タイプの summaryOperands
) を定義すると、集計機能をカスタム機能へポイントして行集計を計算します。compactRenderingMode
が false に設定されている場合、両方の結果が定義され、カスタム メソッドは並べ替え順序に従って集計行に配置されます。以下のサンプルは 2 つのカスタム集計関数 (countTrueValues、countFalseValues) を含みます。ブール値列の true または false 値の数を計算します。その集計関数は「メーカー フラグ」列で使用されます。
以下は、その他の役立つトピックです。
オンラインで表示: GitHub